而bind()、delegate()、on()等方法,是通过传入指定事件名称的字符串来区分事件类型的,甚至你还可以为自定义的事件绑定处理函数。下面以bind()方法举例,其它方法也与此类似:
$("selector").bind( "dblclick", handler ); $("selector").bind( "keyup", handler ); $("selector").bind( "mouseout", handler ); // bind()等事件方法均支持为多个事件(以空格隔开)绑定同一个处理函数 $("selector").bind( "mouseenter mouseleve", function(event){ if(event.type == "mouseenter"){ // mouseenter事件的执行代码 }else if(event.type == "mouseleve"){ // mouseleve事件的执行代码 } } ); // 事件名称可以带有命名空间 $("selector").bind( "mouseout.foo", handler );关于事件的命名空间,请参考Event.namespace。jQuery还支持手动触发指定的事件。
// 触发所有匹配元素上的click事件 $("selector").trigger("click"); // 触发所有匹配元素上的change事件 $("selector").trigger("change"); // 触发所有匹配元素上绑定在foo命名空间下的mouseout事件的处理函数 $("selector").trigger("mouseout.foo");除了trigger()方法外,triggerHandler()也可以手动触发事件(请点击后者的链接以查看它们之间的区别)。
此外,我们还可以解除元素上绑定的事件处理函数。
//主要用于解除通过click()、dblclick()等直接事件方法以及bind()、one()等方法绑定的处理函数 $("selector").unbind("click"); //主要用于解除通过live()方法绑定的处理函数 $("selector").die("click"); //主要用于解除通过delegate()方法绑定的处理函数 $(document).undelegate("selector", "click"); //主要用于解除通过on()方法绑定的处理函数 $("selector").off("click"); /* 实际上,多数时候,它们是可以混用的 */关于jQuery事件处理的更多详情,请参考jQuery的事件处理方法一览表 以及 jQuery Event对象的属性和方法。
jQuery还对Ajax进行了封装了,我们可以非常方便地发送一个Ajax请求,并对响应进行处理。
$.ajax()是是jQuery中Ajax的底层实现,其它Ajax请求方法都是基于该方法实现的。
// 以GET方式发送Ajax请求 $.get("ajax.php", { username: "hello", password: "123456" }, function(data){ // 这是Ajax请求成功后执行的回调函数,就是上面$.ajax中的success选项 }); // 以POST方式发送Ajax请求 $.post("ajax.php", { username: "hello", password: "123456" }, function(data){ // 这是Ajax请求成功后执行的回调函数,就是上面$.ajax中的success选项 });关于jQuery Ajax的更多方法和细节,请参考jQuery的Ajax方法一览表。
jQuery辅助工具方法jQuery还为我们提供了许多的辅助工具方法,以便于我们进行各种常用的代码逻辑处理。
此外,在jQuery中还有几个常用的遍历函数,我们可以使用这些函数遍历数组元素或对象属性,并执行对应的回调函数。
// $.each()用于遍历数组元素或对象属性 var array = [ 12, "jQuery", true ]; $.each( array, function(i, value){ // i 表示当前迭代元素的索引或对象的属性名称 // value 表示当前迭代的数组元素或对象的属性值 // this 与 value 相同 alert( i + " = " + value ); // 如果函数return false,将终止遍历 }); // $.map()用于遍历数组元素或对象属性,并将每次执行遍历函数的返回值封装为数组返回 var obj = { name: "jQuery", age: 20, isAdmin: true }; var resultArray = $.map( obj, function(value, i){ // 注意参数顺序与each()不同 // value 表示当前迭代的数组元素或对象的属性值 // i 表示当前迭代元素的索引或对象的属性名称 // this 指向全局对象(window) if( typeof value === "number"){ return null; // 如果函数返回null或undefined,则不会添加到结果数组中 }else{ return value; } } ); // resultArray 为 [ "jQuery", true ] //$.grep()用于遍历数组元素,并根据函数的返回值(true/false)来过滤数组元素 var array2 = [ "Hello", 12, "jQuery", true ]; var resultArray2 = $.grep( array2, function(value, i){ // 注意参数顺序与each()不同 // value 表示当前迭代的数组元素 // i 表示当前迭代元素的索引 // this 指向全局对象(window) return i % 2 == 0; // 保留返回值不为false的元素 } ); // resultArray2 为 [ "Hello", "jQuery" ];