jQuery 源码解析(七) jQuery对象和DOM对象的互相转换
jQuery对象是一个类数组对象，它保存的是对应的DOM的引用，我们可以直接用[]获取某个索引内的DOM节点，也可以用get方法获取某个索引内的DOM节点，还可以用toArray()方法把jQuery对象一次性转换成一个数组，例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
var jObject = $('p');
console.log(jObject[0].innerHTML) //输出:1
console.log(jObject[1].innerHTML) //输出:2
console.log(jObject.get(2).innerHTML) //输出:3
console.log(jObject.toArray()) //输出:Array(3) [ p, p, p ] ;每个元素都是一个DOM节点，等于对应的p元素
</script>
</body>
</html>
将DOM对象转换为jQuery对象就更方便了，直接放到jQuery的构造器内即可，如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
var p = document.getElementsByTagName('p'),
result = [];
for(let i = 0;i<p.length;i++) result.push(i) //getElementsByTagName获取的是HTMLCollection对象，也是个类数组，我们把它转换为数组格式 console.log( $(p) instanceof $ ) //输出true ;表示$(p)是一个jQuery对象
console.log( $(p).size() ) //输出:3 ;因为p内有3个DOM元素 console.log( $(p[0]) instanceof $ ) //输出true ;表示$(p)是一个jQuery对象
console.log( $(p[0]).size() ) //输出:1 ;因为我们只传入一个p[0]，只有一个DOM节点
</script>
</body>
</html>
输出如下:
原因在代码里注释得挺详细了,嗯，就这样
源码分析
writer by:大沙漠 QQ:22969969
DOM转换成jQuery对象都是在jQuery内部的init()函数内实现的，如下:
init: function( selector, context, rootjQuery ) {
/*略*/
// Handle $(DOMElement)
if ( selector.nodeType ) { //selector有属性nodeType，则认为selector是DOM元素,例如:$(document.getELementById('d'))
this.context = this[0] = selector; //保存该DOM节点的引用
this.length = 1; //设置length属性为1
return this; //返回this,以支持链式操作
}
/*略*/
return jQuery.makeArray( selector, this ); //这里是最后的逻辑，如果selector是数组或伪数组
},
makeArray是jQuery内部的一个函数，用于把一个类数组转换成真正的数据，如下:
makeArray: function( array, results ) { //将一个类数组对象转换为真正的数组
var ret = results || []; //如果results不存在则修正为空数组，初始化jQuery执行到这里时这里的result等于jQuery对象，也就是上面传进来的this
if ( array != null ) { //过滤参数array是null、undefined的情况。
// The window, strings (and functions) also have 'length'
// Tweaked logic slightly to handle Blackberry 4.7 RegExp issues #6930
var type = jQuery.type( array );
if ( array.length == null || type === "string" || type === "function" || type === "regexp" || jQuery.isWindow( array ) ) { //如果array没有属性length 或者 参数array是字符串，或者是函数，或者是正则，或者是Window对象
push.call( ret, array ); //认为参数array不是数组，也不是类数组对象，调用数组方法push()把该参数插入返回值ret的末尾。
} else {
jQuery.merge( ret, array ); //否则认为参数array是数组或类数组对象，调用方法jQuery.merge()把该参数合并到返回值ret中
}
}
return ret;
},
最后返回该数组，因为我们在第二个参数传递了this,因此makeArray最后会返回this
对于jQuery对象转换为DOM对象来说，由于jQuery本身就是个类数组对象，因此，我们可以直接用[]获取索引，对于get和toArray方法来说，这些操作定义在jQuery的原型上,也就是jQuery.fn上的，如下:
jQuery.fn = jQuery.prototype = { //重写jQueyr.fn
/*略*/
toArray: function() { //将当前jQuery对象转换为真正的数组，转换后的数组包含了所有元素。
return slice.call( this, 0 );
},
get: function( num ) { //返回当前jQuery 对象中指定位置的元素或包含了全部元素的数组,
return num == null ?
// Return a 'clean' array
this.toArray() :
// Return just the object
( num < 0 ? this[ this.length + num ] : this[ num ] ); //直接返回this[num]，也就是和我们用[]是一样的，只是封装了一下
},
/*略*/
}
我们可以看到对于get来说，就是直接从this[]上获取的，而toArray则调用了数组了slice方法，将类数组转换成真实的数组
jQuery 源码解析(七) jQuery对象和DOM对象的互相转换的更多相关文章
- jquery源码解析：jQuery静态属性对象support详解
jQuery.support是用功能检测的方法来检测浏览器是否支持某些功能.针对jQuery内部使用. 我们先来看一些源码: jQuery.support = (function( support ) ...
- 三.jQuery源码解析之jQuery的框架图
这张图片是对jQuery源码截图,一点一点拼出来的. 现在根据这张图片来对jQuery框架做一些说明. 一.16~9404行可以发现,最外层是一个自调用函数.当jQuery初始化时,这个自调用函数包含 ...
- jquery源码解析：jQuery数据缓存机制详解2
上一课主要讲了jQuery中的缓存机制Data构造方法的源码解析,这一课主要讲jQuery是如何利用Data对象实现有关缓存机制的静态方法和实例方法的.我们接下来,来看这几个静态方法和实例方法的源码解 ...
- jquery源码解析：jQuery数据缓存机制详解1
jQuery中有三种添加数据的方法,$().attr(),$().prop(),$().data().但是前面两种是用来在元素上添加属性值的,只适合少量的数据,比如:title,class,name等 ...
- jquery源码解析：jQuery工具方法when详解
我们先来看when方法是如何使用的: var cb = $.when(); //when方法也是返回一个延迟对象,源码是return deferred.promise();返回的延迟对象不能修改状 ...
- jquery源码解析：jQuery工具方法Callbacks详解
我们首先来讲下Callbacks是如何使用的:第一个例子 function a(){} function b(){} var cb = $.Callbacks(); cb.add(a); cb.add ...
- jquery源码解析：jQuery队列操作queue方法实现的原理
我们先来看一下jQuery中有关队列操作的方法集: 从上图可以看出,既有静态方法,又有实例方法.queue方法,相当于数组中的push操作.dequeue相当于数组的shift操作.举个例子: fun ...
- jquery源码解析：val方法和valHooks对象详解
这一课,我们将讲解val方法,以及对value属性的兼容性处理,jQuery中通过valHooks对象来处理. 首先,我们先来看下val方法的使用: $("#input1").va ...
- jquery源码解析：jQuery延迟对象Deferred（工具方法）详解2
请接着上一课继续看. $.Deferred()方法中,有两个对象,一个是deferred对象,一个是promise对象. promise对象有以下几个方法:state,always,then,prom ...
随机推荐
- js获取计算机操作系统版本
如题,想要获取当先计算机的操作系统和版本号的话,可以用如下方法. 首先,创建osversion.js文件,文件里面的代码如下 var osData = [ { name: 'Windows 2000' ...
- PHPStorm设置等号对齐
为了代码的美观,我们常常会把代码等号设置对齐,手动对齐的效率很低,PHPStrom提供了快捷键来一键对齐. 首先设置PHPStorm 设置完PHPStorm后,使用快捷键Command+Option+ ...
- 【UOJ#242】【UR#16】破坏蛋糕（计算几何）
[UOJ#242][UR#16]破坏蛋糕(计算几何) 题面 UOJ 题解 为了方便,我们假定最后一条直线是从上往下穿过来的,比如说把它当成坐标系的\(y\)轴. 于是我们可以处理出所有交点,然后把它们 ...
- angular 前端路由不生效解决方案
angular 前端路由不生效解决方案 Intro 最近使用 Angular 为我的活动室预约项目开发一个前后端分离的客户端,在部署上遇到了一个问题,前端路由不生效,这里记录一下.本地开发正常,但是部 ...
- Fiddler 插件开发，使用 WPF 作为 UI 控件
Fiddler 插件的 UI,本身使用的 WinForm,这个例子是使用 WinForm 中的 WPF 容器,将 WPF 控件作为 Fiddler 插件的 UI 使用. 为什么使用 WPF ?为了自适 ...
- asp.net 关于gridview使用的一些小技巧
gridview中嵌套控件示例 —— 添加了一个linkbutton 前台: <asp:GridView ID="gv2" runat="server" ...
- python 安装impala包
一路安装就可以 .pip install six .pip install bit_array .pip install thriftpy .pip install thrift_sasl .pip ...
- 多线程学习三：Thread API，ThreadLocal，synchronized，volatile和Condition
一.Thread API: setDefaultUncaughtExceptionHandler(Thread.UncaughtExceptionHandler eh) 首先要了解什么是Thread. ...
- PHP mysqli_kill MySQLi 函数
mysqli_kill - 让服务器杀掉一个 MySQL 线程 语法:mysqli_kill ( mysqli $link , int $processid ) 本函数可以用来让服务器杀掉 proce ...
- Java的包
Java 包 Java面向对象的核心的概念:类.接口.抽象类.对象:[主体] 包的定义: 指的是一个程序的目录,在最早的时候,如果要开发一个程序,只需要定义一个Java文件,而后在这个文件中编写所需要 ...