发布于 2017-07-17 15:27:50 | 15 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的jQuery示例,程序狗速度看过来!

jQuery javascript框架

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/伪数组转换成数组
 



相关阅读 :
读jQuery之五(取DOM元素)
jquery选择器排除某个DOM元素的方法(实例演示)
读jQuery之十四 (触发事件核心方法)
读jQuery之十三 添加事件和删除事件的核心方法
读jQuery之十二 删除事件核心方法
读jQuery之十一 添加事件核心方法
读jQuery之十 事件模块概述
读jQuery之九 一些瑕疵说明
读jQuery之七 判断点击了鼠标哪个键的代码
基于jquery的关于动态创建DOM元素的问题
JQuery判断radio(单选框)是否选中和获取选中值方法总结
jquery处理checkbox(复选框)是否被选中实例代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务