前言：
說到j(luò)query不得不說的就是強(qiáng)大的jquery的選擇器功能啦。該功能很強(qiáng)大，還單獨(dú)分離出來sizzle模塊供只需用到選擇器功能的朋友使用。（該篇先不說jquery選擇器的強(qiáng)大功能，先說說jquery是如何將DOM元素封裝成jquery對(duì)象的）
一、Dom對(duì)象和jquery對(duì)象
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<div id="box">測(cè)試</div>
<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]中，這也就是為什么我們說的把jquery對(duì)象轉(zhuǎn)化成DOM對(duì)象只需用jquery[0]或者jquery.get(0)了。
二、模擬jquery--根據(jù)id，封裝jquery對(duì)象
這里先簡(jiǎn)化一下，看看封裝jquery對(duì)象的一部分過程
<body>
<script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
<div id="box">測(cè)試</div>
<script>
var Box =('#box');
console.log('這是jquery對(duì)象');
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版本號(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 ); consle.log('這是模擬的對(duì)象'); console.log(('#box')); //輸出封裝的對(duì)象
</script>
</bod>
②輸出結(jié)果:（火狐瀏覽器上打開的）
這里需要注意的是，chrome瀏覽器在顯示上有會(huì)些不同
jquery顯示的是類數(shù)組對(duì)象形態(tài)。
③、解析
對(duì)于上面代碼有很多看不明白的朋友建議看一下我前面寫的文章【jquery源碼】開始學(xué)習(xí)源碼之前需要解決的一些問題。
正則匹配我是直接復(fù)制了源碼中的正則，可以輸出該正則處理后的結(jié)果來看看。
三、模擬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('------分界線------');
(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é)果：
這里只是單純的模擬，jq處理起來遠(yuǎn)遠(yuǎn)沒有那么簡(jiǎn)單，jquery還進(jìn)行了大量的判斷（下面的文章會(huì)繼續(xù)說這個(gè)問題）。還可以在jquery對(duì)象中發(fā)現(xiàn)prevObject屬性，該屬性保存的是上一級(jí)的查找對(duì)象。
