首頁 >web前端 >前端問答 >$選擇器--是如何將DOM封裝成jquery對象

$選擇器--是如何將DOM封裝成jquery對象

jacklove原創: 2018-06-11 23:01:292439瀏覽

前言：說到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(&#39;box&#39;);
	var oBox2 = document.querySelector(&#39;#box&#39;);
	var $Box = $(&#39;#box&#39;);
	
	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 = $(&#39;#box&#39;);
	console.log(&#39;这是jquery对象&#39;);
	console.log($Box);
	
	
	console.log(&#39;------分界线------&#39;);
	(function(window,undefined){  
		var jQ = function(selector){  
			return new jQ.fn.init(selector);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:&#39;2.0.0&#39;,     //jquery版本号信息
			constructor: jQ,    //添加构造器属性
			length:0,			//初始length属性
			selector:&#39;&#39;,		//初始selector属性
			init: function(selector){
				var match, elem, rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/;
				match = rquickExpr.exec( selector );
				//console.log(match);	//正则匹配找出id的值
				if ( !selector ) {	//如果selector为&#39;&#39;,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(&#39;这是模拟的对象&#39;);
	console.log($$(&#39;#box&#39;));   //输出封装的对象
</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(&#39;这是jquery对象&#39;);
	var aLi1 = $(&#39;li&#39;);
	console.log(aLi1);
	
	
	console.log(&#39;------分界线------&#39;);
	(function(window,undefined){  
		var jQ = function(selector,context){  
			return new jQ.fn.init(selector, context);  
		};  
		jQ.fn = jQ.prototype = {  
			jquery:&#39;2.0.0&#39;,     //jquery版本号信息
			constructor: jQ,    //添加构造器属性
			length:0,			//初始length属性
			selector:&#39;&#39;,		//初始selector属性
			init: function(selector, context){
				var match, elem;
				
				if ( !selector ) {	//如果selector为&#39;&#39;,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(&#39;这是模拟的对象&#39;);
	console.log($$(&#39;li&#39;));   //输出封装的对象
</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 = $(&#39;li&#39;);
	console.log(aLi1);
	
	var aLi2 = $(&#39;li&#39;,&#39;.list&#39;);
	console.log(aLi2);
	
	var aLi3 = $(&#39;.list&#39;).find(&#39;li&#39;);
	console.log(aLi3);
</script>
</body>

#本文講解了$選擇器--是如何將DOM封裝成jquery對象，更多相關內容請注意php中文網。

$選擇器--是如何將DOM封裝成jquery對象

相關文章