当前位置:Gxlcms > JavaScript > $选择器--是如何将DOM封装成jquery对象

$选择器--是如何将DOM封装成jquery对象

时间:2021-07-01 10:21:17 帮助过:29人阅读

前言:说到jquery不得不说的就是强大的jquery的选择器功能啦。该功能很强大,还单独分离出来sizzle模块供只需用到选择器功能的朋友使用。(该篇先不说jquery选择器的强大功能,先说说jquery是如何将DOM元素封装成jquery对象的)

一、Dom对象和jquery对象

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
	var oBox = document.getElementById('box');
	var oBox2 = document.querySelector('#box');
	var $Box = $('#box');
	
	console.log(oBox);
	console.log(oBox2);
	console.log($Box);
</script>
</body>
</html>

运行结果:


从中我们就可以看出区别了,$()把DOM对象封装成jquery对象,而DOM对象也就保存在jquery[0]中,这也就是为什么我们说的把jquery对象转化成DOM对象只需用jquery[0]或者jquery.get(0)了。


二、模拟jquery--根据id,封装jquery对象

这里先简化一下,看看封装jquery对象的一部分过程

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">测试</p>
<script>
	var $Box = $('#box');
	console.log('这是jquery对象');
	console.log($Box);
	
	
	console.log('------分界线------');
	(function(window,undefined){  
		var jQ = function(selector){  
			return new jQ.fn.init(selector);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:'2.0.0',     //jquery版本号信息
			constructor: jQ,    //添加构造器属性
			length:0,			//初始length属性
			selector:'',		//初始selector属性
			init: function(selector){
				var match, elem, rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
				match = rquickExpr.exec( selector );
				//console.log(match);	//正则匹配找出id的值
				if ( !selector ) {	//如果selector为'',null,undefind直接退出操作
					return this;
				}
				elem = document.getElementById(match[2]);
				this[0] = elem;
				this.context=document;
				this.length = 1;
				this.selector = selector;
				
				return this;
			} 
		}   
		jQ.fn.init.prototype = jQ.fn;  
		  
		window.$$ = jQ;    	
	})( window );  
	
	console.log('这是模拟的对象');
	console.log($$('#box'));   //
输出封装的对象 </script> </body>

②输出结果:(火狐浏览器上打开的)


这里需要注意的是,chrome浏览器在显示上有会些不同


jquery显示的是类数组对象形态。

③、解析

对于上面代码有很多看不明白的朋友建议看一下我前面写的文章【jquery源码】开始学习源码之前需要解决的一些问题。

正则匹配我是直接复制了源码中的正则,可以输出该正则处理后的结果来看看。



三、模拟jquery--根据标签名,封装jquery对象

直接上代码

<body>
<ul class="list"> 
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
    <li>测试4</li>
</ul>
<script>
	
	console.log('这是jquery对象');
	var aLi1 = $('li');
	console.log(aLi1);
	
	
	console.log('------分界线------');
	(function(window,undefined){  
		var jQ = function(selector,context){  
			return new jQ.fn.init(selector, context);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:'2.0.0',     //jquery版本号信息
			constructor: jQ,    //添加构造器属性
			length:0,			//初始length属性
			selector:'',		//初始selector属性
			init: function(selector, context){
				var match, elem;
				
				if ( !selector ) {	//如果selector为'',null,undefind直接退出操作
					return this;
				}
				elem = document.getElementsByTagName(selector);
				for(var i =0,len=elem.length; i<len; i++){
					this[i] = elem[i];
				}
				this.context=document;
				this.length = elem.length;
				this.selector = selector;
				
				return this;
			} 
		}   
		jQ.fn.init.prototype = jQ.fn;  
		  
		window.$$ = jQ;    	
	})( window );  
	
	console.log('这是模拟的对象');
	console.log($$('li'));   //
输出封装的对象 </script> </body>

输出结果:

这里只是单纯的模拟,jq处理起来远远没有那么简单,jquery还进行了大量的判断(下面的文章会继续说这个问题)。还可以在jquery对象中发现prevObject属性,该属性保存的是上一级的查找对象。看看下面的例子就能明白了。

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<ul class="list"> 
    <li>测试1</li>
    <li>测试2</li>
    <li>测试3</li>
    <li>测试4</li>
</ul>
<script>
	var aLi1 = $('li');
	console.log(aLi1);
	
	var aLi2 = $('li','.list');
	console.log(aLi2);
	
	var aLi3 = $('.list').find('li');
	console.log(aLi3);
</script>
</body>



本文讲解了$选择器--是如何将DOM封装成jquery对象,更多相关内容请关注Gxl网。

相关推荐:

css3动画导航栏3D

requests库的基本使用

前端调用微信支付接口

以上就是$选择器--是如何将DOM封装成jquery对象的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行