读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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
jQuery each()方法的使用方法
Mar 18 Javascript
jquery 学习笔记一
Apr 07 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
这段js代码得节约你多少时间
Dec 20 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
基于Proxy的小程序状态管理实现
Jun 14 Javascript
JavaScript实现简单的弹窗效果
May 19 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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 google或baidu分页代码
2009/11/26 PHP
php将数据库中所有内容生成静态html文档的代码
2010/04/12 PHP
php中的比较运算符详解
2013/10/28 PHP
PHP crc32()函数讲解
2019/02/14 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
jquery插件jTimer(jquery定时器)使用方法
2013/12/23 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
2014/05/12 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
Bootstrap每天必学之按钮
2015/11/26 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
AngularJs基本特性解析(一)
2016/07/21 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
2017/03/23 jQuery
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
vue 左滑删除功能的示例代码
2019/01/28 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
2020/09/11 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python中序列的修改、散列与切片详解
2017/08/27 Python
使用python画个小猪佩奇的示例代码
2018/06/06 Python
从请求到响应过程中django都做了哪些处理
2018/08/01 Python
解决python中遇到字典里key值为None的情况,取不出来的问题
2018/10/17 Python
使用Python实现画一个中国地图
2019/11/23 Python
CSS3中Animation动画属性用法详解
2016/07/04 HTML / CSS
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
温泉秘密:Onsen Secret
2020/07/06 全球购物
受伤赔偿协议书
2014/09/24 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
法律意见书范文
2015/05/20 职场文书
五年级数学教学反思
2016/02/16 职场文书
竞聘书的秘诀
2019/04/02 职场文书