这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
使用过 Prototype.js 的同学知道 $(xx) 调用后返回的是 htmlElement 或其集合。
jQuery 的 $ 调用后想要获取 DOM 元素可以使用 get 方法,如下
- // 方式1
- $('div').get(1); // 获取页面中第二个div
当然,也可以使用数组索引方式获取
- // 方式2
- $('div')[1]; // 获取页面中第二个div
上面两种方式都可以获取某一个特定的 DOM 元素,而获取 DOM 元素集合却要使用 toArray 方法
- $('div').toArray(); // 返回页面中所有的div,依次放入数组中
看看 get 方法的源码
- get: function(num) {
- return num == null ?
- // Return a 'clean' array
- this.toArray() :
- // Return just the object
- (num < 0 ? this[this.length + num] : this[num]);
- },
get 内就一个三元运算符,即两个分支。
分支 1,当不传参数时将获取所有 DOM 元素(调用 toArray)
分支 2,当 num 为数字(索引)时返回指定的某一个 DOM 元素(数字为负数时为逆向获取)
分支 1 实际是将 jQuery 对象(伪数组)转成真正的数组,分支 2 实际是(用中括号 [])取" 伪数组 "元素。下面以 $('div') 来描述整个调用过程
1,获取页面 div 元素(document.getElementsByTagName('div'))
2,将集合 HTMLCollection/NodeList 转成真正的数组
3,将数组转成伪数组 / ArrayLike(jQuery 对象)
如图
第一步是选择器做的事;
第二步将 HTMLCollection/NodeList 转成数组以前讨论过;
第三步又将数组转成伪数组 / ArrayLike(jQuery 对象),只需调用下数组的 push 即可。
也许下面的例子容易理解
- var jqObj = {
- 0 : 'one',
- 1 : 'two',
- 2 : 'three',
- length: 3
- },
- // 伪数组(ArrayLike)
- ary = ['one', 'two', 'three']; //数组
- // 将伪数组(ArrayLike)转成数组
- function jqObjToArray(json) {
- var slice = Array.prototype.slice;
- return slice.call(json, 0);
- }
- // 将数组转成伪数组(ArrayLike)
- function ArrayToJqObj(ary) {
- var obj = {},
- push = Array.prototype.push;
- push.apply(obj, ary);
- return obj;
- }
- console.log(jqObjToArray(jqObj));
- console.log(ArrayToJqObj(ary));
jQuery 还提供了 first/last/eq/slice 方法,它们与上面提到的 get/toArray 不同。它们返回的是 jQuery 对象而非返回 HTMLElement。如下 html 片段
- <div id="a">
- A
- </div>
- <div id="b">
- B
- </div>
- <div id="c">
- C
- </div>
- <div id="d">
- D
- </div>
$('div').first() 返回 jq 对象集合的第一个元素, 即 Div[id=a],结构:{0:div,length:1,...};//... 表示省略了其它属性
$('div').last() 返回 jq 对象集合的最后的元素, 即 Div[id=d],结构:{0:div,length:1,...};
$('div').eq(2) 返回 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() {
- var ret = $(); //关键的一句,构造一个新的jq对象,
- var ary = slice.apply(this, arguments); //这里的this是jq对象,根据参数转成数组子集
- push.apply(ret, ary); //转成jq对象,即伪数组形式
- return ret;
- },
相关:
将 HTMLCollection/NodeList / 伪数组转换成数组
来源: http://www.phperz.com/article/17/0717/283019.html