关于jQuery中的each方法(jQuery到底干了什么)_jquery

1. 估计很多人都会用到jQuery中的each方法。

那就来看一看jQuery都干了些什么。

找到jquery中的each源码:

复制代码 代码如下:

each: function( object, callback, args ) {
var name, i = 0,
length = object.length,
isObj = length === undefined || jQuery.isFunction( object );

if ( args ) {
if ( isObj ) {
for ( name in object ) {
if ( callback.apply( object[ name ], args ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.apply( object[ i++ ], args ) === false ) {
break;
}
}
}

// A special, fast, case for the most common use of each
} else {
if ( isObj ) {
for ( name in object ) {
if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
break;
}
}
} else {
for ( ; i < length; ) {
if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
break;
}
}
}
}

return object;
},

这段代码还是比较简单的,应该没什么问题.

为了测试这个东西,我写了下面一段js;

复制代码 代码如下:

$.each($(".demo"),function(){
console.log("show");
});

然后再加一段html:

复制代码 代码如下:

<a href="" class="demo"></a>
<a href="" class="demo"></a>
<a href="" class="demo"></a>

然后拿着jQuery的源码来调试,以为能得到正确的结果。可是很遗憾。
 
可以看到,这里的object竟然不是我所想要的那三个html对象,竟然是js内置的8种数据类型。

之后在jquery的源码中加了一段代码:

复制代码 代码如下:

console.log(Object.prototype.toString(object));
console.log(length);

之后的输入如下:
 
也就是说在文档加载的时候,jQuery会用each遍历dom对象,即使没有使用

复制代码 代码如下:

$(function(){
});

当遍历指定对象之后,依旧会继续冒泡遍历父级元素。

2. 根据jQuery的源码使用回调函数参数

复制代码 代码如下:

$.each($(".demo"),function(a,b){
console.log(a + "" + $(a).attr("class"));
})

从源码可以看到:

复制代码 代码如下:

callback.call( object[ i ], i, object[ i++ ] )

最后都将当前对象通过call方法传递给了回调函数,那么就可以像上面一样去使用当前对象中的属性。当然也可以直接用this来调用。

如果说复杂些的东西,比如,这里我是将$(".demo")作为object传递进去给$.each()

如里某些时候不是传递的jQuery或者html对象。而是一个Object或者array。

而在array中又存在很多其它的object或者方法。

这样就能弄出更多的效果。

3. 采用call或者apply实现回调模式.

从上面的代码可以看到:

复制代码 代码如下:

callback.call(obj,args)

复制代码 代码如下:

callback.apply([obj],args)

之类的代码,这里只需要传递callback函数,就能实现自己调用,这对于提高代码的复用程度用处不小。

但是也存在某些缺点,比如代码可读性降低,耦合程度增加等。

偶有所得,以记录之,以防忘记!

时间: 2024-08-31 21:08:39

关于jQuery中的each方法(jQuery到底干了什么)_jquery的相关文章

jquery中页面Ajax方法$.load的功能使用介绍_jquery

load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequest)); 可以做到加载一个页面的时候,如果发生错误,根据statusText给出的状态,显示对应的提示,这对用户来说非常重要. 例子,load post 代码如下 复制代码 代码如下: <div id=btnAjaxPost>点击我</div> <div id=divResu

JQuery中节点遍历方法实例

  本文实例讲述了JQuery中节点遍历方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran

分析了一下JQuery中的extend方法实现原理

 这篇文章主要介绍了通过jQuery.extend的源码分析了一下JQuery中的extend方法实现原理以及使用方式,非常的详细,这里推荐给大家,有需要的小伙伴来参考下吧.     很久没有发表帖子了,今天突然分析了一下JQuery中的extend方法实现原理.目的为了提高自己对JQuery的认识,也想了解JavaScript高手是如何编写JS的,如有不足请指正.谢谢! 下面是JQuery.extend方法源代码:   代码如下: jQuery.extend = jQuery.fn.exten

JQUERY中的ajax方法怎样通过JSONP进行远程调用

 这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用,需要的朋友可以参考下 关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用    首先介绍下$.ajax的参数  type:请求方式 GET/POST  url:请求地址  async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步.  dataType:返回的数据类型  jsonp:传递给请求处理程序或

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

JQuery中节点遍历方法实例_jquery

本文实例讲述了JQuery中节点遍历方法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

编码-jQuery中的ajax方法获取到json数据中文会乱码

问题描述 jQuery中的ajax方法获取到json数据中文会乱码 接口如下:http://cre.mix.sina.com.cn/api/finance/topstock_display这个接口 默认返回是 gbk的编码 支持 oe=utf-8,但是xtmlhttprequest 返回的数据默认的字符编码是utf-8,后台说用oe=utf转换,求解... 解决方案 首先你这不是json,所以你需要从服务器语言上把数据转换成json再去传到前端:其次,你要把后台脚本改成utf-8编码,不知道你用

jquery中的ajax方法怎样通过JSONP进行远程调用_jquery

关于JSONP的概念和为什么要使用JSONP网上已经有很多教程,这一节主要演示下在JQUERY中的ajax方法怎样通过JSONP进行远程调用 首先介绍下$.ajax的参数 type:请求方式 GET/POST url:请求地址 async:布尔类型,默认为true 表示请求是否为异步,如果为false表示为同步. dataType:返回的数据类型 jsonp:传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:自定义的js