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 ...
随机推荐
- 多线程通信的两种方式? (可重入锁ReentrantLock和Object)
(一)Java中线程协作的最常见的两种方式: (1)利用Object的wait().notify()和notifyAll()方法及synchronized (2)使用Condition.Reentra ...
- python-3.8.0 新特性之赋值表达式
[python-3.8.0 新特性之赋值表达式] 赋值表达式的语法是这样的“ name := expression ”,形式上看和赋值语句 “ = ” 差不多,就作用上来看也雷同.也就是说 “:=” ...
- 【agc028E】High Elements（动态规划，线段树，贪心）
[agc028E]High Elements(动态规划,线段树,贪心) 题面 AtCoder 你有一个\([1,N]\)的排列\(P\). 一个长度为\(N\)的字符串\(S\)是好的,当且仅当: 两 ...
- Netty—TCP的粘包和拆包问题
一.前言 虽然TCP协议是可靠性传输协议,但是对于TCP长连接而言,对于消息发送仍然可能会发生粘贴的情形.主要是因为TCP是一种二进制流的传输协议,它会根据TCP缓冲对包进行划分.有可能将一个大数据包 ...
- Koa 中间件的执行
Node.js 中请求的处理 讨论 Koa 中间件前,先看原生 Node.js 中是如何创建 server 和处理请求的. node_server.js const http = require(&q ...
- Core源码（三） Lazy<T>
Lazy<T>解决什么问题? 1.大对象加载 考虑下面的需求,有个对象很大,创建耗时,并且要在托管堆上分配一大块空间.我们当然希望,用到它的时候再去创建.也就是延迟加载,等到真正需要它的时 ...
- centos7下通过yum方式安装docker环境
1.移除旧版本: yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ ...
- opencv::BackgroundSubtraction基本原理
背景消除 BS算法 - 图像分割(GMM – 高斯混合模型) - 机器学习(KNN –K个最近邻) BackgroundSubtractor (父类) - BackgroundSubtractorMO ...
- 从《华为的冬天》到AI的冬天 | 甲子光年
知难不难,惶者生存. 作者 | DougLong 编辑 | 火柴Q.甲小姐 *本文为甲子光年专栏作家DougLong独家稿件.作者为AI从业者.Gary Marcus<Rebooting AI& ...
- Android JS打开原生应用
设置App通过网页JS,唤醒打开本地应用. 在AndroidManifest 中,在应用启动页配置下,添加android:exported="true",设置category 添加 ...