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’) | 先找所有的li元素，再找到对应的父元素，最后从每个父元素中获取最后一个li子元素 |
| :only-child | $(‘li:only-child’) | 先找所有的li元素，再找到对应的父元素，最后从只有一个li子元素的父元素中获取li元素 |
| :nth-child(odd/even/index) | 先找所有的li元素，再找到对应的父元素，最后从每个父元素中获取指定规则的li子元素（索引从1开始） |
3.5. 其他方法
| 方法名 | jQuery语法 | 说明 |
|---|---|---|
| is() | $(‘li’).is(‘.red’) | 参数可以是选择器、DOM、jQuery对象和匿名函数，返回值为boolean |
| hasClass() | $(‘li’).hasClass(‘red’) | 参数是类名，返回值也是boolean |
| slice() | $(‘li’).slice(2,4) | 两个参数，起始位置和结束位置（可选），但不包含结束位置。返回值为jQuery对象集合 |
| end() | $(‘div’).find(‘p’).end() | 获取当前jQuery对象的上一次状态，即相当于返回$(‘div’) |
| contents() | $(‘div’).contents() | 获取某元素下面的所有节点，包括文本节点。 |
| filter() | $(‘li’).filter(‘.red’) | 参数可以是选择器和匿名函数，如果参数是选择器，则可以传递多个参数，来筛选出多个jQuery对象。 |
4. 基础DOM和CSS操作
4.1. 元素内容操作
- html() 获取或设置元素中的HTML内容
- text() 获取或设置元素中的文本内容
- val() 获取或设置表单元素中的文本内容
注意： 上述方法如果没加参数，表示获取值；如果加了参数，表示设置值。
val()方法中传递的值如果是一个数组，则可以设置表单元素的首选状态（默认选中状态）。如：$(‘input’).val([‘男’,’湖北’,’乒乓球’]);
4.2. 元素属性操作
- attr(key) 获取某个元素的指定属性的属性值。
attr(key,value) 设置某个元素的指定属性的属性值，其中value也可以是一个匿名函数。
$('div').attr('title','我是标题'); 等同于 $('div').attr('title',function(){return '我是标题';});attr({key1:value1,key2:value2 …}) 传递一个json，设置某个元素多个属性的属性值
attr(key,function(index,value){ }) 通过元素集合中的索引值（从0开始），来设置多个元素的指定属性的属性值。其实，在jQuery中有很多方法的参数都可以用匿名函数function(){ }，比如html()、text()、val()、is()、filter()等等。如果调用这些方法的jQuery对象是元素集合的话，还可以传递index参数来获取当前元素的索引值，并且可以使用第二个参数value。
attr()方法里的第二个参数是匿名函数时，该匿名函数的用法有三种情况： a. 不传递参数，直接在函数体返回一个字符串作为属性值。 b. 只传递一个参数index，它表示当前元素的索引（从0开始）。 如：$('div').attr('title',function(index){return '我是第'+(index+1)+'个div元素';}; c. 传递两个参数index、value。 index表示当前元素的索引，value表示当前元素属性的原本的值。removeAttr(key) 删除某个元素的指定属性。如：$(‘div’).removeAttr(‘title’); 这个方法的参数不可以是匿名函数。
说明： 元素的class属性值，不建议用attr()方法来设置，后面有专门的方法来操作class。
4.3. 元素样式操作
- css(name) 获取某个元素的指定样式值。
- css(name,value) 设置某个元素的内联样式中的指定样式值，第二个参数可以为匿名函数。
- css([name1,name2 …]) 获取某个元素的多个样式值。
- css({name1:value1,name2:value2 …}) 设置某个元素的内联样式中的多个样式值。
注意： 如果获取的是多个CSS样式值，返回的是一个对象数组，虽然我们可以用js原生的遍历对象的for()方法来遍历。但jQuery提供了一个专门的方法$.each()来遍历这种对象数组。
- addClass(class) 给某个元素添加class类名。
- removeClass(class) 删除某个元素的class类名。
- toggleClass(class) 来回切换指定样式和默认样式（需要配合事件才能看到效果）。
- toggleClass(class,switch) 来回切换样式的时候，设置切换频率。
- toggleClass(function(){ }) 通过匿名函数来设置切换样式的规则。
- toggleClass(function(){ },switch) 通过匿名函数设置时，同时指定切换频率。
4.4. CSS方法
- width() 获取某个元素的宽度。返回值是number。
- width(value) 设置某个元素的宽度，该参数可以是一个匿名函数。匿名函数本身可以有两个可选参数：index元素的索引、value元素本身的值。
- height() 获取某个元素的高度。返回值是number。
- height(value) 设置某个元素的高度，该参数可以是一个匿名函数。
- innerWidth() 获取元素的宽度，包含内边距padding。
- innerHeight() 获取元素的高度，包含内边距padding。
- outerWidth() 获取元素的宽度，包含内边距padding和边框border。
- outerHeight() 获取元素的高度，包含内边距padding和边框border。
- outerWidth(true) 获取元素的宽度，包含内边距padding和边框border和外边距margin。
- outerHeight(true) 获取元素的高度，包含内边距padding和边框border和外边距margin。
- offset() 获取某个元素相对于浏览器视口的位置，返回值是一个对象。offset().left，水平位置；offset().top，垂直位置。
- position() 获取某个元素相对于父元素的位置，返回值是一个对象。position().left，水平位置；position().top，垂直位置。
- scrollTop() 获取垂直滚动条距离顶部的距离。
- scrollTop(value) 设置垂直滚动条距离顶部的距离。
- scrollLeft() 获取水平滚动条距离左侧的距离。
- scrollLeft(value) 设置水平滚动条距离左侧的距离。
5. DOM节点操作
5.1. 创建节点
$(‘HTML代码’)
var box = $('<div id="box">节点</div>');
// 创建一个节点，创建的节点保存在内存中5.2. 插入节点
内部操作
append(content) 向指定元素内部的后面插入节点。参数可以是节点对象、HTML代码或匿名函数。
$('body').append('<p>代码</p>');prepend(content) 向指定元素内部的前面插入节点。
- appendTo(‘选择器’) 把指定元素移入到某个元素内部的后面。移入操作是对本身就存在的节点进行操作，不需要创建节点。
- prependTo(‘选择器’) 把指定元素移入到某个元素内部的前面。
同级操作
- after(content) 向指定元素的后面插入节点。
- before(content) 向指定元素的前面插入节点。
- insertAfter(‘选择器’) 把指定元素移到某个元素的后面。不需要创建节点。
- insertBefore(‘选择器’) 把指定元素移到某个元素的前面。
5.3. 包裹节点
- wrap(html) 给指定元素包裹一层HTML代码。参数可以是HTML代码、原生的DOM对象或匿名函数。如果指定元素是元素的集合，则每个元素都会被单独包裹。
- wrapAll(html) 给所有的元素包裹一层HTML代码。如果指定的元素是集合，则为元素集合统一包裹一层HTML代码。
- unwrap() 移除一层包裹代码。
- wrapInner(html) 给指定元素的内部包裹一层HTML代码。
5.4. 节点操作
- clone() 复制元素。
- clone(true) 复制元素，包括元素的事件一起复制。
- remove() 删除元素。
- detach() 删除元素（保留事件）。
- empty() 删除元素里面包含的内容。
- replaceWith(html) 替换元素，前者被后者替换。
- replaceAll(‘选择器’) 替换元素，前者替换后者。
6. 表单选择器和过滤器
jQuery为表单提供了专门的选择器和过滤器。
6.1. 表单选择器
- :input 获取所有的input、textarea、select、button元素，即所有的表单元素 如：$(‘:input’)
- :text 获取所有的单行文本框，即type=text。
- :password 获取所有的密码框，即type=password。
- :radio 获取所有的单选框，即type=radio。
- :checkbox 获取所有的复选框，即type=checkbox。
- :submit 获取所有的提交按钮，即type=submit。
- :reset 获取所有的重置按钮，即type=reset。
- :image 获取所有的图像按钮，即type=image。
- :button 获取所有的普通按钮，即button元素。
- :file 获取所有的文件上传按钮，即type=file。
- :hidden 获取所有的隐藏元素，即type=hidden。
注意： 对于:hidden选择器，单独使用可能会出现一些问题，可以结合其他选择器一块使用来解决。 如 $(‘form :hidden’)。
6.2. 表单过滤器
- :enabled 获取所有的可用元素，如：$(‘:enabled’)。
- :disabled 获取所有的不可用元素。
- :checked 获取所有被选中的元素，单选按钮和复选框。
- :selected 获取所有被选中的元素，下拉列表中option元素。
7. 基础事件
7.1. 绑定事件
bind(type,[data],fn)
参数说明： 第一个参数，表示事件的类型，如click、focus、blur等。若要绑定多个事件，事件名之间用空格隔开。 第二个参数，是可选参数，作为event.data的属性值，来传递额外的数据 第三个参数，表示事件触发时的处理函数。可以是普通函数名或匿名函数。 $(':submit').bind('click',function(){ alert('点击了'); }); bind()的参数，还可以是一个json。unbind() 删除元素的所有事件。
- unbind(‘click’) 删除元素的指定事件。
bind()和unbind()，可以为当前的匹配元素绑定（或解绑）事件。
live()和die()，可以为当前的或未来的匹配元素绑定（或解绑）事件。
on()和off()，可以为当前的或未来的匹配元素绑定（或解绑）事件。
7.2. 简写事件
为了更方便地为元素绑定事件，jQuery封装了常用的事件。
- click() 鼠标单击事件。
- dblclick() 鼠标双击事件。
- mousedown() 鼠标按下事件。
- mouseup() 鼠标抬起事件。
- mouseover() 鼠标移入事件，移入子元素时也会触发，可能触发多次。
- mouseout() 鼠标移出事件，移出子元素时也会触发，可能触发多次。
- mousemove() 鼠标移动事件。
- mouseenter() 鼠标穿过事件，穿过子元素时不会重复触发，只触发一次。
- mouseleave() 鼠标穿出事件，穿出子元素时不会重复触发，只触发一次。
- keydown() 键盘按下事件，通过e.keyCode可以得到键码。
- keyup() 键盘抬起事件，通过e.keyCode可以得到键码。
- keypress() 键盘按下事件，通过e.charCode可以得到字符编码。
- unload() 文档关闭事件。
- resize() 大小改变事件。
- scroll() 滚动条滚动事件。
- focus() 获取焦点事件，只在当前元素触发。
- blur() 失去焦点事件，只在当前元素触发。
- focusin() 获取焦点事件，可在子元素上触发。
- focusout() 失去焦点事件，可在子元素上触发。
- select() 文本选定事件。
- change() 值改变事件。
- submit() 表单提交事件，必须绑定在form元素上。
ready() 文档就绪事件（当 HTML 文档完成加载时）。
$(document).ready(function);load() 指定元素的加载事件。
- touch() 触摸事件。（移动端）
- touchstart() 触摸开始事件。（移动端）
- touchend() 触摸结束事件。（移动端）
- touchmove() 触摸按住移动事件。（移动端）
7.3. 复合事件
jQuery将一些功能组合，形成了复合事件。
- ready(fn) 当DOM结构加载完毕后触发。
- hover(fn1[,fn2]) 当光标移入元素时，触发fn1；移出元素时触发fn2。
- toggle(fn1,fn2[,fn2 …] 当鼠标第一次点击元素时，触发fn1；第二次点击时触发fn2 …。
toggle() 在1.8版本已经废弃，1.9及以上版本删除掉了。 如果想在1.10版本使用toggle()，可以再引入一个jquery-migrate.js文件，来向下兼容被删除的方法。还有一种方式，就是自己定义一个和该功能相同的方法即可。
toggle() 的用法有多种，具体可查看手册。
7.4. 触发事件
trigger() 触发匹配元素的指定事件（标准事件或自定义事件都行）。
// 触发 input 元素的 select 事件： $("button").click(function(){ $("input").trigger("select"); });triggerHandler() 触发第一个被匹配元素的指定事件。但不会执行浏览器的默认行为，也不会产生事件冒泡，只影响第一个匹配元素，返回的不是jQuery对象。
7.5. 自定义事件
自定义事件是指预先给被选元素绑定一个自定义的事件名称，然后通过 trigger() 或 triggerHandler() 来触发该事件，以达到方便快捷的目的。
$('#id').on('myEvent', function(event,arg1,arg2) {
alert("我的自定义事件");
});
$('#id').trigger('myEvent', param1, param2);8. 高级事件
8.1. 模拟操作
有时，我们需要模拟用户的事件操作，也就是说自动触发一个事件，而不需要用户主动去操作触发。
trigger(‘事件名’) 自动触发指定的事件。
$(':submit').trigger('click');另一种自动触发事件的写法：直接再调用一个空的同名事件方法。
$(':submit').click(function(){
alert('自动触发');
}).click(); // 这里的click()可以替换为trigger('click')8.2. 命名空间
有时，我们想对事件进行移除。但对于同元素绑定的多个相同事件名的移除会比较麻烦，这时，我们可以使用事件的命名空间来解决。
8.3. 事件委托
在jQuery中，如果给很多相同的元素都分别绑定一个事件，会大大降低代码的性能，为此，有一种事件委托的机制可以改善此问题。处理方法是，利用冒泡的特性，将子元素的事件绑定到父元素或祖先元素，这样总共就只需绑定一个事件。
注意： 虽然事件是绑定在父元素上，但触发事件的元素只能是子元素。事件是由子元素触发，但由父元素来执行处理函数。
8.4. on()、off()和one()
jQuery1.7版本以后，推出了on()方法和off()方法，来操作事件的绑定和解绑。与bind()、unbind()的区别是，新推出的方法还可以用到事件委托的机制。
on()方法 可用于绑定普通事件和事件委托机制的特殊事件。
a. 绑定普通事件 和bind()方法的用法和功能相同。 b. 绑定委托事件 用法：on('事件类型’, '子元素', 匿名函数）; // #box表示父元素的id=box， .button表示子元素的class=button $('#box').on('click','.button',function(){ // this指的是触发事件的元素，也就是子元素 $(this).clone().appendTo('#box'); });off()方法 解除绑定，可用于解除普通事件和委托事件。
// 解除委托事件的写法： $('#box').off('click','.button');one()方法 给元素绑定事件，事件触发一次后，自动解除绑定。 也就是说，one()绑定的事件，只能触发一次，且触发后事件就没有了。
// 绑定普通事件
$('.button').one('click',function(){ alert('只触发一次'); });
// 绑定委托事件
$('#box').one('click','.button',function(){ alert('只触发一次'); });9. 事件对象
事件对象就是event对象，通过处理函数的参数默认传递接收。事件对象有很多可用的属性和方法。
9.1. 事件对象的属性
- type 事件类型，如：click、focus等。
- target 事件触发时的DOM元素。
- data 事件调用时的额外数据。
- currentTarget 事件绑定的DOM元素。
$('input').click(function(e){
// 通过处理函数的参数，来获取当前的事件对象。如果不传参，则表示不获取事件对象。
alert(e.type);
});9.2. 冒泡和默认行为
冒泡
如果页面中具备父子关系的元素都绑定了相同的事件类型，当触发内层元素的事件时，会从内到外，依次触发外层元素的事件。这种现象就是冒泡。
stopPropagation() 事件对象的方法，在处理函数的内部调用该方法，就可以阻止冒泡行为。
$('input').click(function(e){
alert('阻止冒泡');
e.stopPropagation();
});默认行为
网页中的元素，在操作的时候会触发自己的默认行为，如：在页面中右击会弹出文本菜单，点击超链接会跳转，点击提交按钮会向指定的url提交数据等。
preventDefault() 事件对象的方法，用于阻止默认行为。
禁止表单提交跳转的两种方式：
阻止提交按钮的默认行为
$(':submit').click(function(e){ e.preventDefault(); });阻止表单form元素的默认行为
$('form').submit(function(e){ e.preventDefault(); });
技巧： 在处理函数中return false，既可以阻止冒泡，也可以阻止默认行为。 也就是说，return false具备上述两个方法的功能。
10. 动画效果
10.1. 显示、隐藏
显示方法为show()，隐藏方法为hide()。
不传参数时，只是硬性地显示和隐藏内容。
传递一个数值参数，以毫秒为单位来控制动画的速度，里面富含了匀速变大（变小）和透明度的变化。
$('.button').click(function(){
$('#box').show(1000); // 显示用时1秒
});传递一个预设速度字符串参数：fast、normal和slow，分别对应200毫秒、400毫秒和600毫秒。如果传递的字符串不对或空字符串，则默认为400毫秒。
$('#box').show('fast'); // 显示用时200毫秒传递两个参数，速度和匿名函数，可以实现列队动画效果。
$('#box').show(500,function(){
alert('元素显示完毕后，执行我！');
});传递两个参数，速度和递归函数，可实现多个元素的列队动画。
$('div').first().show(500,function showDiv(){
$(this).next().show(500,showDiv);
});上述列队动画，还可以使用arguments.callee，实现匿名函数的自调用，即匿名的递归函数。
$('div').first().show(500,function(){
$(this).next().show(500,arguments.callee);
});toggle()方法，传递一个速度参数，可以来回切换元素的显示和隐藏。
$('.button').click(function(){
$('#box').toggle('fast');
});10.2. 切入、切出
- slideDown() 向下切入。
- slideUp() 向上切出。
- slideToggle() 来回控制元素的切入和切出。
这些方法的参数和显示、隐藏动画，具有相同的参数。
10.3. 淡入、淡出
- fadeIn() 淡入。
- fadeOut() 淡出。
- fadeToggle() 来回控制元素的淡入和淡出。
这些方法的参数和显示、隐藏动画，具有相同的参数。
fadeTo() 设置元素的透明度。
$('#box').fadeTo('fast', 0.33); // 第一个参数表示速度，第二个参数表示透明度（0-1）
10.4. 自定义动画
jQuery提供了几种简单常用的固定动画供我们使用，但这些简单的动画无法满足我们更加复杂的动画需求。为此，jQuery提供了一个自定义动画的方法。
animate() 自定义动画
四个参数：
- 第一个参数是json，必选参数，键值对的CSS样式。如：{‘width’:’300px’,’fontSize’:’20px’} 其中，键名可以省略单引号。
- 第二个参数是速度，可选参数，如 1000。
- 第三个参数是动画运动方式，可选参数，默认值为字符串的swing（先加速，再匀速，最后减速），还有一个值为linear（线性匀速）。
- 第四个参数是回调函数，可选参数。
$('#box').animate({width:'300px',fontSize:'20px'},1000,function(){
alert('动画执行完毕后执行我');
});注意： 每个CSS属性值的变化就是一个动画效果，上述json中的两个CSS变化，属于同步动画。json和回调函数实现的动画是列队动画。
要想每次触发事件都有动画效果，可以使用自定义动画的累加或累减功能。
$('.button').click(function(){
$('#box').animate({width:'+=10px',height:'+=5px'});
});实现列队动画的方式有两种：
在动画方法的回调函数中再执行一个动画。
$('#box').animate({width:'300px'},function(){ $('#box').animate({height:'200px'}); });将动画方法顺序排列或连缀起来（必须是同一个元素才会实现列队动画，不同元素的顺序排列实现的是同步动画）。
// 顺序排列
$('#box').animate({width:'300px'});
$('#box').animate({height:'200px'});
// 连缀形式
$('#box').animate({width:'300px'})
.animate({height:'200px'});10.5. 列队动画方法
先来看一个例子：
$('#box').slideUp(400).slideDown(400).css('background','red');前面两个动画方法可以实现列队动画，但后面的css()方法不是动画方法，它会在动画的前面执行。
要想让后面的css()方法也实现列队动画，有以下几种方式：
利用动画方法的回调函数。
$('#box').slideUp(400).slideDown(400,function(){ $(this).css('background','red'); }); // 缺点是当动画繁多时，会影响代码的可读性使用queue()方法。
$('#box').slideUp(400).slideDown(400).queue(function(){ $(this).css('background','red'); }); // /这样就不会破坏slideDown()的结构，可读性较好。
queue()方法的实现原理类似于动画方法里的回调函数，它的返回值不是当前的jQuery对象。故无法在queue()之后再连缀一个动画方法。有两种方法可以解决这个问题：
方法一：给queue()的回调函数传递一个参数，这个参数是next函数，并在结尾处调用它。就可实现再连缀，继续执行队列动画。
$('#box').slideUp(400).slideDown(400).queue(function(next){ $(this).css('background','red'); next(); // 注意：next()函数是在jQuery1.4版本以后才出现的 }).fadeOut(600);方法二：使用dequeue()。
$('#box').slideUp(400).slideDown(400).queue(function(){ $(this).css('background','red'); $(this).dequeue(); }).fadeOut(600);
jQuery提供了一个清理列队动画的方法 clearQueue()，将它放入一个列队动画的回调函数里执行，就可以清除剩下的未执行的动画。
$('#box').slideUp(400).slideDown(400,function(){$(this).clearQueue();}).queue(function(){
$(this).css('background','red');
$(this).dequeue();
}).fadeOut(600);10.6. 动画相关方法
stop()方法
停止正在运行中的动画。如果不给参数，列队动画中的某个正在运行中的动画，会停止在当前状态，列队动画中的后续动画方法会继续执行。
它有两个可选的参数：
- 第一个参数表示是否清空动画队列中的后续动画方法，布尔值，默认值为false。
- 第二个参数表示是否将动画直接跳到动画结束时的末状态，布尔值，默认值为false。
$('.stop').click(function(){
$('#box').stop();
});delay()方法
延迟执行动画，有一个参数，表示毫秒数。
$('#box').delay(500).slideUp(400).delay(2000).slideDown(400);利用递归函数，可以实现动画的无线循环。
$('#box').slideToggle(800,function(){
$(this).slideToggle(800,arguments.callee);
});10.7. 动画全局属性
- $.fx.internal 动画帧的时间间隔，默认值为13，单位是毫秒。数字越小，动画越流畅。
- $.fx.off 是否关闭动画效果，即是否关闭动画的运动过程。默认值为false，表示不关闭。
11. 工具函数
工具函数是指直接依附于jQuery对象，针对jQuery对象本身定义的方法，即全局性的函数。
11.1. 字符串操作
在jQuery中，处理字符串的工具函数只有一个。
$.trim() 去掉字符串两端的空格。
var str=' jQuery ';
str=$.trim(str);11.2. 数组和对象操作
$.each() 遍历数组或对象
遍历数组：
var arr=['zhangsan','lisi','wangwu'];
$.each(arr,function(index,value){
$('#box').html($('#box').html()+(index+1)+'.'+value+'<br/>');
});遍历对象：
$.each($.ajax(),function(name,fn){
$('#box').html($('#box').html()+name+'<br/>');
});$.grep() 对数组元素进行筛选，返回新的数组。
var arr=[6,4,9,8,3];
var newArr=$.grep(arr,function(element,index){ // 第一个参数表示数组中的元素，第二个参数表示数组的下标
return index<4 && element>5; // 筛选条件
});
alert(newArr);$.map() 修改数组中元素的值，返回新的数组。
var arr=[6,4,9,8,3];
var newArr=$.map(arr,function(element,index){ // 第一个参数表示数组中的元素，第二个参数表示数组的下标
if(index<3){
return element+1;
}
});
alert(newArr);$.inArray() 查找数组中，某个元素的下标。返回值为数值。
var arr=[6,4,9,8,3];
var index=$.inArray(8,arr);
alert(index);$.merge() 合并两个数组，返回值为新的数组。
var arr=[6,4,9,8,3];
var arr2=[100,200];
alert($.merge(arr,arr2));11.3. 判断操作
在jQuery中，提供了一些对数据的类型或状态进行判断的工具函数。
$.isArray() 判断一个数据的类型是否为数组，返回值为布尔值。
var arr=[6,4,9,8,3];
alert($.isArray(arr));$.isFunction() 判断是否为函数，返回值为布尔值。
$.isEmptyObject() 判断是否为空对象，返回值为布尔值。
$.isPlainObject() 判断是否为纯粹的对象，返回值为布尔值（由{ } 或 new Object()创建的对象才是纯粹的对象）。
$.contains() 判断一个DOM节点中是否包含另外一个DOM节点，返回值为布尔值 （两个参数，必须是原生的DOM对象）。
alert($.contains($('#box').get(0),$('#pox').get(0)));$.type() 判断数据类型，和js原生的typeof有点不同。
var arr=[1,2,3];
alert(typeof(arr)); // object
alert(typeof arr); // object
alert($.type(arr)); // array$.isNumeric() 判断是否为数值，返回值为布尔值。
9870
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
