$選擇器是怎么將DOM封裝成jquery對(duì)象

發(fā)布時(shí)間：2020-09-28 16:11:45 來(lái)源：億速云閱讀：165 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了$選擇器是怎么將DOM封裝成jquery對(duì)象，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

前言：說(shuō)到j(luò)query不得不說(shuō)的就是強(qiáng)大的jquery的選擇器功能啦。該功能很強(qiáng)大，還單獨(dú)分離出來(lái)sizzle模塊供只需用到選擇器功能的朋友使用。（該篇先不說(shuō)jquery選擇器的強(qiáng)大功能，先說(shuō)說(shuō)jquery是如何將DOM元素封裝成jquery對(duì)象的）

一、Dom對(duì)象和jquery對(duì)象

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">測(cè)試</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>

運(yùn)行結(jié)果：

從中我們就可以看出區(qū)別了，$()把DOM對(duì)象封裝成jquery對(duì)象，而DOM對(duì)象也就保存在jquery[0]中，這也就是為什么我們說(shuō)的把jquery對(duì)象轉(zhuǎn)化成DOM對(duì)象只需用jquery[0]或者jquery.get(0)了。

二、模擬jquery--根據(jù)id，封裝jquery對(duì)象

這里先簡(jiǎn)化一下，看看封裝jquery對(duì)象的一部分過(guò)程

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<p id="box">測(cè)試</p>
<script>
	var $Box = $('#box');
	console.log('這是jquery對(duì)象');
	console.log($Box);
	
	
	console.log('------分界線(xiàn)------');
	(function(window,undefined){  
		var jQ = function(selector){  
			return new jQ.fn.init(selector);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:'2.0.0',     //jquery版本號(hào)信息
			constructor: jQ,    //添加構(gòu)造器屬性
			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('這是模擬的對(duì)象');
	console.log($$('#box'));   //輸出封裝的對(duì)象
</script>
</body>

②輸出結(jié)果:（火狐瀏覽器上打開(kāi)的）

$選擇器是怎么將DOM封裝成jquery對(duì)象

這里需要注意的是，chrome瀏覽器在顯示上有會(huì)些不同

$選擇器是怎么將DOM封裝成jquery對(duì)象

jquery顯示的是類(lèi)數(shù)組對(duì)象形態(tài)。

③、解析

對(duì)于上面代碼有很多看不明白的朋友建議看一下我前面寫(xiě)的文章【jquery源碼】開(kāi)始學(xué)習(xí)源碼之前需要解決的一些問(wèn)題。

正則匹配我是直接復(fù)制了源碼中的正則，可以輸出該正則處理后的結(jié)果來(lái)看看。

$選擇器是怎么將DOM封裝成jquery對(duì)象

三、模擬jquery--根據(jù)標(biāo)簽名，封裝jquery對(duì)象

直接上代碼

<body>
<ul class="list"> 
    <li>測(cè)試1</li>
    <li>測(cè)試2</li>
    <li>測(cè)試3</li>
    <li>測(cè)試4</li>
</ul>
<script>
	
	console.log('這是jquery對(duì)象');
	var aLi1 = $('li');
	console.log(aLi1);
	
	
	console.log('------分界線(xiàn)------');
	(function(window,undefined){  
		var jQ = function(selector,context){  
			return new jQ.fn.init(selector, context);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:'2.0.0',     //jquery版本號(hào)信息
			constructor: jQ,    //添加構(gòu)造器屬性
			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('這是模擬的對(duì)象');
	console.log($$('li'));   //輸出封裝的對(duì)象
</script>
</body>

輸出結(jié)果：

$選擇器是怎么將DOM封裝成jquery對(duì)象

這里只是單純的模擬，jq處理起來(lái)遠(yuǎn)遠(yuǎn)沒(méi)有那么簡(jiǎn)單，jquery還進(jìn)行了大量的判斷（下面的文章會(huì)繼續(xù)說(shuō)這個(gè)問(wèn)題）。還可以在jquery對(duì)象中發(fā)現(xiàn)prevObject屬性，該屬性保存的是上一級(jí)的查找對(duì)象。看看下面的例子就能明白了。

<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<ul class="list"> 
    <li>測(cè)試1</li>
    <li>測(cè)試2</li>
    <li>測(cè)試3</li>
    <li>測(cè)試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對(duì)象

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享$選擇器是怎么將DOM封裝成jquery對(duì)象內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

$選擇器是怎么將DOM封裝成jquery對(duì)象

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽