jQuery笔记

1. 简介

jQuery是一个JavaScript库，它通过封装原生的JavaScript函数得到一整套定义好的方法。

优点：

• 操作起来非常方便
• 浏览器的兼容性很好
• 有大量基于jQuery的插件

1.1. 代码风格

在jQuery中，不管是页面元素的选择还是内置功能函数的使用，都是用美元符号“$”来起始的。

$(function(){
    });      //执行一个匿名函数
$('#box');       //对id=box的页面元素进行选择
$('#box').css('color','red');  //执行功能函数

由于$本身就是jQuery对象的缩写形式，因此上例中的$都可以替换为jQuery，即 $===jQuery。

jQuery对象执行某一功能函数后，返回的还是jQuery对象，故jQuery可以采用连缀的代码模式。

1.2. 加载模式

文档的加载顺序是以文档流的方式从上到下加载的，如果jQuery代码写在DOM元素之前，就会出现无法获取到DOM元素的问题。

为了防止此问题，jQuery中有一个延迟加载jQuery代码的技巧：

$(function(){
... //内部写jQuery代码，就会等待网页中的DOM结构加载完毕之后，再来加载此处的jQuery代码。可以执行多次。
});

js中类似作用的写法是：

window.onload=function(){
... //内部写js代码，需要等待网页全部加载完毕（包括图片），才会加载内部的js代码。只能执行一次。
};

1.3. 对象转换

jQuery对象转换为DOM对象，主要有两种方法：

• get()方法。如：$(‘#box’).get(0)
• 数组下标。如：$(‘#box’)[0]

DOM对象转换为jQuery对象：

• 用$()将DOM对象包裹起来即可

1.4. 多个库之间的冲突

当一个项目中引入了多个第三方库的时候，可能出现命名冲突。比如prototype、Base库，他们都使用“$”作为起始符，这时就会产生冲突。

解决方法有两个：

• 将jQuery库在Base库之前引入，那么$的所有权就归Base库所有，而jQuery库可以直接用jQuery对象调用，或者创建一个“\$\$”起始符给jQuery使用。

var $$=jQuery;	// 创建一个$$的jQuery对象

• 如果将jQuery库在Base库之后引入，那么$的所有权归jQuery所有，而Base库就会失去作用。这里，jQuery提供了一个方法：

jQuery.noConflict();    // 将jQuery的$符所有权剔除
var $$=jQuery;

2. 常规选择器

2.1. 简单选择器

使用“$()”函数来包裹CSS选择器后，就可以返回页面中对应元素的jQuery对象。

• 标签选择器 $(‘div’)
• ID选择器 $(‘#box’)
• 类选择器 $(‘.box’)

其中，ID选择器返回的是单个jQuery对象，而标签选择器和类选择器返回的可能是多个。我们可以使用jQuery对象的length属性或size()方法来查看返回的jQuery对象的个数。

2.2. 进阶选择器

• 后代选择器 $(‘#box p’) 等同于 $(‘#box’).find(‘p’) 只要p元素是后代，不论是儿子还是孙子、重孙子，都会被选择。（后一种形式效率更高）
• 子代选择器 $(‘#box > p’) 等同于 $(‘#box’).children(‘p’) 只有当p元素是儿子时，才会被选择。（后一种形式效率更高）
• 群组选择器 $(‘div,p,.box’)
• 通配选择器 $(‘*’) 获取所有元素的jQuery对象
• 组合选择器 $(‘div.box’)
• next选择器 $(‘#box + p’) 等同于 $(‘#box’).next(‘p’) 只获取某节点后的一个同级节点p
• nextAll选择器 $(‘#box ~ p’) 等同于 $(‘#box’).nextAll(‘p’) 获取某节点后所有的同级节点p

如果find()、children()、next()、nextAll()方法中，没有传递参数，就相当于传递了参数”*”，即所有元素。

和next()方法功能相反的方法是prev()方法，和nextAll()功能相反的方法是prevAll()方法。

nextUntil()方法，选定某节点后面的所有同级节点，直到遇到某个指定的元素就停止。

prevUntil()方法，选定某节点前面的所有同级节点，直到遇到某个指定的元素就停止。

siblings()方法，正好集成了preAll()和nextAll()两个方法的功能。

注意： 在构造选择器时，有一个通用的优化原则：只追求必要的确定性。jQuery提供的方法的效率要高于选择器的效率。推荐优先使用方法进行选择。

2.3. 高级选择器

• 属性选择器

$('a[title]')      获取具有这个属性的DOM对象
$('a[title=num1]') 获取具有这个属性，且属性值等于指定值的DOM对象
$('a[title^=num]') 获取具有这个属性，且属性值以指定值开头的DOM对象
$('a[title$=num]')    获取具有这个属性，且属性值以指定值结尾的DOM对象
$('a[title|=num]') 获取具有这个属性，且属性值以指定值后面跟一个“-”号的DOM对象
$('a[title!=num1]')    获取具有这个属性，且属性值不等于指定值的DOM对象
$('a[title~=num]')    获取具有这个属性，且属性值以指定值后面跟一个空格分割的列表的DOM对象
$('a[title*=num]') 获取具有这个属性，且属性值中包含指定值的DOM对象
$('a[name][title=num1]') 获取具有多个属性，且属性值等于指定值的DOM对象

3. 过滤选择器

过滤器主要通过特定的过滤规则来筛选所需的DOM元素，和CSS中的伪类的语法类似，以冒号“:”开头。

3.1. 基本过滤器

过滤器名	jQuery语法	说明
:first	$(‘li:first’)	选取第一个元素
:last	$(‘li:last’)	选取最后一个元素
:not(selector)	$(‘li:not(.red)’)	选取class不是red的li元素
:even	$(‘li:even’)	选取索引（0开始）是偶数的元素
:odd	$(‘li:odd’)	选取索引（0开始）是奇数的元素
eq(index)	$(‘li:eq(2)’)	选取索引等于index的元素
:gt(index)	$(‘li:gt(2)’)	选取索引大于index的元素
:lt(index)	$(‘li:lt(2)’)	选取索引小于index的元素
:header	$(‘:header’)	选取标题元素，h1-h6
:animated	$(‘:animated’)	选取正在执行动画的元素
:focus	$(‘:focus’)	选取当前获取焦点的元素

jQuery为常用的过滤器提供了对应的方法，以便提升性能和效率。

first()方法   如：$('li').first()
last()方法    如：$('li').last()
not()方法 如：$('li').not('.red')
eq()方法  如：$('li').eq(2)

3.2. 内容过滤器

内容过滤器的过滤规则主要是对包含的子元素或文本内容。

过滤器名	jQuery语法	说明
:contains(text)	$(‘div:contains(“abc”)’)	选取文本内容中包含abc的div元素
:empty	$(‘div:empty’)	选取不包含子元素和文本内容的div元素
:has(selector)	$(‘div:has(.red)’)	选取div的子元素中包含class等于red的div元素 等同于 $(‘div’).has(‘.red’)
:parent	$(‘div:parent’)	选取包含子元素或文本内容的div元素

jQuery提供了三个和:parent功能不同的方法：

• parent()方法。$(‘div’).parent() 只选取div元素的父元素（就一个jQuery对象）。
• parents()方法。$(‘div’).parents() 选取div元素的父元素及所有的祖先元素。
• parentsUntil()方法。$(‘div’).parentsUntil(‘body’) 选取div元素的父元素和祖先元素，直到遇见body元素停止（但不包括body元素）。

3.3. 可见性过滤器

可见性过滤器根据元素的可见性和不可见性来筛选元素。

过滤器名	jQuery语法	说明
:hidden	$(‘p:hidden’)	选取所有不可见的p元素
:visible	$(‘p:visible’)	选取所有可见的p元素

hidden过滤器指的不可见性，包含三种情况：

• CSS样式为display:none
• CSS样式为visibility:hidden
• input表单类型为type=”hidden”

3.4. 子元素过滤器

子元素过滤器的过滤规则是通过父元素和子元素的关系来筛选元素。

过滤器名	jQuery语法	说明
:first-child	$(‘li:first-child’)	先找所有的li元素，再找到对应的父元素，最后从每个父元素中获取第一个li子元素
:last-child	$(‘li:last-child’)	先