文／饑人谷_韓寶億（簡(jiǎn)書作者）
原文鏈接：http://www.jianshu.com/p/98a0c82c47e4
著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，并標(biāo)注“簡(jiǎn)書作者”。

一、為什么要用Jquery?

DOM API

1.難用

　　要想拿到一個(gè)對(duì)象，要寫很長(zhǎng)的代碼比如document.getElementById('xxx'),但是如果是Jquery的話可以直接$('#xxx')。

2.存在兼容性問題

　　采用DOM操作的時(shí)候往往需要兼容IE和非IE瀏覽器問題，

3.功能太少，不能與時(shí)俱進(jìn)

　 DOM可以獲取第一個(gè)子元素卻不能獲取第二個(gè)子元素，而且有時(shí)候還要搞一個(gè)判斷語句，很麻煩。

Jquery API

1.兼容性好

2.API友好

　比如在做事件監(jiān)聽的時(shí)候DOM需要addEventListener和attachEvent等等；而Jquery直接為我們封裝為on(),bind()。 還有就是它可以鏈?zhǔn)讲僮鳌?/p>

3.功能強(qiáng)大，與時(shí)俱進(jìn)

二、什么時(shí)候適合用Jquery?

Paste_Image.png

三、Jquery對(duì)象與DOM對(duì)象可以相互轉(zhuǎn)換

Paste_Image.png

圖中代碼
var node=document.getElemtById('foo')表示node是DOM獲取的一個(gè)對(duì)象，
var $node=$('#foo')表示$node是Jquery獲取的一個(gè)對(duì)象。
node===$node[0]
node===$node.get(0)
所以，$node[0]===$node.get(0),DOM提供了一個(gè)get()API調(diào)用方式，這兩種寫法是等價(jià)的。（$node[0]/$node.get(0) //Jquery ->DOM ; $(node) //DOM->Jquery ）

四、Jquery對(duì)象與DOM對(duì)象的調(diào)用方法不一樣

Paste_Image.png

DOM對(duì)象只能用DOM API調(diào)用，Jquery對(duì)象只能用Jquery API來調(diào)用。

例如上圖所示：
node對(duì)象只能通過getAttribute('name')和setAttribute('name','bar')兩個(gè)DOM API來獲取和設(shè)置對(duì)象的屬性；
$node對(duì)象只能通過attr('name')和attr('name','bar')兩個(gè)Jquery API來獲取和設(shè)置對(duì)象的屬性。

如果兩者用混了會(huì)返回undefined！

五、DOM的get()方法和Jquery的eq()方法

Paste_Image.png

上圖代碼表示：
1、console.log($("div").get(0));//拿到的是DOM元素；
2、console.log($("div").eq(0));//拿到的是Jquery元素；
3、console.log($($("div").get(1)));//DOM元素轉(zhuǎn)換為Jquery元素。

eq()和get()一樣，都是獲取元素的下標(biāo)，Jquery對(duì)象默認(rèn)是一個(gè)偽數(shù)組！

六、after(),before(),append(),prepend(),appendTo() API

Paste_Image.png

上圖代碼表示：
1、after()方法是將對(duì)象作為元素的弟弟放入DOM結(jié)構(gòu)；
2、before()方法是將對(duì)象作為元素的哥哥放入DOM結(jié)構(gòu)；
3、append()方法是將對(duì)象作為元素的小兒子放入DOM結(jié)構(gòu)；
4、prepend()方法是將對(duì)象作為元素的大兒子放入DOM結(jié)構(gòu)；
5、appendTo() 方法表示$("div").append($p)->($p).appendTo$("div")，它們是等價(jià)的。

轉(zhuǎn)載于:https://www.cnblogs.com/hanbaoyi/p/5288052.html

總結(jié)

以上是生活随笔為你收集整理的Jquery对象和DOM对象---Jquery API (1)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。