前言:今天看知乎偶然看到中国有哪些类似于TED的节目,回答中的一些推荐我给记录下来了,顺便也在这里贴一下:
:
1,readyready()函数用于在当前文档结构载入完毕后立即执行指定的函数。该函数的作用相当于window.onload事件。
2,blindbind()函数用于为每个匹配元素的一个或多个事件绑定事件处理函数。举例:
>CodePlayer
>专注于编程开发技术分享
>http:<span style="color: #0000ff;">var obj = { id: <span style="color: #800080;">5,name: <span style="color: #800000;">"<span style="color: #800000;">王五<span style="color: #800000;">"<span style="color: #000000;"> };
<span style="color: #008000;">//<span style="color: #008000;">为div中的所有p元素的click事件绑定事件处理函数
<span style="color: #008000;">//<span style="color: #008000;">只有n2、n3可以触发该事件
$(<span style="color: #800000;">"<span style="color: #800000;">div p<span style="color: #800000;">").bind(<span style="color: #800000;">"<span style="color: #800000;">click<span style="color: #800000;">"<span style="color: #000000;">,function(){
<span style="color: #008000;">//<span style="color: #008000;"> 这里的this指向触发点击事件的p元素(Element)
alert( $(<span style="color: #0000ff;">this<span style="color: #000000;">).text() );
});
<span style="color: #008000;">//<span style="color: #008000;"> 新添加的n6不会触发上述click事件
$(<span style="color: #800000;">"<span style="color: #800000;">#n1<span style="color: #800000;">").append(<span style="color: #800000;">'<span style="color: #800000;"><p id="n6">上述绑定的click事件不会对该元素也生效!
<span style="color: #008000;">//<span style="color: #008000;">为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据obj
<span style="color: #008000;">//<span style="color: #008000;"> 附加数据可以是任意类型
$(<span style="color: #800000;">"<span style="color: #800000;">#n5<span style="color: #800000;">").bind(<span style="color: #800000;">"<span style="color: #800000;">mouseenter mouseleave<span style="color: #800000;">",obj,function(<span style="color: #0000ff;">event<span style="color: #000000;">){
<span style="color: #0000ff;">var $me = $(<span style="color: #0000ff;">this<span style="color: #000000;">);
<span style="color: #0000ff;">var obj = <span style="color: #0000ff;">event.data; <span style="color: #008000;">//<span style="color: #008000;"> 这就是传入的附加数据
<span style="color: #0000ff;">if( <span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseenter<span style="color: #800000;">"<span style="color: #000000;">){
$me.html( <span style="color: #800000;">"<span style="color: #800000;">你好,<span style="color: #800000;">" + obj.name + <span style="color: #800000;">"<span style="color: #800000;">!<span style="color: #800000;">"<span style="color: #000000;">);
}<span style="color: #0000ff;">else <span style="color: #0000ff;">if(<span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseleave<span style="color: #800000;">"<span style="color: #000000;"> ){
$me.html( <span style="color: #800000;">"<span style="color: #800000;">再见,<span style="color: #800000;">" + obj.name + <span style="color: #800000;">"<span style="color: #800000;">!<span style="color: #800000;">"<span style="color: #000000;">);
}
} );
此外,如果符合条件的元素是bind()函数执行后新添加的,绑定事件不会对其生效。同样以初始HTML代码为例,我们可以编写如下jQuery代码:bind()函数的参数eventsMap是一个对象,可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下:
$(<span style="color: #800000;">"<span style="color: #800000;">#n5<span style="color: #800000;">").bind( eventsMap );
3,unbindunbind()函数用于移除匹配元素上绑定的一个或多个事件的事件处理函数。unbind()函数主要用于解除由bind()函数绑定的事件处理函数。
4,livelive()函数用于为指定元素的一个或多个事件绑定事件处理函数。即使是执行live()函数之后新添加的元素,只要它匹配当前jQuery对象的选择器,绑定的事件处理函数仍然对其有效。要删除通过live()绑定的事件,请使用die()函数。
jQuery 1.3 新增该函数,从jQuery 1.7开始被标记为已过时,在jQuery 1.9中被移除,请使用on()函数来替代。请使用on()函数来替代。
5,die
6,delegatedelegate()函数用于为指定元素的一个或多个事件绑定事件处理函数。即使是执行delegate()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数仍然对其有效。要删除通过delegate()绑定的事件,请使用undelegate()函数。jQueryObject.delegate( selector,events [,data ],handler )jQueryObject.delegate( selector,eventsMap )举例:
>CodePlayer
>专注于编程开发技术分享
>http:<span style="color: #0000ff;">var data = { id: <span style="color: #800080;">5,name: <span style="color: #800000;">"<span style="color: #800000;">李四<span style="color: #800000;">"<span style="color: #000000;"> };
<span style="color: #008000;">//<span style="color: #008000;">为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data
<span style="color: #008000;">//<span style="color: #008000;">附加数据可以是任意类型
$(<span style="color: #800000;">"<span style="color: #800000;">body<span style="color: #800000;">").<span style="color: #0000ff;">delegate(<span style="color: #800000;">"<span style="color: #800000;">#n5<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">mouseenter mouseleave<span style="color: #800000;">",data,function(<span style="color: #0000ff;">event<span style="color: #000000;">){
<span style="color: #0000ff;">var $me = $(<span style="color: #0000ff;">this<span style="color: #000000;">);
<span style="color: #0000ff;">var options = <span style="color: #0000ff;">event.data; <span style="color: #008000;">//<span style="color: #008000;"> 这就是传入的附加数据
<span style="color: #0000ff;">if( <span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseenter<span style="color: #800000;">"<span style="color: #000000;">){
$me.html( <span style="color: #800000;">"<span style="color: #800000;">你好,<span style="color: #800000;">" + options.name + <span style="color: #800000;">"<span style="color: #800000;">!<span style="color: #800000;">"<span style="color: #000000;">);
}<span style="color: #0000ff;">else <span style="color: #0000ff;">if(<span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseleave<span style="color: #800000;">"<span style="color: #000000;"> ){
$me.html( <span style="color: #800000;">"<span style="color: #800000;">再见,<span style="color: #800000;">" + options.name + <span style="color: #800000;">"<span style="color: #800000;">!<span style="color: #800000;">"<span style="color: #000000;">);
}
} );
函数的参数eventsMap是一个对象,可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下:
$(<span style="color: #800000;">"<span style="color: #800000;">body<span style="color: #800000;">").<span style="color: #0000ff;">delegate(<span style="color: #800000;">"<span style="color: #800000;">#n5<span style="color: #800000;">",events);
7,undelegatejQueryObject.undelegate( [ selector,handler ]] )jQueryObject.undelegate( selector,eventsMap )
8,onon()函数用于为指定元素的一个或多个事件绑定事件处理函数。从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。用法一:jQueryObject.on( events [,selector ] [,handler )用法二:jQueryObject.on( eventsMap [,data ] )
示例&说明:以点击事件("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" [,handler );
// jQuery 1.3+ (1.4+支持参数data)$("selector").live( "click" [,handler );
// jQuery 1.4.2+$("ancestor").delegate( "selector","click" [,handler );
// jQuery 1.7+$("ancestor").on( "click","selector" [,handler );
请参考下面这段初始HTML代码:
>CodePlayer
>专注于编程开发技术分享
>http:我们为
元素绑定点击事件:
如果要绑定所有的
元素,你可以编写如下jQuery代码:
此外,我们还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据,我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理:
<span style="color: #008000;">//<span style="color: #008000;"> 附加数据可以是任意类型
$(<span style="color: #800000;">"<span style="color: #800000;">body<span style="color: #800000;">").on(<span style="color: #800000;">"<span style="color: #800000;">mouseenter mouseleave<span style="color: #800000;">",<span style="color: #800000;">"<span style="color: #800000;">#n5<span style="color: #800000;">",function(<span style="color: #0000ff;">event<span style="color: #000000;">){
<span style="color: #0000ff;">var $me = $(<span style="color: #0000ff;">this<span style="color: #000000;">);
<span style="color: #0000ff;">var options = <span style="color: #0000ff;">event.data; <span style="color: #008000;">//<span style="color: #008000;"> 这就是传入的附加数据
<span style="color: #0000ff;">if( <span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseenter<span style="color: #800000;">"<span style="color: #000000;">){
$me.html( <span style="color: #800000;">"<span style="color: #800000;">你好,<span style="color: #800000;">" + options.name + <span style="color: #800000;">"<span style="color: #800000;">!<span style="color: #800000;">"<span style="color: #000000;">);
}<span style="color: #0000ff;">else <span style="color: #0000ff;">if(<span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseleave<span style="color: #800000;">"<span style="color: #000000;"> ){
$me.html( <span style="color: #800000;">"<span style="color: #800000;">再见!<span style="color: #800000;">"<span style="color: #000000;">);
}
});
此外,即使符合条件的元素是on()函数执行后新添加,绑定事件对其依然有效。同样以初始HTML代码为例,我们可以编写如下jQuery代码:
$(<span style="color: #800000;">"<span style="color: #800000;">#n1<span style="color: #800000;">").append(<span style="color: #800000;">'<span style="color: #800000;"><p id="n6">上述绑定的click事件对此元素也生效!<span style="color: #800000;">');
on()函数的参数eventsMap是一个对象,可以"属性-值"的方式指定多个"事件类型-处理函数"。对应的示例代码如下:
<span style="color: #800000;">"<span style="color: #800000;">mouseenter<span style="color: #800000;">": function(<span style="color: #0000ff;">event<span style="color: #000000;">){
$(<span style="color: #0000ff;">this).html( <span style="color: #800000;">"<span style="color: #800000;">你好,<span style="color: #800000;">" + <span style="color: #0000ff;">event.data.name + <span style="color: #800000;">"<span style="color: #800000;">!<span style="color: #800000;">"<span style="color: #000000;">);
},<span style="color: #800000;">"<span style="color: #800000;">mouseleave<span style="color: #800000;">": function(<span style="color: #0000ff;">event<span style="color: #000000;">){
$(<span style="color: #0000ff;">this).html( <span style="color: #800000;">"<span style="color: #800000;">再见!<span style="color: #800000;">"<span style="color: #000000;">);
}
};
<span style="color: #008000;">//<span style="color: #008000;">为n5绑定mouseenter mouseleave两个事件,并为其传入附加数据data
$(<span style="color: #800000;">"<span style="color: #800000;">body<span style="color: #800000;">").on(events,data);
9,offoff()函数用于移除元素上绑定的一个或多个事件的事件处理函数。off()函数主要用于解除由on()函数绑定的事件处理函数。
10,oneone()函数用于为每个匹配元素的一个或多个事件绑定一次性事件处理函数。要删除通过one()绑定的事件,请使用unbind()或off()函数。
举例说明:
我们为上述HTML中的按钮绑定一次性的click事件:
此外,我们还可以同时绑定多个事件,并为事件处理函数传递一些附加的数据,我们可以通过jQuery为事件处理函数传入的参数event(Event事件对象)来进行处理:
<span style="color: #0000ff;">var obj = <span style="color: #0000ff;">event<span style="color: #000000;">.data;
<span style="color: #0000ff;">var $me = $(<span style="color: #0000ff;">this<span style="color: #000000;">);
<span style="color: #0000ff;">if(<span style="color: #0000ff;">event.type == <span style="color: #800000;">"<span style="color: #800000;">mouseenter<span style="color: #800000;">"<span style="color: #000000;">){
$me.html( obj.name + <span style="color: #800000;">'<span style="color: #800000;">,你碰到了隐藏关卡,获得<span style="color: #800000;">' + obj.hidden + <span style="color: #800000;">"<span style="color: #800000;">金币!<span style="color: #800000;">"<span style="color: #000000;"> );
}<span style="color: #0000ff;">else<span style="color: #000000;">{
$me.html( <span style="color: #800000;">'<span style="color: #800000;">你已通过该关卡!<span style="color: #800000;">'<span style="color: #000000;"> );
}
});
11,triggertrigger()函数用于在每个匹配元素上触发指定类型的事件。使用该函数可以手动触发执行元素上绑定的事件处理函数,也会触发执行该元素的默认行为。以表单元素