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 ...
随机推荐
- redis集群之Cluster
RedisCluster 是 Redis 的亲儿子,它是 Redis 作者自己提供的 Redis 集群化方案. 相对于 Codis 的不同,它是去中心化的,如图所示,该集群有三个 Redis 节点组成 ...
- 控制FlowDocumentScrollViewer滚动到最下方
原文发布于:https://www.chenxublog.com/2019/07/14/contrlo-flowdocumentscrollviewer-to-bottom.html 由于我在llco ...
- Vue中v-on的指令以及一些其他指令
1.v-on的基本使用 <div id="app"> <!-- 使用事件绑定的简写形式 --> <input type="button&qu ...
- FCC---Create a More Complex Shape Using CSS and HTML---一个粉色爱心
One of the most popular shapes in the world is the heart shape, and in this challenge you'll create ...
- 初始HTML_表格
Html表格 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <ti ...
- 六个office免费学习的精品教程 office自学教程让你从小白到高手
今天给大家分享六个免费学习的精品教程,包括了word,ppt,excel常用的办公三剑客,学会这三个让你办公无忧,也能让你靠这些技术找到一份好工作,这些office自学教程让你从小白到高手. 一.PP ...
- MySQL事务和锁——《MySQL DBA工作笔记》
MySQL事务 事务存在的原因 事务存在的目的:保证用户对数据操作对数据是安全的.(比如说银行卡余额) 事务的特性--ACID 原子性:一个事务要么全部执行,要么不执行 一致性:事务开始和结束时,数据 ...
- Troubleshooting ORA-01555/ORA-01628/ORA-30036 During Export and Import (Doc ID 1579437.1)
Troubleshooting ORA-01555/ORA-01628/ORA-30036 During Export and Import (Doc ID 1579437.1) APPLIES TO ...
- [日常] git版本回退
还没有push到远程的时候,版本回退的测试如下 先克隆一个空的测试仓库,这是我自己在gitlab里创建的空仓库git clone http://192.168.1.114:8090/admintsh/ ...
- JAVA 中 Map 与实体类相互转换的简单方法
1. 在 pom.xml 中引入依赖包 <dependency> <groupId>com.alibaba</groupId> <artifactId> ...