读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压缩工具下载集合
Mar 06 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
js常用代码段收集
Oct 28 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
jquery如何实现锚点链接之间的平滑滚动
Dec 02 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
jq checkbox 的全选并ajax传参的实例
Apr 01 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
JavaScript实现简单随机点名器
Nov 21 Javascript
原生JS封装vue Tab切换效果
Apr 28 Vue.js
读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/02 PHP
Yii2 rbac权限控制之rule教程详解
2016/06/23 PHP
php常用数组函数实例小结
2016/12/29 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
有趣的javascript数组定义方法
2010/09/10 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
常用的JavaScript WEB操作方法分享
2015/02/28 Javascript
JavaScript Function函数类型介绍
2015/04/08 Javascript
JavaScript截取、切割字符串的技巧
2016/01/07 Javascript
jQuery简单获取键盘事件的方法
2016/01/22 Javascript
深入php面向对象、模式与实践
2016/02/16 Javascript
Bootstrap模态框水平垂直居中与增加拖拽功能
2016/11/09 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
canvas实现刮刮卡效果
2017/03/14 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
初识 Vue.js 中的 *.Vue文件
2017/11/22 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
python查询mysql中文乱码问题
2014/11/09 Python
python删除指定类型(或非指定)的文件实例详解
2015/07/06 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python 自动去除空行的实例
2018/07/24 Python
Python socket实现的简单通信功能示例
2018/08/21 Python
pytorch常见的Tensor类型详解
2020/01/15 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
国际领先的在线时尚服装和配饰店:DressLily
2019/03/03 全球购物
捷克家电和家具购物网站:OKAY.cz
2020/07/23 全球购物
军训感想500字
2014/02/20 职场文书
大学生预备党员自我评价
2015/03/04 职场文书
Docker下安装Oracle19c
2022/04/13 Servers