jQuery()函数是jQuery库的最核心函数，jQuery的一切都是基于此函数的。该函数主要用于获取HTML DOM元素并将其封装为jQuery对象，以便于使用jQuery对象提供的其他属性和方法对DOM元素进行操作。
jQuery()函数的功能非常强大，它可以将各种类型的参数智能地封装为jQuery对象。
语法
jQuery()函数的功能非常强大，因此用法也比较复杂，其主要用法如下：
用法一：
jQuery( selector, [ context ] )
将选择器字符串selector所对应的HTML DOM元素封装为jQuery对象。可选参数context用于指定查找DOM元素的范围。
用法二：
// jQuery 1.4 新增省略参数obj的用法：不传入任何参数，将返回空的jQuery对象
jQuery( [ obj ] )
将指定对象obj封装为jQuery对象。这个对象可以是一个DOM元素(Element)，也可以是一个DOM元素数组，也可以是一个jQuery对象(对其进行克隆)，或者其他对象。你也可以省略该参数，从而返回一个空的jQuery对象。
用法三：
jQuery( html, [ ownerDocument ] )
根据HTML标签字符串html动态地创建临时DOM元素，并将其封装为jQuery对象。可选参数ownerDocument用于指定临时DOM元素在哪个文档中创建(如果存在多个文档的话，例如框架页面)。
用法四：jQuery 1.4 新增该用法。
// v1.4 新增
jQuery( html, properties )
根据HTML标签字符串html和包含其附加属性、事件以及方法的properties对象，动态地创建临时DOM元素，并将其封装为jQuery对象。
用法五：
jQuery( callback )
在当前文档载入完成后，执行指定的函数callback。该用法是ready()函数如下用法的简写：jQuery(document).ready(callback)。
参数
请根据前面语法部分所定义的参数名称查找对应的参数。
| 参数 | 描述 |
|---|---|
| selector | Number类型指定的选择器字符串，用于查找对应的DOM元素。 |
| context | 可选/Object类型指定选择器字符串的查找范围，可以是DOM元素、DOM元素数组、文档、jQuery对象。如果省略该参数，默认为当前文档。 |
| obj | 可选/Object类型指定的对象，用于封装为jQuery对象。可以是DOM元素、DOM元素数组、文档、jQuery对象等。 |
| html | Object类型指定的HTML标签字符串，例如"<div/>"、"<div></div>"、"<div id='tagId'></div>"(标签中也可以嵌套标签，只要符合html语法即可)。 |
| ownerDocument | Number类型指定DOM元素在哪个文档上进行临时创建，默认为当前文档。 |
| properties | Object类型指定的对象，用于指定DOM元素的属性、事件和方法。例如：{name:"username", "click":function(){}} |
| callback | Number类型指定的函数，用于在DOM文档加载完成后立即执行。 |
返回值
jQuery()函数的返回值是jQuery类型，返回一个jQuery对象。
示例&说明
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>jQuery() 函数详解</title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <style> .highlight{ background: blue; } </style> <script> $(function(){ /*选择当前文档中所有的p标签DOM元素*/ $("p").css("color","red");//红色 /*选择id属性为userName的DOM元素*/ $("#userName").val("CodePlayer").prop("disabled",true);//设置value值,并禁用文本框(添加disabled属性) /*选择所包含test样式的DOM元素 例如:(class="test")*/ $(".test").append('<b> 我被.test选中</b>');//追加html内容 /*选择所有p标签中带test样式的DOM元素*/ $("p.test").addClass("highlight");//添加css类名 }); </script> </head> <body> <p>p标签1</p> <p>p标签2 <span class="test">span标签</span> </p> <p class="test">p标签3</p> <input type="text" id="userName"/> <div class="foo test">div标签</div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> /*通过以下方式可以获取匹配指定元素的jQuery对象 然后你可以使用jQuery对象的属性和方法对他们进行操作*/ $(function(){ var dom=document.getElementById("userName"); /*将DOM元素封装为jQuery对象*/ $(dom).val("CodePlayer");//设置value值 var doms=document.getElementsByName("book_id"); /*将DOM元素数组封装为jQuery对象*/ /*prop() 方法设置或返回被选元素的属性和值*/ $(doms).prop("checked",true);//选择所有name为book——id的复选框 /*将body元素封装为jQuery对象*/ $(document.body).prepend("<div>插入的内容</div>"); /*为window对象绑定load事件*/ $(window).load(function(){ alert("页面加载完毕") }); }); </script> </head> <body> <input type="text" id="userName"/><br/> <input type="checkbox" name="book_id" value="1"/>书籍1 <input type="checkbox" name="book_id" value="2"/>书籍2 <input type="checkbox" name="book_id" value="3"/>书籍3 <input type="checkbox" name="express" value="1"/>快递 </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(function(){ /*创建一个空的span标签的临时DOM元素，并将其封装为jQuery对象*/ /*以下三种方式的效果一致*/ $('<span></span>'); /*创建一个p标签,内部包含带有test样式的span标签*/ $('<p><span class="test">CodePlayer</span></p>').appendTo("body");//appendTo() 方法在被选元素的结尾（仍然在内部）插入指定内容。 /*创建一个表格*/ var html='<table>'; html +='<tr>'; html +='<td>单元格1</td>'; html +='<td>单元格2</td>'; html +='</tr>'; html +='<tr>'; html +='<td>单元格3</td>'; html +='<td>单元格1</td>'; html +='</tr>'; html +='</table>'; $(html).appendTo("#myDiv");//追加到id为myDiv的元素内 }); </script> </head> <body> <div id="myDiv"></div> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(function(){ /*创建一个临时的链接jQuery对象*/ var tempLink=$('<a/>',{ id:'goback', title:'CodePlayer', html:'CodePlayer',//表示链接的锚文本,也就是innerHTNL的值 href:'https://www.baidu.com/', click:function(){ //统计点击次数 } }); /*追加到body标签内容的尾部*/ tempLink.appendTo("body"); $('<input/>',{ type:'checkbox', var:'def',//表示表单元素的value属性值或textarea的输入内容 click:function(){ alert("点击了复选框"); } }).appendTo("body"); }); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> /*这相当于ready()事件函数如下用法的简写*/ $(function(){ /*本文档页面载入完成后自动执行*/ alert("文档加载完毕"); }); $(document).ready(function(){ /*本文档页面载入完成后自动执行*/ alert("文档加载完毕"); }); </script> </head> <body> </body> </html>
show()函数用于显示所有匹配的元素。此外，你还可以指定元素显示的过渡动画效果。
如果元素本身是可见的，则不对其作任何改变。如果元素是隐藏的，则使其可见。
与该函数相对的是hide()函数，用于隐藏所有匹配的元素。
该函数属于jQuery对象(实例)。
语法
jQuery 1.0 新增该函数。show()函数主要有以下两种形式的用法：
用法一：jQuery 1.4.3 新增支持参数easing。
jQueryObject.show( [ duration ] [, easing ] [, complete ] )
用法二：
jQueryObject.show( options )
用法二是用法一的变体。以对象形式指定所需的选项参数(可指定比用法一更多的选项参数)。
参数
| 参数 | 描述 |
|---|---|
| duration | 可选/String/Number类型指定过渡动画运行多长时间(毫秒数)，默认值为400。该参数也可以为字符串"fast"(=200)或"slow"(=600)。 |
| easing | 可选/String类型指定使用何种动画效果，默认为"swing"，还可以设为"linear"或其他自定义的动画样式的函数名称。 |
| complete | 可选/Function类型元素显示完毕后需要执行的函数。函数内的this指向当前DOM元素。 |
| options | Object类型指定的选项参数对象。 |
如果没有为show()指定任何参数，则将以最快方式直接显示元素，不使用动画效果。
参数options对象可以识别如下的属性(以下属性均是可选的)：
| 属性 | 属性描述 |
|---|---|
| duration | 参见参数duration。 |
| easing | 参见参数easing。 |
| complete | 参见参数complete。 |
| queue | Boolean类型指示是否将动画放入效果队列中，默认为true。从1.7版本开始，该参数可以为字符串，用于放入指定名称的效果队列。如果你指定的队列不会自动开始，你需要手动调用dequeue("queueName")来启动队列。 |
此外，jQuery 1.4 和 1.8 还为参数options新增了许多新的选项支持，但这些参数并不常用，此处不再赘述，详见jQuery官方文档。
返回值
show()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>显示和隐藏</title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(function(){ $("#btnShow").click(function(){ var v=$("#animation").val(); if(v=="1"){ $("p").show(); }else if(v=="2"){ $("p").show("show"); }else if(v=="3"){ $("p").show(3000); }else if(v=="4"){ $("p").show(1000,function(){ alert("显示完毕！");//有两个p标签,会弹出两次 }); }else if(v=="5"){ $("p").show(1000,"linear"); }else if(v=="6"){ $("p").show({duration:1000}); } }); /*隐藏按钮*/ $("#btnHide").click(function(){ $("p").hide(); }); }); </script> </head> <body> <p>CodePlayer</p> <p>专注于编程开发技术分享</p> 显示效果: <select id="animation"> <option value="1">show()</option> <option value="2">show("show")</option> <option value="3">show(3000)</option> <option value="4">show(1000,complete)</option> <option value="5">show(1000,linear)</option> <option value="6">show(options)</option> </select> <input id="btnShow" type="button" value="显示"/> <input id="btnHide" type="button" value="隐藏"/> </body> </html>
mouseover()函数用于为每个匹配元素的mouseover事件绑定处理函数。该函数还可用于触发mouseover事件。此外，你还可以额外传递给事件处理函数一些数据。
mouseover事件会在鼠标进入某个元素时触发。它与mouseenter事件相似，但mouseenter事件只会在鼠标进入当前元素时触发，而mouseover事件会在鼠标进入当前元素及其任何后代元素时触发(换句话说，mouseover事件支持冒泡)。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发mouseenter事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过mouseover()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
jQueryObject.mouseover( [[ data ,] handler ] )
如果指定了至少一个参数，则表示绑定mouseover事件的处理函数；如果没有指定任何参数，则表示触发mouseover事件。
参数
| 参数 | 描述 |
|---|---|
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | 可选/Function类型指定的事件处理函数。 |
jQuery 1.4.3 新增支持：mouseover()支持data参数。
参数handler中的this指向当前DOM元素。mouseover()还会为handler传入一个参数：表示当前事件的Event对象。
返回值
mouseover()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> /*触发mouseover事件*/ $(function(){ var count=0; /*记录触发div元素的mouseover事件的次数*/ $("div").mouseover(function(){ $("#msg").html("触发mouseover的次数:"+(++count)); }) /*鼠标移入div元素就改变背景颜色*/ $("div").mouseover(function(){ $(this).css("background","red"); }) }); </script> </head> <body> <div> <p id="p1">CodePlayer</p> <p id="p2">专注于编程技术分享</p> <p id="p3">http://www.baidu.com</p> </div> <span id="msg"></span> </body> </html>
mouseout()函数用于为每个匹配元素的mouseout事件绑定处理函数。该函数还可用于触发mouseout事件。此外，你还可以额外传递给事件处理函数一些数据。
mouseout事件会在鼠标离开某个元素时触发。它与mouseleave事件相似，但mouseleave事件只会在鼠标离开当前元素时触发，而mouseout事件会在鼠标离开当前元素及其任何后代元素时触发(换句话说，mouseout事件支持冒泡)。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发mouseout事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过mouseout()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
jQueryObject.mouseout( [[ data ,] handler ] )
如果指定了至少一个参数，则表示绑定mouseout事件的处理函数；如果没有指定任何参数，则表示触发mouseout事件。
参数
| 参数 | 描述 |
|---|---|
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | 可选/Function类型指定的事件处理函数。 |
jQuery 1.4.3 新增支持：mouseout()支持data参数。
参数handler中的this指向当前DOM元素。mouseout()还会为handler传入一个参数：表示当前事件的Event对象。
返回值
mouseout()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> /*触发mouseover事件*/ $(function(){ var count=0; /*记录触发div元素的mouseover事件的次数*/ $("div").mouseover(function(){ $("#msg").html("触发mouseover的次数:"+(++count)); }) /*鼠标移入div元素就改变背景颜色*/ $("div").mouseover(function(){ $(this).css("background","red"); }) }); </script> </head> <body> <div> <p id="p1">CodePlayer</p> <p id="p2">专注于编程技术分享</p> <p id="p3">http://www.baidu.com</p> </div> <span id="msg"></span> </body> </html>
keydown()函数用于为每个匹配元素的keydown事件绑定处理函数。此外，你还可以额外传递给事件处理函数一些数据。
keydown事件会在按下键盘按键时触发。它与keypress事件类似，但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress)，keydown着重的是按下了哪个键(按下任何键都可触发keydown)。对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键，请监听keydown事件。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发keydown事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过keydown()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
jQueryObject.keydown( [[ data ,] handler ] )
如果指定了至少一个参数，则表示绑定keydown事件的处理函数；如果没有指定任何参数，则表示触发keydown事件。
参数
| 参数 | 描述 |
|---|---|
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | 可选/Function类型指定的事件处理函数。 |
jQuery 1.4.3 新增支持：keydown()支持data参数。
参数handler中的this指向当前DOM元素。keydown()还会为handler传入一个参数：表示当前事件的Event对象。
返回值
keydown()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
请参考以下HTML示例代码：
<input id="keys" type="text" /> 现在，我们为window对象的keydown事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：
keydown事件的event.which属性返回的是所按下的键盘按键的映射代码值。keypress事件的event.which属性返回的是按键所输入的字符的Unicode值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(window).keydown(function(event){ $("body").append("<br>你按下的按键的代码值为:["+event.which+"]"); }); </script> </head> <body> <input id="keys" type="text"/> </body> </html>
keypress()函数用于为每个匹配元素的keypress事件绑定处理函数。此外，你还可以额外传递给事件处理函数一些数据。
keypress事件会在按下键盘按键时触发。它与keydown事件类似，但keypress着重的是按下该键输入了哪个字符(只有能够打印字符的键才会触发keypress)，keydown着重的是按下了哪个键(按下任何键都可触发keydown)。对于诸如Ctrl、Alt、Shift、Delete、Esc等修饰性和非打印键，请监听keydown事件。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发keypress事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过keypress()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
jQueryObject.keypress( [[ data ,] handler ] )
如果指定了至少一个参数，则表示绑定keypress事件的处理函数；如果没有指定任何参数，则表示触发keypress事件。
参数
| 参数 | 描述 |
|---|---|
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | 可选/Function类型指定的事件处理函数。 |
jQuery 1.4.3 新增支持：keypress()支持data参数。
参数handler中的this指向当前DOM元素。keypress()还会为handler传入一个参数：表示当前事件的Event对象。
返回值
keypress()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
请参考以下HTML示例代码：
<input id="chars" type="text" /> 现在，我们为window对象的keypress事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：
keypress事件的event.which属性返回的是按键所输入的字符的Unicode值。keydown事件的event.which属性返回的是所按下的键盘按键的映射代码值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(window).keypress(function(event){ $("body").append("<br>你输入了字符:["+String.fromCharCode(event.which)+"](event.which="+event.which+")"); }); </script> </head> <body> <input id="chars" type="text"/> </body> </html>
keyup()函数用于为每个匹配元素的keyup事件绑定处理函数。此外，你还可以额外传递给事件处理函数一些数据。
keyup事件会在按下键盘按键并释放时触发。例如：你一直按住A键，直到10秒钟后才释放，只会在释放按键的时候触发一次keyup事件。但在这个过程中会触发许多次keydown事件(或keypress事件)。因此，keyup事件无法阻止字符的输入。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发keyup事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过keyup()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
jQueryObject.keyup( [[ data ,] handler ] )
如果指定了至少一个参数，则表示绑定keyup事件的处理函数；如果没有指定任何参数，则表示触发keyup事件。
参数
| 参数 | 描述 |
|---|---|
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | 可选/Function类型指定的事件处理函数。 |
jQuery 1.4.3 新增支持：keyup()支持data参数。
参数handler中的this指向当前DOM元素。keyup()还会为handler传入一个参数：表示当前事件的Event对象。
返回值
keyup()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
请参考以下HTML示例代码：
<input id="keys" type="text" />
<div id="counter">你按了0个键!</div> 现在，我们为window对象的keyup事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：
keyup和keydown事件的event.which属性返回的是所按下的键盘按键的映射代码值。keypress事件的event.which属性返回的是按键所输入的字符的Unicode值。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(window).keyup(function(event){ $("body").append("<br>你按下的按键的代码值为:["+event.which+"]"); }); </script> </head> <body> <input id="keys" type="text"/> <div id="counter">你按了0个键</div> </body> </html>
hover()函数用于为每个匹配元素的hover事件绑定处理函数。
hover事件就是鼠标悬停事件。此外，你还可以额外传递给事件处理函数一些数据。
此外，你可以为同一元素多次调用该函数，从而绑定多个事件处理函数。触发hover事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过hover()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
hover()函数主要有以下两种用法：
用法一：
jQueryObject.hover( handlerIn , handlerOut )
分别指定鼠标移入、移出元素时的事件处理函数。
用法二：jQuery 1.4 新增支持该用法。
jQueryObject.hover( handlerInAndOut )
用法一的变体。当鼠标移入、移出元素时的事件处理函数相同时，只需直接传入一个处理函数作为参数即可。
参数
请根据前面语法部分所定义的参数名称查找对应的参数。
| 参数 | 描述 |
|---|---|
| handlerIn | Function类型鼠标移入元素时需要执行的处理函数。 |
| handlerOut | Function类型鼠标移出元素时需要执行的处理函数。 |
| handlerInAndOut | Function类型鼠标移入、移出元素时需要执行的处理函数。 |
hover()函数的所有参数都是函数，函数内的this指向当前DOM元素。hover()还会为其传入一个参数：表示当前事件的Event对象。
返回值
hover()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
hover()函数与on()函数具有以下等价代码：
$( selector ).hover( handlerInOut ); // 等价于 $( selector ).on( "mouseenter mouseleave", handlerInOut );
请参考下面这段初始HTML代码：
<a id="a1" href="http://www.365mini.com">CodePlayer</a>
<a id="a2" href="http://www.365mini.com/doc">中文手册</a>现在，我们为所有a元素的hover事件绑定处理函数(可以绑定多个，触发时按照绑定顺序依次执行)：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> /*为所有button元素的hover事件绑定处理函数*/ /*鼠标移入链接时，显示红色；移除链接时显示蓝色*/ $(function(){ $("a").hover(function(event){ $(this).css("color","red"); },function(event){ $(this).css("color","blue"); }); /*为所有button元素的hover事件绑定处理函数*/ /*鼠标移入，移除链接时，都去掉下划线*/ $("a").hover(function(event){ $(this).css("textDecoration","none"); }); }); </script> </head> <body> <a id="a1" href="http://www.365mini.com">CodePlayer</a> <a id="a2" href="http://www.365mini.com/doc">中文手册</a> </body> </html>
toggle()函数用于为每个匹配元素的click事件绑定轮流的处理函数。
toggle()是一个特殊的事件函数，用于为匹配元素的click事件绑定多个事件处理函数。每次触发click事件时，toggle()函数会轮流执行其中的一个事件处理函数。
例如，我们使用toggle("click", A, B, C)为元素的click事件绑定了3个事件处理函数A、B、C。第一次点击执行A，第二次点击执行B，第三次点击执行C，第四次点击又执行A，第五次点击又执行B ……(如果调用了多次toggle()，它们之间是独立的)。
要删除通过toggle()绑定的事件，请使用unbind()函数。例如:unbind("click")。
这里介绍的toggle()是一个特殊的click事件函数，jQuery还有一个同名的toggle()函数，用于切换元素的显示/隐藏。
该函数属于jQuery对象(实例)。
语法
jQuery 1.0 新增该函数，但从1.8开始被标记为已过时，并从1.9开始被移除。
jQueryObject.toggle( handler1, handler2 [, handlerN... ] )
参数
| 参数 | 描述 |
|---|---|
| handler1 | Function类型指定的事件处理函数1。 |
| handler2 | Function类型指定的事件处理函数2。 |
| handlerN | 可选/Function类型指定的事件处理函数N，可以有任意多个。 |
事件函数toggle()会为事件处理函数传入一个参数，即表示当前事件的Event对象。
如果事件处理函数的返回值为false，则表示阻止元素的默认事件行为，并停止事件在DOM树中冒泡。例如，<a>链接的click事件的处理函数返回false，可以阻止链接的默认URL跳转行为。
返回值
toggle()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
请参考下面这段初始HTML代码：
<input id="btn" type="button" value="点击" > 以下是与toggle()事件函数相关的jQuery示例代码，以演示toggle()事件函数的具体用法：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script> $(function(){ function clickHandler1(){ alert("click-1"); } function clickHandler2(){ alert("click-2"); } function clickHandler3(){ alert("click-3"); } function clickHandler4(){ alert("click-4"); } $("#btn").toggle(clickHandler1,clickHandler2,clickHandler3,clickHandler4); }); </script> </head> <body> <input id="btn" type="button" value="点击"/> </body> </html>
bind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。
此外，你还可以额外传递给事件处理函数一些所需的数据。
执行bind()时，事件处理函数会绑定到每个匹配元素上。因此你使用bind()所有button元素绑定了click事件，是为当时文档中存在的每个button元素绑定click事件。如果之后你向文档中添加了新的button元素，绑定事件不会对其生效。如果你希望绑定事件对未来新添加的元素也生效，请使用on()、delegate()、live()等事件函数(尽量优先使用靠前的事件函数)。
此外，你可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。
要删除通过bind()绑定的事件，请使用unbind()函数。
该函数属于jQuery对象(实例)。
语法
bind()函数主要有以下两种形式的用法：
用法一：
jQueryObject.bind( events [, data ], handler )
用法二：jQuery 1.4.3 新增支持该用法。
jQueryObject.bind( events [, data ] [, isDefaultBubble ] )
用法三：jQuery 1.4 新增支持该用法。
jQueryObject.bind( eventsMap )
参数
| 参数 | 描述 |
|---|---|
| events | String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。 |
| data | 可选/任意类型触发事件时，需要通过event.data传递给事件处理函数的任意数据。 |
| handler | Function类型指定的事件处理函数。 |
| isDefaultBubble | 可选/Boolean类型指定触发事件时，是否允许元素的默认行为和事件冒泡。默认为true。 |
| eventsMap | Object类型一个Object对象，其每个属性对应事件类型和可选的命名空间(参数events)，属性值对应绑定的事件处理函数(参数handler)。 |
关于参数events中可选的命名空间(1.4.3+才支持)，请参考最下面的示例代码。
参数handler中的this指向当前DOM元素。bind()还会为handler传入一个参数：表示当前事件的Event对象。
参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如submit(表单提交)事件的事件处理函数返回false，可以阻止表单的提交。
参数isDefaultBubble用于指示是否允许元素的默认行为和事件冒泡。如果该值为false，它将阻止元素的默认行为(例如：触发click事件的链接的默认跳转行为，触发submit事件的表单的默认提交行为)和事件的冒泡传递。
返回值
bind()函数的返回值为jQuery类型，返回当前jQuery对象本身。
示例&说明
以点击事件("click")为例，以下是jQuery中事件函数的常规用法(某些函数也存在其它形式的用法，此处暂不列出)：
// 这里的选择器selector用于指定可以触发事件的元素 // 这里的选择器ancestor应是selector的祖辈元素，selector触发的事件可以被其祖辈元素在事件流中捕获，从而以"委托代理"的形式触发事件。 // jQuery 1.0+ (1.4.3+支持参数data) $("selector").click( [ data ,] handler ); // jQuery 1.0+ (1.4.3+支持参数data) $("selector").bind( "click" [, data ], handler ); // jQuery 1.3+ (1.4+支持参数data) $("selector").live( "click" [, data ], handler ); // jQuery 1.4.2+ $("ancestor").delegate( "selector", "click" [, data ], handler ); // jQuery 1.7+ $("ancestor").on( "click", "selector" [, data ], handler );
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(function(){ /*为div中的所有p元素的click事件绑定事件处理函数*/ /*只有n2 n3可以触发该事件*/ $("div p").bind("click",function(){ /*这里的this指向触发点击事件的p元素(Element)*/ alert($(this).text()); }); }); </script> </head> <body> <div id="n1"> <p id="n2"><span>CodePlayer</span></p> <p id="n3"><span>专注于编程开发技术分享</span></p> <em id="n4">http://www.baidu.com</em> </div> <p id="n5">Google</p> </body> </html>
unbind()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。
unbind()函数主要用于解除由bind()函数绑定的事件处理函数。
该函数属于jQuery对象(实例)。
语法
unbind()函数主要有以下两种形式的用法：
用法一：
jQueryObject.unbind( [ events [, handler ]] )
移除当前匹配元素的events事件绑定的事件处理函数handler。
用法二：
jQueryObject.unbind( eventObject )
为指定事件处理函数传入的Event对象，用于移除对应的事件处理函数。
参数
| 参数 | 描述 |
|---|---|
| events | 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、"focus click"、"keydown.myPlugin"。 |
| handler | 可选/Function类型指定的事件处理函数。 |
| eventObject | Object类型一个Event对象，用于移除传入该对象的事件处理函数。 |
jQuery 1.4.3 新增支持参数handler可以为false。用于移除绑定事件时，handler参数为false值的事件处理函数。
如果省略参数handler，则移除匹配元素指定类型的事件上绑定的所有事件处理函数。
如果省略了所有参数，则表示移除匹配元素上为任何元素绑定的任何事件类型的任何事件处理函数。
返回值
unbind()函数的返回值为jQuery类型，返回当前jQuery对象本身。
实际上，unbind()函数的参数全是筛选条件，只有匹配所有参数条件的事件处理函数都将被移除。参数越多，限定条件就越多，被移除的范围就越小。
示例&说明
请参考下面这段初始HTML代码：
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a> 首先，我们为上述button和<a>元素绑定事件，然后使用unbind()函数解除事件绑定，相应的代码如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script> $(function(){ function btnClick1(){ alert(this.value+"-1"); } function btnClick2(){ alert(this.value+"-2"); } var $buttons=$(":button"); /*为所有button元素的click事件绑定事件处理函数btnClick1*/ $buttons.bind("click",btnClick1); /*为所有button元素的click事件绑定事件处理函数btnClick2*/ $buttons.bind("click",btnClick2); /*为所有a元素的click mouseover mouseleave事件绑定事件处理函数*/ $("a").bind("click mouseover mouseleave",function(event){ if(event.type=="click"){ alert("点击事件"); }else if(event.type=="mouseover"){ $(this).css("color","red"); }else{ $(this).css("color","blue"); $(this).css("textDecoration","none"); } }); /*移除为所有button元素的click事件绑定的事件处理函数btnClick2*/ /*点击按钮 只执行btnClick1*/ $buttons.unbind("click",btnClick2); // /*移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2) // 点击按钮，不会执行任何事件处理函数*/ // $buttons.unbind("click"); // /*只移除btn1元素的click事件绑定的所有事件处理函数 btn2元素的click事件任然有效*/ // $("btn1").unbind("click"); // /*移除为所有a元素的任何事件绑定的所有处理函数 // 点击链接，或用鼠标在链接上移入、移出，都不会触发执行任何事件处理函数*/ // $("a").unbind( ); }); </script> </head> <body> <input id="btn1" type="button" value="点击1"/> <input id="btn2" type="button" value="点击2"/> <a id="a1" href="#">CodePlayer</a> </body> </html>
扫一扫
468
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
