作者:a君bb_307 | 来源:互联网 | 2023-02-05 11:43
这篇文章主要介绍了$选择器是怎么将DOM封装成jquery对象,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
前言:说到jquery不得不说的就是强大的jquery的选择器功能啦。该功能很强大,还单独分离出来sizzle模块供只需用到选择器功能的朋友使用。(该篇先不说jquery选择器的强大功能,先说说jquery是如何将DOM元素封装成jquery对象的)
一、Dom对象和jquery对象
测试
运行结果:
从中我们就可以看出区别了,$()把DOM对象封装成jquery对象,而DOM对象也就保存在jquery[0]中,这也就是为什么我们说的把jquery对象转化成DOM对象只需用jquery[0]或者jquery.get(0)了。
二、模拟jquery--根据id,封装jquery对象
这里先简化一下,看看封装jquery对象的一部分过程
测试
②输出结果:(火狐浏览器上打开的)
这里需要注意的是,chrome浏览器在显示上有会些不同
jquery显示的是类数组对象形态。
③、解析
对于上面代码有很多看不明白的朋友建议看一下我前面写的文章【jquery源码】开始学习源码之前需要解决的一些问题。
正则匹配我是直接复制了源码中的正则,可以输出该正则处理后的结果来看看。
三、模拟jquery--根据标签名,封装jquery对象
直接上代码
输出结果:
这里只是单纯的模拟,jq处理起来远远没有那么简单,jquery还进行了大量的判断(下面的文章会继续说这个问题)。还可以在jquery对象中发现prevObject属性,该属性保存的是上一级的查找对象。看看下面的例子就能明白了。
感谢你能够认真阅读完这篇文章,希望小编分享$选择器是怎么将DOM封装成jquery对象内容对大家有帮助,同时也希望大家多多支持编程笔记,关注编程笔记行业资讯频道,遇到问题就找编程笔记,详细的解决方法等着你来学习!