jQuery技术

jQuery 快速入门教程(5)

字号+ 作者:H5之家 来源:H5之家 2015-10-03 15:15 我要评论( )

而bind()、delegate()、on()等方法,是通过传入指定事件名称的字符串来区分事件类型的,甚至你还可以为自定义的事件绑定处理函数。下面以bind()方法举例,其它方法也与此类似: $(selector).bind( dblclick, handle

而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

jQuery还对Ajax进行了封装了,我们可以非常方便地发送一个Ajax请求,并对响应进行处理。

$.ajax({ url: "ajax.php?action=add", type: "post", data: "username=hello&password=123456", // 附加的请求数据,也可以为对象格式 dataType: "json", success: function(data){ // 这是Ajax请求成功后执行的回调函数 // 因为dataType为json,如果服务器返回的是JSON格式数据,jQuery会将其转为对应的JS对象 // 假设data为{ msg: "Ajax请求成功", uid: 2 } alert( data.msg ); } });

$.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还为我们提供了许多的辅助工具方法,以便于我们进行各种常用的代码逻辑处理。

// 去除字符串两端的空白字符 var str1 = $.trim( " abc d " ); // "abc d" var str2 = $.trim( null ); // "" // 判断是否是数组 var isArray1 = $.isArray( [] ); // true var isArray2 = $.isArray( new Array() ); // true // 判断是否是数组 var result1 = $.isFunction( function(){} ); // true var result2 = $.isFunction( new Function() ); // true // 检索数组中是否存在指定值,并返回其第一次出现的索引 var index1 = $.inArray( 2, [ 1, 3, 5, 2, 0 ] ); // 3 var index2 = $.inArray( 3, [ 2 ] ); // -1 (不存在返回-1) // 将JSON字符串转为对应的JS对象 var jsonObj = $.parseJSON( '{ "name": "CodePlayer", "age": 18 }' ); var jsonArray = $.parseJSON( '[ 12, "CodePlayer", true ]' );遍历方法

此外,在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" ];

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 7个有用的jQuery小技巧

    7个有用的jQuery小技巧

    2016-02-26 13:02

  • jQuery制作select双向选择列表

    jQuery制作select双向选择列表

    2016-02-26 11:00

  • 全面详细的jQuery常见开发技巧手册

    全面详细的jQuery常见开发技巧手册

    2016-02-26 10:02

  • 强大的jQuery移动插件Top 10

    强大的jQuery移动插件Top 10

    2016-02-25 09:05

网友点评
/