這篇文章主要介紹了$選擇器是怎么將DOM封裝成jquery對象，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
前言：說到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對象內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
