读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 相关文章推荐
网页上的Javascript编辑器和代码格式化
Apr 25 Javascript
js querySelector和getElementById通过id获取元素的区别
Apr 20 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
Jul 10 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
记一次webpack3升级webpack4的踩坑经历
Jun 12 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
Sep 12 Javascript
Vue实现将数据库中带html标签的内容输出(原始HTML(Raw HTML))
Oct 28 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
微信小程序自定义tabBar的踩坑实践记录
Nov 06 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/07/29 PHP
php curl常用的5个经典例子
2017/01/20 PHP
js 深拷贝函数
2008/12/04 Javascript
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
2013/07/09 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
javascript判断移动端访问设备并解析对应CSS的方法
2015/02/05 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
使用vue-router beforEach实现判断用户登录跳转路由筛选功能
2018/06/25 Javascript
JavaScript函数节流和函数去抖知识点学习
2018/07/31 Javascript
layui table 参数设置方法
2018/08/14 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
微信小程序request请求封装,验签代码实例
2019/12/04 Javascript
vue.config.js中配置Vue的路径别名的方法
2020/02/11 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
[02:53]DOTA2英雄基础教程 山岭巨人小小
2013/12/09 DOTA
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
在Python中测试访问同一数据的竞争条件的方法
2015/04/23 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python 多线程重启方法
2019/02/18 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
学前教育毕业生自荐信
2013/10/29 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
毕业生自荐书模版
2014/01/04 职场文书
学子宴答谢词
2014/01/25 职场文书
小区停车场管理制度
2014/01/27 职场文书
报关专员求职信范文
2014/02/22 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
人事任命书范文
2014/06/04 职场文书
教师个人年度总结
2015/02/11 职场文书
java泛型通配符详解
2021/07/25 Java/Android