一、前言
在前端開(kāi)發(fā)中，如果沒(méi)有用angular.js和Vue.js這類MVVM框架的話鞭莽，那么就要自己操作DOM麸祷，當(dāng)需要自己操作DOM的時(shí)候，為了兼容性和開(kāi)發(fā)效率一般都會(huì)使用封裝好的庫(kù)喷面，現(xiàn)在比較流行的庫(kù)依然是jQuery走孽。
在進(jìn)行jQuery開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)遇到的場(chǎng)景是jQuery對(duì)象轉(zhuǎn)換為原生的DOM對(duì)象以及原生DOM對(duì)象轉(zhuǎn)換為jQuery對(duì)象盒齿。轉(zhuǎn)換的方式非常簡(jiǎn)單：
- 原生DOM對(duì)象轉(zhuǎn)jQuery對(duì)象：
var box = document.getElementById('box');
var $box = $(box);
- jQuery對(duì)象轉(zhuǎn)原生DOM對(duì)象：
var $box = $('#box');
var box1 = $box[0];
var box2 = $box.get(0);
注：個(gè)人喜歡在jQuery對(duì)象前加“$”符號(hào)困食，加以區(qū)分jQuery對(duì)象和原生DOM對(duì)象
以上就是jQuery對(duì)和原生DOM對(duì)象的的互相轉(zhuǎn)換陷舅，是不是真的很簡(jiǎn)單呢！但是作為一個(gè)有追求的前端開(kāi)發(fā)人員待讳，僅僅知道如何用是不夠的仰剿，更要了解內(nèi)部的實(shí)現(xiàn)細(xì)節(jié)！Ａ詹省部凑！
二、偽數(shù)組對(duì)象
在jQuery的中有一個(gè)包裝集概念涂邀，包裝集就是用偽數(shù)組實(shí)現(xiàn)的比勉。先看下正常的數(shù)組的定義及遍歷：
var arr = ['iceman' , 'mengzhe' , 'shoushou' , 'zhuzhu'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
輸出：
以上便是以字面量的方式定義了一個(gè)數(shù)組驹止，并且添加幾個(gè)簡(jiǎn)單的字符串观蜗，以及遍歷輸出每一項(xiàng)墓捻，這個(gè)在JavaScript中是再正常不過(guò)了。那么毙替，什么是偽數(shù)組呢厂画？.... 就是用對(duì)象來(lái)模擬的！
var objArr = {
0 : 'iceman',
1 : 'mengzhe',
2 : 'shoushou',
3 : 'zhuzhu',
length : 4
}
for (var i = 0; i < $objArr.length; i++) {
console.log($objArr[i]);
}
輸出：
以上代碼中以對(duì)象字面量的形式定義了一個(gè)對(duì)象objArr屎慢，這個(gè)對(duì)象就用來(lái)模擬數(shù)組忽洛，即偽數(shù)組對(duì)象，在$arr中要偽裝的數(shù)組項(xiàng)以數(shù)字0集灌、1复哆、2...為鍵。js中獲取一個(gè)對(duì)象的屬性值可以使用obj.prop或者obj['prop']唆阿，當(dāng)對(duì)象字面量中鍵是以數(shù)字開(kāi)頭的時(shí)候锈锤，用obj['prop']獲取值的時(shí)候可以不加引號(hào)，即obj[prop]浅辙，在上面的實(shí)例中就是objArr[1]妄壶、objArr[2]寄狼、objArr[3]....
看到這里有沒(méi)有一種很似曾相識(shí)的感覺(jué)呢氨淌？ 前面說(shuō)到盛正，jQuery對(duì)象轉(zhuǎn)原生DOM對(duì)象的其中一種方式是：jQuery對(duì)象[0]屑埋，和以上的對(duì)象字面量中鍵是數(shù)字的形式是不很像呢？ 另外多說(shuō)一句摘能，jQuery對(duì)象.get(0)的內(nèi)部使用的就是jQuery對(duì)象[0]來(lái)實(shí)現(xiàn)的团搞。
三、轉(zhuǎn)換的細(xì)節(jié)
jQuery使用選擇器獲取的對(duì)象會(huì)被包裝為一個(gè)包裝集像吻，該包裝集的內(nèi)部實(shí)現(xiàn)就是使用偽數(shù)組對(duì)象：
從斷點(diǎn)的結(jié)果來(lái)看复隆，用選擇器獲取的所有的確都封裝了一個(gè)偽數(shù)組對(duì)象。所以使用$divs[0]獲取的就是$divs對(duì)象中的鍵為0的div元素惭每，即第一個(gè)div元素：
以上有四個(gè)div洪鸭，用$divs[0]獲取的是第一個(gè)仑扑，并且獲取的是原生的DOM對(duì)象，那么如果用選擇器只獲取到了一個(gè)元素镇饮，那么用$divs[0]獲取的就是該元素的原生DOM對(duì)象储藐，這就是jQuery對(duì)象轉(zhuǎn)為原生DOM對(duì)象。
有了上文的理解蛛碌，原生DOM對(duì)象轉(zhuǎn)jQuery對(duì)象理解起來(lái)就簡(jiǎn)單多了辖源，$(原生DOM對(duì)象)的方式可以將原生DOM對(duì)象轉(zhuǎn)為jQuery對(duì)象希太，其實(shí)$是一個(gè)方法酝蜒，原生的DOM對(duì)象傳入$方法中，該方法內(nèi)部對(duì)原生DOM對(duì)象做進(jìn)一步的加工堕澄， 使其成為一個(gè)包裝集霉咨，即偽數(shù)組對(duì)象。
四惊来、總結(jié)
jQuery對(duì)象和原生DOM對(duì)象的相互轉(zhuǎn)換在jQuery內(nèi)部已經(jīng)封裝的很好了棺滞，使用起來(lái)非常簡(jiǎn)單，但是了解了其實(shí)現(xiàn)的原理之后更能理解jQuery的設(shè)計(jì)哲學(xué)枉证，知其然并且知其所以然之后使用起來(lái)更得心應(yīng)手移必。在知道了用選擇器獲取的包裝集是偽數(shù)組對(duì)象之后，對(duì)于jQuery的隱式迭代也會(huì)有更好的理解秒赤，其中原理可以后面再分析憎瘸。
