一、文章概述：
众所周知，jQuery 是一个 JavaScript 库，包含多个可重用的函数，用来辅助我们简化javascript开发，它极大地简化了 JavaScript 编程。但是需要注意的一点是：jQuery能做的javascipt都能做到，而javascript能做的事情，jQuery不一定能做到，也就是说jQuery的操作是包含在JavaScript中的，只不过很多方法都封装在库中，使得我们在操作jQuery时十分方便。
而jQuery的操作归结起来其实就是两点：一个是通过“某个标识或者规则”获取我们需要的标签，另外一个就是对获取的标签进行各种操作。本文就以这两部分为中心详细为大家介绍下jQuery的选择器、筛选器、效果、属性操作、文档操作、CSS操作、绑定事件以及jQuery的扩展等，帮助大家以点带面的理解下jQuery的用法。
二、jQuery获取标签：
jQuery获取标签的方法其实就是我们大家刚刚开始学jQuery都要接触与牢记的选择器与筛选器。
2.1 jQuery常用的选择器
jQuery常用的选择器包括以下几个：
（1）id选择器——利用#符号，后面跟着某个标签的id值。因为在一个html文件中id是唯一的，因此id选择器选取到的对象也是唯一的：
$('#id')
（2）类选择器——利用.符号，后面跟着某个标签的class值。选取到的是拥有该class值的标签：
$('.class')
（3）标签选择器——它选择的是所有标签。比如想要获取html文件中所有的div标签可以这么写：
$('div')
（4）组合选择器——可以同时选取不同种类的标签，中间用逗号隔开即可：
$('#id,.class,div')
（5）层级选择器——就是选取父级标签下的子标签的选择器。比如要获取id为i的div下面的所有a标签可以这样写：
$('#i a ')
当然，上面的例子是将div下面的子子孙孙的a标签都找了，如果只想找它儿子类的a标签可以这样写：
$('#i >a')
（6）属性选择器——利用标签的属性获取，这个很常用。比如说我们想获取文档中所有type='text'的input标签：
常用在input标签中！
$('input[type="text"]')
2.2 jQuery常用的筛选器
jQuery的筛选器也称过滤器，常用的筛选器包括以下几个：
（1）基本筛选器——不可以进行链式操作
基本筛选器包括：[:first]、[:last]、[:eq(index)]（index为索引）：
//获取id为i1的div下面的第一个a标签：
$('#i1' a:first)
//获取获取id为i1的div下面的最后一个a标签：
$('#i1' a:last)
//获取id为i1的div下面的第三个a标签，下标从0开始：
$('#i1 a:eq(2)')
jQUery基本的筛选器：————不支持链式操作
:first // 第一个 :last // 最后一个 :eq(index)// 索引等于index的那个元素 :even // 匹配所有索引值为偶数的元素，从 0 开始计数 :odd // 匹配所有索引值为奇数的元素，从 0 开始计数 :gt(index)// 匹配所有大于给定索引值的元素 :lt(index)// 匹配所有小于给定索引值的元素 :not(元素选择器)// 移除所有满足not条件的标签 :has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)——注意最终找的是父级标签
$("div:has(h1)")// 找到所有后代中有h1标签的div标签，意思是首先找到所有div标签，把这些div标签的后代中有h1的div标签筛选出来 $("div:has(.c1)")// 找到所有后代中有c1样式类（类属性class='c1'）的div标签 $("li:not(.c1)")// 找到所有不包含c1样式类的li标签 $("li:not(:has(a))")// 找到所有后代中不含a标签的li标签
2.2.2表单筛选器（多用于找form表单里面出现的input标签，当然通过属性选择器找肯定也是没问题的，这样就是写着简单一些）
:text :password :file :radio :checkbox :submit :reset :button
例子：
$(":checkbox") // 找到所有的checkbox
表单对象属性：
:enabled :disabled :checked :selected
其他例子：
1. 找到可用的input标签
<form>
<input name="email" disabled="disabled" />
<input name="id" />
</form>
$("input:enabled") // 找到可用的input标签
2.找到被选中的option：
<select id="s1">
<option value="beijing">北京市</option>
<option value="shanghai">上海市</option>
<option selected value="guangzhou">广州市</option>
<option value="shenzhen">深圳市</option>
</select>
$(":selected") // 找到所有被选中的option
（2）jQuery的筛选器方法——可以做链式操作—— 筛选器方法（将来用的很多）
一般情况下，是库的文件，该库中都会抛出来构造函数或者对象 ，如果是构造函数，那么创建对象，如果是对象直接调用属性和方法。因此jQuery提供了很多的内置的筛选方法，具体入戏下图所示：
<1>下一个元素
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2") #直到找到id为i2的标签就结束查找，不包含它
<2>上一个元素
$("#id").prev()
$("#id").prevAll() #注意顺序是从下往上的
$("#id").prevUntil("#i2") #注意顺序是从上往下的
<3>父亲元素
$("#id").parent()
$("#id").parents() // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。
<4>儿子跟兄弟元素
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们，不包含自己，.siblings('#id')，可以在添加选择器进行进一步筛选
<5>查找——find
搜索所有与指定表达式匹配的元素。这个函数是找出正父级元素再处理的元素的后代元素的好方法。——支持链式操作！
$("div").find("p")
<6>筛选——filter
筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。——支持链式操作！
$("div").filter(".c1") // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div；
// 注意和find不同，find是找div标签的子子孙孙中找到符合条件的标签
例子：
find方法找class为d1的div标签下面所有的p标签：
但是，注意！filter不是找儿子元素的，所以这样写找不出任何元素：
fiiter是在上一次查找的基础上进行“二次筛选”：
<7>补充——（和前面使用冒号的一样 :first等，只不过冒号的那个是写在选择器里面的）——支持链式操作！
.first() // 获取匹配的第一个元素
.last() // 获取匹配的最后一个元素
.not() // 从匹配元素的集合中删除与指定表达式匹配的元素
.has() // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq() // 索引值等于指定值的元素
三、jQuery获取标签后的操作：
获取标签本身并没有多大的意义，在利用jQuery的选择器及筛选方法选取到标签后，我们还需要用jQuery的各种“操作”来让我们的html页面“动起来”！
下面就为大家详细介绍jQuery的各种操作与方法，每种方法尽量为大家准备些实例，帮助大家深刻的理解相关知识点。
3.1 淡入淡出效果在最后的补充里面~
3.2 jQuery的属性操作
jquery对象有它自己的属性和方法，而jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作。
具体说明如下：
3.2.1 html属性操作——是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
————下面有补充
（1）attr()——设置属性值或者 返回被选元素的属性值
//获取值：attr()设置一个属性值的时候 只是获取值
var id = $('div').attr('id')
console.log(id)
var cla = $('div').attr('class')
console.log(cla)
//设置值
//1.设置一个值 设置div的class为box
$('div').attr('class','box')
//2.设置多个值，参数为对象，键值对存储
$('div').attr({name:'hahaha',class:'happy'})
（2）removeAttr()——从每一个匹配的元素中删除一个属性
3.2.2 DOM属性操作——对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
————下面有补充
（1）prop()
prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。另外，prop方法基本上用于checkbox、radio与select标签中，用于获取其选取及未选取的状态：
//不加参数表示获取值
$('#c1').prop();
//加参数代表设置值——仅true或者false
$('#c1').prop('checked',true);
（2）removeProp()——用来删除由.prop()方法设置的属性集
3.2 jQuery的类操作
3.2.3 类样式操作——是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
（1）addClass（添加多个类名）——为每个匹配的元素添加指定的类名
$('div').addClass("box"):添加一个类名
$('div').addClass("box box2"):添加多个类名
（2）removeClass——从所有匹配的元素中删除全部或者指定的类。
$('div').removeClass('box')移除指定的类
$('div').removeClass()移除全部的类
var tag = false;
$('span').click(function(){
if(tag){
$('span').removeClass('active')
tag=false;
}else{
$('span').addClass('active')
tag=true;
}
})
（3）toggleClass——如果存在（不存在）就删除（添加）一个类。
语法：toggleClass('box')
$('span').click(function(){
//动态的切换class类名为active
$(this).toggleClass('active')
})
3.2 jQuery的值操作
——下面有补充
3.2.4 值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()
（1）html()——html() 什么也不带是获取选中标签元素中所有的内容；html()的括号里面有值代表设置值：设置该元素的所有内容 会替换掉 标签中原来的内容。
$('ul').html('<a href="#">百度一下</a>')
//可以使用函数来设置所有匹配元素的内容
$('ul').html(function(){
return '哈哈哈'
})
（2）text()——text() 什么也不带是获取匹配元素包含的文本内容；text()的括号里面有值代表设置该所有的文本内容，注意：值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中。
（3）val()——用法与上面两个一样，只不过val()基本是用在input标签里的。
3.2.5 jQuery操作input标签的value值的案例。
由于form表单及input对我们后台开发者来说十分重要，因此这里总结下这些常用的实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Wanghw</title> <style> /*p{*/ /*border: 1px blue solid;*/ /*}*/ </style> </head> <body> <form action=""> <p> <input type='text' name="input_text" id="" placeholder="请输入内容" > <input type="button" value="点击"> </p> <p> 性别：男<input type="radio" name="sex" value="1" checked="checked" /> 女<input type="radio" name="sex" value="2" /> </p> <p> 爱好：足球<input type="checkbox" name="favor" checked="checked" value="a"/> 篮球 <input type="checkbox" name="favor" checked="checked" value="b" /> 网球 <input type="checkbox" value="c" name="favor"/> </p> <p> <input type="reset" value="reset"/> </p> <p> 上传文件：<input type="file" > </p> <p> <select id="city" name="select_whw" id="select_w"> <option value="1">北京</option> <option value="2" selected="selected">上海</option> <option value="3">天津</option> </select> </p> <p> <!--如果label的for与input的id一样——点击label光标会直接到达input里面去--> <label for="user_name">用户名</label> <input id="user_name" type="text" value=""> </p> <!--<p>--> <!--输入框 <textarea name="text_area" cols="30" rows="10"></textarea>--> <!--</p>--> </form> <script src="jquery-1.12.4.js"></script> <script> $(function () { //1.获取单选框被选中的value值 var a = $('input[type=radio]:checked').val(); console.log(a); //2.复选框被选中的value 仅仅获取到第一个被选中的值 var b = $('input[type=checkbox]:checked').val(); console.log(b); //3.下拉列表被选中的值 var c = $('#city option:selected').text(); console.log(c); //4.设置value 设置选中的项目 默认选中第一个 单选 $('input[type=radio]').val('222'); console.log($('input[type=radio]').val()); //5.设置复选框——效果是:b跟c被选中了！ $('input[type=checkbox]').val(['b','c']); //6.设置下拉列表 这里必须用select——效果是:出现1对应的text $('select').val(['1']) }) </script> </body> </html>
3.3 jQuery的文档操作
jQuery的文档操作分为插入操作、复制操作、替换操作、删除操作。
3.3.1 插入操作
（1）父元素.append(子元素) 追加某元素 父元素中添加新的元素
注意这种方法中：子元素常用字符串~可以识别标签~方便进行字符串的拼接添加动态数据！
var obj = document.createElement('li');
obj.innerHTML = '哈哈';
$('ul').append(obj);
（2）子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素
$('<a href="#">HelloWorld</a>').appendTo($('ul'));
（3）prepend() 前置添加， 添加到父元素的第一个位置
$('ul').prepend('<li>Naruto</li>');
（4）prependTo 后置添加，第一个元素添加到父元素中
$('<a href="#">nana</a>').prependTo('ul')
（5）兄弟1.after(兄弟2) 在匹配的元素之后插入内容 与 兄弟2.insertAfter(兄弟1)
$('ul').after('<h4>我是一个h3标题</h4>')
$('<h5>我是一个h2标题</h5>').insertAfter('ul')
（6）兄弟1.before(兄弟2) 在匹配的元素之前插入内容 与 兄弟2.insertBefor(兄弟1)
$('ul').before('<h3>我是一个h3标题</h3>')
$('<h2>我是一个h2标题</h2>').insertBefore('ul')
3.3.2 复制操作
（1）clone() 克隆匹配的DOM元素并且选中这些克隆的副本。
$('button').click(function() {
// 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$(this).clone(true).insertAfter(this);
})
3.3.3 替换操作
（1）replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。
//将所有的h5标题替换为a标签 $('h5').replaceWith('<a href="#">hello world</a>') //将所有h5标题标签替换成id为app的dom元素 $('h5').replaceWith($('#app'));
（2）replaceAll()：用匹配的元素替换掉所有 selector匹配到的元素。
$('<br/><hr/><button>按钮</button>').replaceAll('h4')
3.3.4 删除操作
（1）remove() ：删除节点后，事件也会删除（简言之，删除了整个标签）
$('ul').remove();
（2）detach()： 删除节点后，事件会保留
var $btn = $('button').detach()
//此时按钮能追加到ul中
$('ul').append($btn)
（3）empty()：清空元素中的所有后代节点 ——文本内容与标签内容都删掉~只保留标签本身
//清空掉ul中的子元素，保留ul
$('ul').empty()
A：下面是以上知识点的演示实例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn">复制</button> <br> <button id="btn1">替换</button> <br> <span id="sp">YES！</span> <ul></ul> <script src="jquery-1.12.4.js"></script> <script> //append相关方法###### //append相关方法一 var obj = document.createElement('li'); obj.innerHTML = '哈哈'; $('ul').append(obj); //append相关方法二 $('ul').append('<li>Naruto</li>'); //append相关方法三 直接插入jQuery对象 //如果直接的内容是当前页面中的某些元素，那么这些元素将从原位置上消失。简言之，就是一个移动操作 $('ul').append($('#sp')); //append相关方法四 appendTo方法——子元素.appendTo(父元素) 追加到某元素 子元素添加到父元素 $('<a href="#">HelloWorld</a>').appendTo($('ul')); //prepend方法——与append方法一样，###### //只不过append是向后插入元素，prepend是在前面插入 //after方法 在匹配的元素之后插入内容 是兄弟关系###### $('ul').after('obj'); //before方法 在匹配的元素之后插入内容 是兄弟关系###### $('ul').before('obj'); //clone方法 复制###### // 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。 // 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) // $('#btn').click(function () { //如果这里不加true，复制出来的按钮没有“复制"的能力！ var o = $(this).clone(true); $(this).after(o); }); //替换操作 replaceWith ###### //方式一： $('#btn1').replaceWith('<a>哈哈哈哈哈哈</a>'); //方式二:注意 要是用这种方法 #btn的元素会消失 //$('#btn1').replaceWith($('#btn')); //删除方法： //一、remove() 删除节点后，事件也会删除（简言之，删除了整个标签） //$('ul').remove(); //二、detach() 删除节点后，事件会保留 //var $btn = $('button').detach() //此时按钮能追加到ul中 //$('ul').append($btn) //三、empty(): 清空元素中的所有后代节点 //清空掉ul中的子元素，保留ul //$('ul').empty() </script> </body> </html>
B：下面是clone()方法的实例——挺重要：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text"/> <input id="a1" type="button" value="添加"/> <input id="a2" type="button" value="复制"/> <ul id="u1"> <li>1</li> <li>2</li> <li>3</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { //获取到input的值 var v = $('#t1').val(); temp = '<li>' + v + '</li>'; $('#u1').append(temp); //输入完后清空输入框 $('#t1').val(''); }); //其他方法详见笔记！！！！跟下面的方法类似 $('#a2').click(function () { //获取索引值 var index = $('#t1').val(); var v = $('ul li').eq(index).clone(); $('ul').append(v); }) </script> </body> </html>
3.3 jQuery的CSS操作
3.3.1 样式处理
css样式处理的语法是：
$('.c1').class('样式名称','样式值')
另外css操作还有一些关于位置的操作，这里就不一一阐述了，因为这方面的我们用的相对少一些。这里给出一个CSS操作的案例：
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ cursor: pointer; } .item{ border: 1px red solid; height:555px; width:555px; position: fixed; left:33%; top:10%; } .content{ width:36px; //background-color: yellowgreen; /*position必须是relative*/ position: relative; top:123px; left:123px; } </style> </head> <body> <div class="item"> <div class="content"> <span>赞</span> </div> </div> <script src="jquery-1.12.4.js"></script> <script> $('.content').click(function () { var span = document.createElement('span'); var top = 0; var fontSize = 15; var right = 0; var opacity = 1; $(span).text('+1'); $(span).css('color','green'); $(span).css('position','absolute'); $(span).css('top',top + 'px'); $(span).css('right',right + 'px'); $(span).css('fontSize',fontSize + 'px'); $(span).css('opacity',opacity); var f = setInterval(function () { top -= 5; fontSize += 5; right -= 5; opacity -= 0.1; $(span).css('top',top + 'px'); $(span).css('right',right + 'px'); $(span).css('fontSize',fontSize + 'px'); $(span).css('opacity',opacity); if(opacity < 0){ //清除定时器 clearInterval(f); //清除新建的span标签 $(span).remove(); } },50); $(this).append(span); }) </script> </body> </html>
四、jQuery的绑定事件：
绑定事件的两种方式
（1）
标签对象.click(function(){})
（2）
标签对象.on('click',function(){})
input事件只能用on绑定
常用的事件如下：
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //内容发生变化，input，select等
keyup(function(){...})
mouseover与mouseenter //mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，
//mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
jQuery的绑定事件分为以下几个
4.1 直接操作——用的很多
$('.c1').click()
$('.c1').其他方法
4.2 bind/unbind方法
$('ul li').bind('click',function () {
......
})
$('ul li').unbind('click',function () {
......
})
4.3 on/off方法
注意“input值变化事件”只能用on方法绑定！
$('ul li').on('click',function () {
......
})
$('ul li').off('click',function () {
......
})
具体的例子就是百度的搜索栏：
这叫做input事件，看代码：只要input框里面的值发生变化就触发某个事件，注意input事件不能直接绑定，必须用on绑定才行，
$('#d1').input(function{})是不对的，$('#d1').on('input',function(){})才行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>实时监听input输入值变化</title> </head> <body> <input type="text" id="i1"> <script src="jquery-3.2.1.min.js"></script> <script> /* * oninput是HTML5的标准事件 * 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化， * 在内容修改后立即被触发，不像onchange事件需要失去焦点才触发 * oninput事件在IE9以下版本不支持，需要使用IE特有的onpropertychange事件替代 * 使用jQuery库的话直接使用on同时绑定这两个事件即可。 * */ $("#i1").on("input propertychange", function () { //可以支持IE9以下的版本 console.log($(this).val()); }) </script> </body> </html>
上面代码的效果
4.4 委托——delegate方法
委托方法需要说明一下：若之前默认的标签有事件，而基于默认的标签添加新的标签后不会有之前的 事件的。用委托的方法可以让新增的标签拥有与源标签一样的事件，效果跟clone(true)类似：
如上图：原有的标签1与2有点击事件，利用委托我们可以使新生成的标签也拥有与之前标签一样的事件。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input id="t1" type="text" /> <input id="a1" type="button" value="添加" /> <ul id="u1"> <li>1</li> <li>2</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('#a1').click(function () { var v = $('#t1').val(); var temp = "<li>" + v + "</li>"; $('#u1').append(temp); }); // $('ul li').click(function () { // var v = $(this).text(); // alert(v); // }) //bind不行 // $('ul li').bind('click',function () { // var v = $(this).text(); // alert(v); // }) //默认on不行 // $('ul li').on('click', function () { // var v = $(this).text(); // alert(v); // }) $('ul').delegate('li','click',function () { var v = $(this).text(); alert(v); }) </script> </body> </html>
4.5、keydown和keyup事件
如果想获取值的话（就是想知道用户按下的是哪个键），要在函数加上event参数，然后，event.KeyCode表示的数字就是用户按下的哪个键——shift键的数字时16
$(window).keyup(function(event){
event.keyCode; //e为事件对象,keyCode是获取用户按下了哪个键,数字表示
})
例子：键盘按键按下和抬起的事件，还有一些其他的key事件组合示例+按住shift实现批量操作：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta http-equiv="content-Type" charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>Egon</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Alex</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Yuan</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>EvaJ</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Gold</td> <td> <select> <option value="1">上线</option> <option value="2">下线</option> <option value="3">停职</option> </select> </td> </tr> </tbody> </table> <script src="jquery-3.3.1.js"></script> <script> //按下shift就进入批量操作的模式 var flag = false; // shift按键被按下的时候，键盘上每个按键都对应有一个keyCode值 $(window).keydown(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = true; } }); // shift按键被抬起的时候 $(window).keyup(function (event) { console.log(event.keyCode); if (event.keyCode === 16){ flag = false; } }); // select标签的值发生变化的时候 $("select").change(function (event) { // 如果shift按键被按下，就进入批量编辑模式 // shift按键对应的code是16 // 判断当前select这一行是否被选中 console.log($(this).parent().siblings().first().find(":checkbox")); var isChecked = $(this).parent().siblings().first().find(":checkbox").prop("checked"); console.log(isChecked); if (flag && isChecked) { // 进入批量编辑模式 // 1. 取到当前select选中的值 var value = $(this).val();//别忘了this是个dom对象，要用$(this)包裹起来变成jQuery对象 // 2. 给其他被选中行的select设置成和我一样的值 // 2.1 找到那些被选中行的select //被选中的行就是$('input:checked') var $select = $("input:checked").parent().parent().find("select") //一般jQuery中的变量名，我们在变量名前面加一个$符号区分一下 //var $select = $('tr:has(input:checked)').find('select') 这个也可以，选择某些标签的方法有很多昂 // 2.2 给选中的select赋值 $select.val(value); } }); </script> </body> </html>
其实就是键盘的按键和我们的事件绑定到一起了。先看一下keyCode：键盘上每个按键都对应有一个keyCode：
4.5、hower事件
hover事件（不是原生dom的那个hover，并且js里面没有onhover事件，这个是jQuery的hover事件，是jQuery封装的，原生js里面没有）
hover事件想要实现鼠标移入与移出动作的效果，需要写两个函数！
对象.hover(
//1.鼠标进入
function(){...},
//2.鼠标移出
function(){...}
)
hover事件的案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>hover示例</title> <style> * { margin: 0; padding: 0; } .nav { height: 40px; width: 100%; background-color: #3d3d3d; position: fixed; top: 0; } .nav ul { list-style-type: none; line-height: 40px; } .nav li { float: left; padding: 0 10px; color: #999999; position: relative; } .nav li:hover { background-color: #0f0f0f; color: white; } .clearfix:after { content: ""; display: block; clear: both; } .son { position: absolute; top: 40px; right: 0; height: 50px; width: 100px; background-color: #00a9ff; display: none; <!--最开始是默认不显示的--> } .hover .son { <!--这个选择器生效的条件是这两个class属性的值都有才生效，如果我们移除了class='hover'，这个.hover就没有了，那么这个选择器就不生效了，那这个样式也就不生效了--> display: block; } </style> </head> <body> <div class="nav"> <ul class="clearfix"> <li>登录</li> <li>注册</li> <li>购物车 <p class="son hide"> 空空如也... </p> </li> </ul> </div> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script> $(".nav li").hover( //hover事件分为两步，事件中有两个匿名函数 //第一步：鼠标移动上去 function () { $(this).addClass("hover"); }, //第二步：鼠标移走 function () { $(this).removeClass("hover"); } ); </script> </body> </html>
效果：
五、jQuery的扩展
关于jQuery的扩展有两种调用方式：$.extend方法与$.fn.extend方法
5.1 $.extend方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">123</div> <script src="jquery-1.12.4.js"></script> <script> //方法一：调用方式为$.wanghw(); $.extend({ 'wanghw':function () { return 'whw' } });//它可以写在js文件里，前面引用就行 var v = $.wanghw(); alert(v); </script> </body> </html>
5.2 $.fn.extend方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">123</div> <script src="jquery-1.12.4.js"></script> <script> $.fn.extend({ 'whw':function () { return 123 } }); //它可以写在js文件里，前面引用就行 var v = $('#i1').whw(); alert(v); </script> </body> </html>
这里需要注意的一点是：如果我们引用的某几个插件之间存在全局变量重名的问题，可以利用自执行函数解决：
(function(arg){
var statu1 = 1;
//封装变量
arg.extend({
'whw':function(){
return 123;
}
})
})(jQuery);
注意：
（1）arg为形参，jQuery为实参
（2）里面的jQuery等价于$
=====================================其他方法补充====================================
1、尺寸
height() //盒子模型content的大小，就是我们设置的标签的高度和宽度
width()
innerHeight() //内容content高度 + 两个padding的高度
innerWidth()
outerHeight() //内容高度 + 两个padding的高度 + 两个border的高度，不包括margin的高度，因为margin不是标签的，是标签和标签之间的距离
outerWidth()
====> 
2、样式操作
（1）样式类
添加:对象.addClass('c1')
删除:对象.removeClass('c1')
判断:对象.hasClass('c1')
切换:对象.toggleClass('c1')
（2）直接样式操作
对象.css(属性名,属性值)
对象.css({'属性名':'属性值',...})
3、获取文本后的值操作
//1、
//radio标签设置值~利用value的具体的值来~注意不是文本的内容
//注意！是用数组设置的！
$('input[name=sex]').val(['1'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$('input[name=sex]').val(['2'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$(':radio').val(['1'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
$(':radio').val(['2'])
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
//2、
//设置checkbox的值，利用数组设置多个
$(':checkbox').val(['1','2'])
jQuery.fn.init(4) [input, input, input, input, prevObject: jQuery.fn.init(1)]
//注意取值的时候，这样只能取到第一个的value，所以需要循环的一个一个取
$(':checkbox').val()
"1"
//3、
//注意：这样取的话，如果页面中还有select标签，也会把select标签选取的内容取出来！
$(':checked')
jQuery.fn.init(4) [input, input, input, option, prevObject: jQuery.fn.init(1)]0: input1: input2: input3: optionlength: 4prevObject: jQuery.fn.init [document]__proto__: Object(0)
//所以要指定：checked标签的被选取的标签
$(':checkbox:checked')
jQuery.fn.init(2) [input, input, prevObject: jQuery.fn.init(1)]
（1）多选框取值的问题——需要循环一个一个取值
循环的方法获取值：
（2）注意，当我们从多个对象中取一个对象来操作的时候的问题：
4、属性操作——attr与prop
attr：
//设置属性
$('#d1').attr('age','18')
jQuery.fn.init [div#d1]
//获取属性值
$('#d1').attr('age')
"18"
//设置多个属性
$('#d1').attr({'k1':'v1','k2':'v2'})
jQuery.fn.init [div#d1]
//移除属性
$('#d1').removeAttr('age')
jQuery.fn.init [div#d1]
prop：——经典例子是“全选、反选、取消”
$(':checkbox') jQuery.fn.init(3) [input, input, input, prevObject: jQuery.fn.init(1)] $(':checkbox').eq(0).attr('checked','checked'); jQuery.fn.init [input, prevObject: jQuery.fn.init(3)] $(':checkbox').eq(0).attr('checked'); "checked" $(':checkbox').eq(1).attr('checked'); undefined $(':checkbox').eq(1).prop('checked'); false $(':checkbox').eq(0).prop('checked'); true //注意利用prop设置的时候，后面是加true或者false $(':checkbox').eq(1).prop('checked',true); jQuery.fn.init [input, prevObject: jQuery.fn.init(3)] $(':checkbox').eq(1).prop('checked',false); jQuery.fn.init [input, prevObject: jQuery.fn.init(3)]
5、阻止事件冒泡
冒泡的意思就是因为html可以嵌套，如果你给儿子标签绑定了点事件或者没有绑定点击事件，父级标签绑定了点击事件，那么你一点击子标签，不管子标签有没有绑定事件，都会触发父级标签的点击事件，如果有，会先触发子标签的点击事件，然后触发父级标签的点击事件，不管子标签有没有点击事件，都会一级一级的还往上找点击事件。
所以我们要阻止事件冒泡。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡</title>
</head>
<body>
<div>
<p>
<span>点我</span>
</p>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
//阻止事件冒泡
$("span").click(function (e) { //这个参数e(只是个形参，写evt或者event名字的也很多)表示当前事件本身，这个事件也是一个对象
alert("span");
//return false；这个也可以阻止
e.stopPropagation(); //用事件对象的这个方法就能阻止冒泡（Propagation：传递的意思）
});
$("p").click(function () {
alert("p");
});
$("div").click(function () {
alert("div");
})
</script>
</body>
</html>
6、事件委托
事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。
on的方法用的最多！
注意里面的$(this)还是“绑定事件的后代标签”！
6-1、一个实例进行说明（on方法+delegate方法）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1"><button class="add">添加</button></div>
<script src="jquery-3.4.1.js"></script>
<script>
// $('.add').click(function () {
// var btnStr = '<button class="add">添加</button>';
// $('#d1').append(btnStr);
// })
//事件委托写法 —— 跟clone写法不一样！这样更灵活！函数里面可以实现动态的效果！
//必须用on
//第一个是“父级标签”
//第二个是选择器~选择需要绑定事件的标签
//第三个是具体的实现函数
$('#d1').on('click','.add',function () {
//注意这里的this指的还是“点击的后代标签”
console.log($(this));
var btnStr = '<button class="add">添加</button>';
$('#d1').append(btnStr);
});
//也可以用delegate的方法写！
// $('#d1').delegate('.add','click',function(){
// console.log($(this));
// var btnStr = '<button class="add">添加</button>';
// $('#d1').append(btnStr);
// })
</script>
</body>
</html>
6-2、综合性的例子：表格操作+事件委托（on方法+delegate方法）
（1）效果如下：
（2）代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{margin: 0;padding: 0} .shadow{ background-color: grey; opacity:0.5; position: fixed; top:0; left:0; right: 0; bottom: 0; z-index:66; } .bord{ position: fixed; left:12%; top:10%; z-index: 88; width:400px; height:300px; background-color:white; } .hide{display: none} .error{ color:red; font-size: 12px; } </style> </head> <body> <button id="add">添加</button> <table border="1px solid orange"> <thead> <tr> <th>选择</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td> <input type="checkbox"> </td> <td>wanghw</td> <td>Coding</td> <td><button class="del">删除</button></td> </tr> <tr> <td> <input type="checkbox"> </td> <td>Naruto</td> <td>螺旋丸</td> <td><button class="del">删除</button></td> </tr> <tr> <td> <input type="checkbox"> </td> <td>Sasuke</td> <td>千鸟流</td> <td><button class="del">删除</button></td> </tr> </tbody> </table> <div class="shadow hide"></div> <div class="bord hide"> <div><input type="text" id="name" autocomplete="off"><span class="error"></span></div> <div><input type="text" id="hobby" autocomplete="off"><span class="error"></span></div> <div> <button id="cancel">取消</button> <button id="confirm">确定</button> </div> </div> <script src="jquery-3.4.1.js"></script> <script> //新增 $('#add').click(function(){ $('.shadow,.bord').removeClass('hide'); }); //取消 $('#cancel').click(function () { $('.shadow,.bord').addClass('hide'); //再把input的内容删除 $('#name,#hobby').val(''); }); //确定 $('#confirm').click(function(){ //获取用户的输入并校验用户输入的内容不能为空 var name = $('#name').val(); var hobby = $('#hobby').val(); if(name.trim().length===0){ $('#name').next().text('用户名不能为空'); return; }else{ $('#name').next().text(''); } if(hobby.trim().length===0){ $('#hobby').next().text('爱好不能为空'); return; }else{ $('#hobby').next().text(''); } //组合一行表格并添加到table中 var addStr = '<tr><td><input type="checkbox"></td><td>'+name+'</td><td>'+hobby+'</td><td><button class="del">删除</button></td></tr>' //添加 $('tbody').append(addStr); //再把input的内容删除 $('#name,#hobby').val(''); //关闭模态对话框 $('.shadow,.bord').addClass('hide'); }); //删除 //注意这种方法~新增的标签没有删除的功能！ // $('.del').click(function(){ // //$(this)表示的是当前的删除按钮 // $(this).parent().parent().remove(); // }) //需要用事件委托 //新增的删除按钮没有被绑定上点击事件 //因为绑定点击事件的动作在页面加载完成后就已经过去了 //给新增的删除按钮也具备点击事件~需要用到时间委托 //因为tr标签也是新加的，所以需要给tbody加事件委托 //现在最常用on方法！ $('tbody').on('click','.del',function(){ //注意这里的$(this)依然是class为del的button！ $(this).parent().parent().remove(); }); //也可以用delegate做委托 —— jquery的delegate底层其实也是利用了on方法 //现在常用on的方法 // $('tbody').delegate('.del','click',function(){ // $(this).parent().parent().remove(); // }) </script> </body> </html>
7、页面载入
当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
还记得我们说将js代码写到head标签和写道body标签下面的作用是不同的吗，写在head标签里面的话，如果你写了操作某个标签的内容的话，那个标签还没加载出来，先加载了你的js代码，就找不到这个标签，所以不会生效，所以写在body标签最下面是一种解决办法，还有一种办法就是window.οnlοad=function(){js的代码}，等页面上所有的元素都加载完，在执行这里面的js代码，还记得吗？，但是这个window.onload有个缺点，这个缺点就是这个操作时给window.onload赋值，如果你自己写了两个js文件，每个js文件中都有一个window.onload的话，那么后引入的文件会把前面引入的文件的window.onload里面的js代码全部覆盖掉，那么第一个文件的js代码就失去了效果，还有一个问题就是，window.onload会等到页面上的文档、图片、视频等所有资源都加载完才执行里面的js代码，导致有些效果的加载比较慢，所以我们使用下面的写法，不存在覆盖问题，而且只要文档加载完就触发，不需要等着一些图片啊视频啊什么的，加载js效果的速度快。
两种写法：
$(document).ready(function(){
// 在这里写你的JS代码...
})
简写
$(function(){
// 你在这里写你的代码
})
文档加载完绑定事件，并且阻止默认事件发生：登录校验示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>登录注册示例</title> <style> .error { color: red; } </style> </head> <body> <form id="myForm"> <label for="name">姓名</label> <input type="text" id="name"> <span class="error"></span> <label for="passwd">密码</label> <input type="password" id="passwd"> <span class="error"></span> <input type="submit" id="modal-submit" value="登录"> </form> <script src="jquery-3.2.1.min.js"></script> <script src="s7validate.js"></script> <script> function myValidation() { // 多次用到的jQuery对象存储到一个变量，避免重复查询文档树 var $myForm = $("#myForm"); $myForm.find(":submit").on("click", function () { // 定义一个标志位，记录表单填写是否正常 var flag = true; $myForm.find(":text, :password").each(function () { var val = $(this).val(); if (val.length <= 0 ){ var labelName = $(this).prev("label").text(); $(this).next("span").text(labelName + "不能为空"); flag = false; } }); // 表单填写有误就会返回false，阻止submit按钮默认的提交表单事件 return flag; }); // input输入框获取焦点后移除之前的错误提示信息 $myForm.find("input[type!='submit']").on("focus", function () { $(this).next(".error").text(""); }) } // 文档树就绪后执行 $(document).ready(function () { myValidation(); }); </script> </body> </html>
与window.onload的区别
1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
8、each方法
可以迭代：数组、自定义对象、标签。
（1）数组
li =[10,20,30,40]
$.each(li,function(i, v){
console.log(i, v);//function里面可以接受两个参数，i是索引，v是每次循环的具体元素。
})
（2）自定义对象
var d1 = {'name':'chao','age':18}
$.each(d1,function(k,v){console.log(k,v)})
（3）标签
——注意与数组跟自定义对象的方法不一样
——每次得到的是一个DOM对象！
// 为每一个li标签添加foo
$("li").each(function(){
$(this).addClass("c1");
});
（4）结束循环
1、return false;终止each循环——在遍历过程中可以使用 return false提前结束each循环。
2、return;什么也不加终止当前的循环——而直接使用return;后面什么都不加，不写false，就是跳过本次循环的意思
（5）each方法的代码说明
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>111</li> <li>222</li> <li>333</li> <li>444</li> <li>555</li> </ul> <script src="jquery-3.4.1.js"></script> <script> $('li').each(function (k,v) { //终止整个循环 用return false // if(k===2){ // return false; // } //终止单次循环 return if(k===2){ return; } console.log(k,v); //得到索引+dom对象 // 0 <li>111</li> // 1 <li>222</li> // 2 <li>333</li> // 3 <li>444</li> // 4 <li>555</li> //用源生js的代码取值 // console.log(v.innerText); }) </script> </body> </html>
9、data方法
任意jQuery对象都有data方法，可以保存任意值，可以用来代替全局变量
在匹配的元素集合中的所有元素上存储任意相关数据或返回匹配的元素集合中的第一个元素的给定名称的数据存储的值
$('div').data('name','值') //添加
$('div').data('name') //查找
$('div').removeData('name') //移除
9-1一个例子：模态框+data方法+委托
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .cover { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.3); z-index: 99; } .modal { width: 300px; height: 200px; background-color: white; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -150px; z-index: 1000; } .hide { display: none; } .input-box { margin: 40px; } </style> </head> <body> <button id="add">新增</button> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>wanghw</td> <td>Coding</td> <td> <button class="fire">开除</button> <button class="edit">编辑</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>naruto</td> <td>螺旋丸</td> <td> <button class="fire">开除</button> <button class="edit">编辑</button> </td> </tr> <tr> <td><input type="checkbox"></td> <td>Sasuke</td> <td>千鸟流</td> <td> <button class="fire">开除</button> <button class="edit">编辑</button> </td> </tr> </tbody> </table> <div class="cover hide"></div> <div class="modal hide"> <div class="input-box"> <div> <label>姓名： <input type="text" id="name"> </label> </div> <div> <label>爱好： <input type="text" id="hobby"> </label> </div> <button id="cancel" type="button">取消</button> <button id="submit" type="button">提交</button> </div> </div> <script src="jquery-3.4.1.js"></script> <script> // 定义一个清空输入框并且隐藏模态框的方法 function hideModal() { // 1. 清空input的值 $("#name,#hobby").val(''); // 2. 隐藏起来 $(".cover,.modal").addClass('hide'); } // 定义一个显示模态框的方法 function showModal() { // 1. 移除cover和modal的hide样式 $(".cover,.modal").removeClass('hide'); } // 开除按钮的功能 $("table").on('click', '.fire', function () { // 点击开除按钮要做的事儿 // 把当前行移除掉 //this --> 触发当前点击事件的DOM对象 $(this).parent().parent().remove(); // 链式操作 }); // 新增按钮的功能 $("#add").click(function () { // 点击新增按钮要做的事儿 showModal(); }); // 点击modal中的cancel按钮 $("#cancel").click(function () { hideModal(); }); // 点击modal中的submit按钮 $("#submit").click(function () { // 1. 获取用户输入的值 var name = $("#name").val(); var hobby = $("#hobby").val(); // 判断是添加操作还是编辑操作 var $editTr = $(this).data('xyh'); if ( $editTr === undefined) { // 3. 创建一个tr标签，把数据塞进去 var trEle = document.createElement("tr"); $(trEle).append('<td><input type="checkbox"></td>'); $(trEle).append('<td>' + name + '</td>'); var tdTmp = document.createElement('td'); tdTmp.innerText = hobby; $(trEle).append(tdTmp); $(trEle).append('<td><button class="fire">开除</button> <button class="edit">编辑</button></td>') // 4. 把上一步的tr追加到表格的tbody后面 $('tbody').append(trEle); } else { // 进入编辑模式 // 1. 取出用户之前编辑的那一行 // 2. 修改对应td的文本 $editTr.children().eq(1).text(name); $editTr.children().eq(2).text(hobby); // 3. 清空submit 按钮身上的data $('#submit').removeData('xyh'); } // 2. 隐藏模态框，清空输入框 hideModal(); }); // 点击编辑按钮要做的事儿 $('body').on('click', '.edit', function () { // 1. 弹出模态框 showModal(); // 2. 把当前行的信息显示到模态框的input中 // 2.1 获取当前行的姓名和爱好 var $currentTr = $(this).parent().parent(); var nameValue = $currentTr.children().eq(1).text(); var hobbyValue = $currentTr.children().eq(2).text(); // 第二种方式： // var name = $(this).parent().prev().prev().text(); // var hooby = $(this).parent().prev().text(); // 2.2 把上一步获取的值设置给input标签 $('#name').val(nameValue); $('#hobby').val(hobbyValue); // 3. 给模态框中的提交按钮绑定一个data $('#submit').data('xyh', $currentTr); }) </script> </body> </html>
10、插件——jQuery的拓展(了解)
分为jQuery的拓展与jQuery获取的对象的拓展
$.extend({func1:function(){}})
$.fn.extend({})
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
补充~淡入淡出效果
里面的代码这里也有： 几个简单常用的jQuery实例
3.1 jQuery的显示与隐藏效果
3.1.1 show、hide与toggle方法：
（1）show
概念:显示隐藏的匹配元素 语法：show(speed,callback) 参数：
1、speed：三种预定速度之一的字符串('slow','normal','fast')或表示动画时长的毫秒值（如：1000毫秒==1秒）
2、callback:在动画完成时执行的函数，每个元素执行一次
（2）hide
hide(speed,callback)跟show使用方法类似，表示隐藏显示的元素。可以通过show（）和hide（）方法，来动态控制元素的显示隐藏。
（3）toggle
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
下面是toggle的一个实例效果：、
代码入戏下：
View Code
3.1.2 slide系列：
（1）slideDown
通过高度变化（向下增大）来到动态地显示所有匹配的元素，在显示完成后触发一个回调函数用法和参数跟上面类似。
（2）slideUp
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数。用法和参数跟上面类似。
（3）slideToggle
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数跟toggle用法类似。
下面是side系列方法的一个实例，通过鼠标悬停来控制盒子的开关：
代码如下：
View Code
3.1.3 fade系列（淡入淡出，很常用）：
（1）fadeIn
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
（2）fadeOut
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。
（3）fadeTo
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。
（4）fadeToggle
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。实现淡入淡出的效果就是使用此方法。
下面是fade系列的一个例子：
代码如下：
View Code
3.1.4 animate、stop与delay
（1）animate
概念：用于创建自定义动画的函数
语法：animate(params,[speed],[fn])
参数：
params:一组包含作为动画属性和终值的样式属性和及其值的集合
speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
fn:在动画完成时执行的函数，每个元素执行一次。
（2）stop
概念：停止所有在指定元素上正在运行的动画
语法：stop([clearQueue],[jumpToEnd])
参数：
clearQueue:如果设置成true，则清空队列。可以立即结束动画。
gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等
（3）delay
概念：用来做延迟的操作
语法：delay(1000)，一秒之后做后面的操作
这里有一个animate的例子：
代码如下：
View Code
1728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
