读jQuery之五(取DOM元素)


Posted in Javascript onJune 20, 2011

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对象)
如图

读jQuery之五(取DOM元素)


第一步是选择器做的事;
第二步将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/伪数组转换成数组
zChain-05.rar

Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
js通过地址栏给action传值(中文乱码全是问号)
May 02 Javascript
JS获取键盘上任意按键的值(实例代码)
Nov 12 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
js读取本地文件的实例
Dec 22 Javascript
Vue自定义属性实例分析
Feb 23 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
Element中Slider滑块的具体使用
Jul 29 Javascript
读jQuery之四(优雅的迭代)
Jun 20 #Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 #Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 #Javascript
functional继承模式 摘自javascript:the good parts
Jun 20 #Javascript
jQuery数组处理方法汇总
Jun 20 #Javascript
jQuery UI AutoComplete 使用说明
Jun 20 #Javascript
jQuery 源码分析笔记(3) Deferred机制
Jun 19 #Javascript
You might like
php单例模式示例分享
2015/02/12 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
使用UglifyJS合并/压缩JavaScript的方法
2012/03/07 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery解析JSON数据示例代码
2014/03/17 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
Bootstrap每天必学之按钮(一)
2015/11/24 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
JavaScript中清空数组的方法总结
2016/12/02 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
Angular2学习教程之ng中变更检测问题详解
2017/05/28 Javascript
javascript填充默认头像方法
2018/02/22 Javascript
vue watch深度监听对象实现数据联动效果
2018/08/16 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JavaScript冒泡算法原理与实现方法深入理解
2020/06/04 Javascript
[26:40]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第一局
2016/02/25 DOTA
python生成器的使用方法
2013/11/21 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
Python 判断 有向图 是否有环的实例讲解
2018/02/01 Python
python实现快速排序的示例(二分法思想)
2018/03/12 Python
numpy.linspace 生成等差数组的方法
2018/07/02 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
python打包成so文件过程解析
2019/09/28 Python
python实现两个字典合并,两个list合并
2019/12/02 Python
阿姆斯特丹城市卡:Amsterdam Pass
2019/12/01 全球购物
毕业证丢失证明
2014/01/15 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
汽车车尾标语大全
2015/08/11 职场文书
班主任培训研修日志
2015/11/13 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL