您的位置:时时app平台注册网站 > 彩世界网址 > 读jQuery之五_jquery_脚本之家【彩世界网址】

读jQuery之五_jquery_脚本之家【彩世界网址】

2019-11-28 03:08

B

D

A

$ 返回jq对象集合的第一个元素, 即Div[id=a],结构:{0:div,length:1,...};//...表示省略了其它属性 $ 返回jq对象集合的最后的元素, 即Div[id=d],结构:{0:div,length:1,...}; $ 返回jq对象匹配的第三个元素, 即Div[id=c],结构:{0:div,length:1,...}; 查看源码得知: 1,first,last方法中直接调用了eq方法。 2,eq方法中调用了slice方法。 因此slice方法才是根本。该方法让我们自然想到数组的slice方法,实际上jQuery正是利用Array的push和slice方法。 1,利用Array.prototype.slice方法将 伪数组 转成 数组 2,利用Array.prototype.push方法将 数组 转成 伪数组 当然jQuery中的slice方法调用了pushStack。我这里简写了slice,如下 复制代码 代码如下: slice : function;//关键的一句,构造一个新的jq对象, var ary = slice.apply;//这里的this是jq对象,根据参数转成数组子集 push.apply;//转成jq对象,即伪数组形式 return ret; }, 相关: 将HTMLCollection/NodeList/伪数组转换成数组 zChain-05.rar

jQuery的$调用后想要获取DOM元素可以使用get方法,如下 复制代码 代码如下: // 方式1 $; // 获取页面中第二个div 当然,也可以使用数组索引方式获取 复制代码 代码如下: // 方式2 $[1]; // 获取页面中第二个div 上面两种方式都可以获取某一个特定的DOM元素,而获取DOM元素集合却要使用toArray方法 复制代码 代码如下: $; // 返回页面中所有的div,依次放入数组中 看看get方法的源码 复制代码 代码如下: get: function { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this[ this.length num ] : this[ num ] ); }, get内就一个三元运算符,即两个分支。 分支1,当不传参数时将获取所有DOM元素 分支2,当num为数字时返回指定的某一个DOM元素 分支1实际是将jQuery对象转成真正的数组,分支2实际是取“伪数组”元素。下面以$来描述整个调用过程 1,获取页面div元素(document.getElementsByTagName 2,将集合HTMLCollection/NodeList转成真正的数组 3,将数组转成伪数组/ArrayLike如图

C

第一步是选择器做的事;第二步将HTMLCollection/NodeList转成数组以前讨论过;第三步又将数组转成伪数组/ArrayLike,只需调用下数组的push即可。也许下面的例子容易理解复制代码 代码如下: var jqObj = {0:'one',1:'two',2:'three',length:3}, // 伪数组 ary = ['one','two','three']; //数组 // 将伪数组转成数组 function jqObjToArray{ var slice = Array.prototype.slice; return slice.call; } // 将数组转成伪数组 function ArrayToJqObj{ var obj = {}, push = Array.prototype.push; push.apply; return obj; } console.log; console.log; jQuery还提供了first/last/eq/slice方法,它们与上面提到的get/toArray不同。它们返回的是jQuery对象而非返回HTMLElement。如下html片段 复制代码 代码如下:

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:读jQuery之五_jquery_脚本之家【彩世界网址】

关键词: