jQuery和jQuery选择器

jQuery 概述

jQuery是一个JavaScript库,使开发者更加便捷的操做文档对象、选择DOM元素、制做动画效果、进行事件处理、使用异步数据传输AJAX等功能。

jQuery是免费、开源、轻量级的js库，兼容各类浏览器，write less, do more；

最流行的javascript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。

jQuery的特色

{轻量级

{功能强大的选择器

{对DOM操做的封装

{完善的Ajax的封装

{普遍的浏览器兼容性

{链式代码方式

{逻辑代码与表示代码分离

{丰富的插件

jQuery 对象介绍

oDOM对象转化为jQuery对象

对于DOM对象，只须要用$()把DOM对象包装起来，就能够得到一个jQuery对象了。示例代码以下：

var foo =document.getElementById("foo");

var $foo =$(foo);

jQuery对象转成DOM对象： 
两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index); 
(1)jQuery对象是一个数据对象，能够经过[index]的方法，来获得相应的DOM对象。 
如：var $v =$("#v") ; //jQuery对象 
var v=$v[0]; //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 
(2)jQuery自己提供，经过.get(index)方法，获得相应的DOM对象 
如：var $v=$("#v"); //jQuery对象 
var v=$v.get(0); //DOM对象 
alert(v.checked) //检测这个checkbox是否被选中 

注意，this是标准dom对象，要用$(this)来转化为jQuery对象。

jQuery选择器简介

选择器是jQuery强大功能的基础，在jQuery中，对事件处理、遍历DOM和Ajax操做都依赖于选择器。它彻底继承了CSS的风格，使用简单。若是能熟练掌握jQuery选择器，不只能简化程序代码，并且能够达到事半功倍的效果。

根据查找HTML代码中元素的依据不一样，jQuery选择器能够分为基本选择器、层次选择器、过滤选择器和表单选择器。

举个栗子：

$("input:not(.myClass)")选取class不是myClass的<input>元素

$(":focus")选取当前页面中得到焦点的元素，

注意都是要有引号的。

表单选择器    

$(":input")选取全部的<input>、<textarea>、<select>和<button>元素

$(":text")选取全部的单行文本框

$(":password")选取全部的密码框

$(":radio")选取全部的单选框

$(":checkbox")选取全部的多选框

$(":submit")选取全部的提交按钮

$(":image")选取全部的图像按钮

$(":reset")选取全部的重置按钮

$(":button")选取全部的按钮

$(":file")选取全部的上传按钮

$(":hidden")选取全部的不可见元素

 

jQuery 中元素属性与样式类的操做

jQuery中提供了attr()方法，用于查询或设置匹配元素的属性和值。基本语法结构以下所示：

查询：$(selector).attr(attribute)

设置：$(selector).attr(attribute,value)

设置多个属性值：$(selector).attr({attribute:value, attribute:value ...})

必须加引号的，必须的必。

jQuery中提供了removeAttr()方法，用于从被选元素中移除属性。其基本语法结构以下所示：

$(selector).removeAttr(attribute)

其中，参数attribute为必选项，表示从指定元素中移除的属性。

添加样式类 

jQuery中提供了addClass()方法，用于向被选元素添加一个或多个类。其基本语法结构以下所示：

$(selector).addClass(class)

可使用函数向被选元素添加类。其基本语法结构以下所示：

$(selector).addClass(function(index,oldclass))

其中，参数function表示返回一个或多个待添加类名的函数，参数index是可选的，表示选择器的index位置，参数oldclass 也是可选的，表示选择器的旧的类名。

jQuery中提供了removeClass()方法，用于从全部匹配的元素中移除所有或者指定的CSS类：

$(selector).removeClass(class)

其中，参数class为可选项，表示要移除的类的名称。如需移除若干类，可使用空格来分隔类名，若是不设置该参数，则会移除全部类。

还可使用函数类移除类：

$(selector).removeClass(function(index,oldclass))

交替样式类   

toggleClass()方法用于设置或移除被选元素的一个或多个类，该方法将检查被选元素中指定的类。若是不存在则添加类，若是已设置则移除类，造成交替效果。其基本语法结构以下所示：

$(selector).toggleClass(class,switch)

      其中，参数class是必选项，表示添加或移除类的指定元素。如需设置若干个类，可使用空格来分隔类名。switch参数为可选项，该参数必须为布尔值，用以表示添加或移除类。当switch为true时，表示添加类，为false表示移除类。

能够用来建立开关效果。

注意：jQuery还有一个toggle()方法，这个方法原本有两个做用，一个是切换显示状态，如今这个效果额仍然可使用，还有一个是点击交替执行做用，相似于上面的toggleClass(),可是再jQuery1.8版本时废弃了，再1.9版本就移除了。

jQuery 中样式属性与元素内容的操做

css()方法能够返回第一个匹配元素的CSS属性值。其基本语法结构以下所示：

$(selector).css(name)

    其中，参数name表示CSS属性的名称，该参数可包含任何CSS属性。

css()方法还能够为全部匹配元素设置指定的CSS属性。其基本语法结构以下所示：

$(selector).css(name,value) //注意双引号

css()方法还能够设置多个CSS属性/值对，其基本语法结构以下所示：

$(selector).css({property:value, property:value, ...})

大括号，双引号。

设置元素位置偏移   

offset()方法用来返回或设置匹配元素相对于文档的偏移坐标。当返回偏移坐标，其基本语法结构以下：

      $(selector).offset()

      该方法将返回第一个匹配元素的偏移坐标。方法返回的对象包含两个整型属性：top 和 left，以像素为单位。获取这两个整型属性的语法格式以下：

  $(selector).offset().top

  $(selector).offset().left

      当设置全部匹配元素的偏移坐标，其基本语法结构以下：

  $(selector).offset({top:value,left:value});

      参数{top:value,left:value}表示以像素为单位的top和left坐标。//说得是坐标，而不是偏移量

操做HTML代码   

jQuery中的html()方法能够用来返回或设置被选元素的内容。若是该方法未设置参数，将会返回第一个匹配元素的当前内容。其基本语法结构以下：

  $(selector).html()

     当使用该方法设置一个值时，它将会覆盖全部匹配元素的内容。其基本语法结构以下：

  $(selector).html(content)

     其中，参数content为可选项，用以设置被选元素的新内容。该参数可包含HTML标签。

操做文本

jQuery中的text()方法也能够用来获取或设置被选元素的内容。但与html()方法不一样的是，该方法将只读取元素的纯文本内容，包括其后代元素，将会删除内容中的HTML标签。

  $(selector).text()

      当该方法用于设置值时，它将会覆盖被选元素的全部内容。其基本语法结构以下：

  $(selector).text(content)

      其中，参数content表示被选元素的新文本内容。

操做表单元素的值   

jQuery中的val()方法能够返回或设置页面中表单中<input>元素的value属性的值。若是该方法未设置参数，则返回被选元素的当前值，其基本语法结构以下：

  $(selector).val()

      若是要设置元素的value属性值时，其基本语法结构以下：

  $(selector).val(value)

    其中，参数value表示为<input>元素设置的属性值