本文關(guān)鍵詞：鋒利的jQuery，由筆耕文化傳播整理發(fā)布。

前兩天看了極客學(xué)院的jQuery入門(mén)視頻，但是感覺(jué)這套視頻偏介紹，作為入門(mén)學(xué)習(xí)，還是不夠，看完之后能夠看懂現(xiàn)成的jQuery代碼，但是要講我之前寫(xiě)的原生JavaScript代碼用jQuery重寫(xiě)的時(shí)候，卻遇到了很多問(wèn)題，所以還是準(zhǔn)備重新系統(tǒng)的學(xué)習(xí)一下jQuery。 先看看這本《鋒利的jQuery》，之后再快速過(guò)一遍其他的教學(xué)視頻，應(yīng)該能夠更好的掌握，從而達(dá)到能夠熟練的使用jQuery來(lái)編寫(xiě)網(wǎng)頁(yè)效果的水平。 下面是《鋒利的jQuery》的讀書(shū)筆記：

在jQuery中，$就是jQuery的簡(jiǎn)寫(xiě)形式，例如：

$("#id")與jQuery("#id")是等價(jià)的； $.ajax和jQuery.ajax也是等價(jià)的。

如果沒(méi)有特別說(shuō)明$都是jQuery的簡(jiǎn)寫(xiě)形式。

重要代碼：

$(document).ready(});

這段代碼的作用類(lèi)似于原生JavaScript中的window.onload方法，但比原生中的更好用，它能夠同時(shí)編寫(xiě)多個(gè)函數(shù)，還能使用簡(jiǎn)化的寫(xiě)法：

$(}); jQuery的代碼風(fēng)格：

1）鏈?zhǔn)讲僮黠L(fēng)格：簡(jiǎn)單來(lái)說(shuō)就是將需要執(zhí)行的各種函數(shù)寫(xiě)成一長(zhǎng)串。這樣一行代碼就能實(shí)現(xiàn)很復(fù)雜的效果了。
但是呢，如果一行中有太多的操作，就會(huì)太長(zhǎng)了，不便于看懂理解和維護(hù)，，此時(shí)適當(dāng)?shù)膿Q行，便于理解維護(hù)。一般來(lái)說(shuō)，對(duì)同一個(gè)對(duì)象不超過(guò)3個(gè)操作的，可以直接寫(xiě)成一行；對(duì)同一個(gè)對(duì)象進(jìn)行多個(gè)操作的，可以每行寫(xiě)一個(gè)操作，或者按照功能塊來(lái)分，將同一個(gè)功能塊的幾個(gè)操作寫(xiě)在同一行；對(duì)于多個(gè)對(duì)象少量操作的，可以每個(gè)對(duì)象寫(xiě)一行，涉及到子元素的時(shí)候，可以適當(dāng)?shù)倪M(jìn)行縮進(jìn)。
簡(jiǎn)單的例子如下：

2）為代碼添加注釋?zhuān)阂驗(yàn)閖Query的選擇器功能強(qiáng)大，可以很容易的用幾行代碼就搞定原生JavaScript需要寫(xiě)很多行才能實(shí)現(xiàn)的效果。這種時(shí)候，如果不加注釋?zhuān)渌司秃茈y閱讀代碼的功能，所以在需要的地方適當(dāng)?shù)脑黾幼⑨專(zhuān)忉尮δ�，無(wú)論是日后自己閱讀還是跟他們合作分享的時(shí)候，都會(huì)好很多。
通過(guò)良好的編碼風(fēng)格和習(xí)慣，能夠提高開(kāi)發(fā)效率。

jQuery對(duì)象和DOM對(duì)象

jQuery對(duì)象和DOM對(duì)象如何區(qū)分：
DOM對(duì)象就是原生JavaScript中通過(guò)getElementById或者getElementByTagName來(lái)獲取DOM樹(shù)節(jié)點(diǎn)得到的對(duì)象。DOM對(duì)象可以使用JavaScript中的方法，如innerHTML。
jQuery對(duì)象是通過(guò)jQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象。jQuery對(duì)象是jQuery中獨(dú)有的，他可以使用jQuery中的方法，如html()。

$("#id").html();

等同于：

document.getElementById("id").innerHTML;

要注意的是，DOM對(duì)象和jQuery對(duì)象，只能使用各自的方法，不能使用對(duì)方的方法。例如：

$("#id").innerHTML; document.getElementById("id").html();

都是錯(cuò)誤的。另外，通過(guò)$(“#id”)和document.getElementById(“id”)所取得的對(duì)象也并不等價(jià)，前者是jQuery對(duì)象，后者是DOM對(duì)象，并非同一個(gè)東西，不要搞混。

jQuery對(duì)象和DOM對(duì)象的轉(zhuǎn)換
首先要約定定義變量風(fēng)格，即將jQuery對(duì)象和DOM對(duì)象賦值給變量時(shí)應(yīng)該體現(xiàn)出不同，例如：

jQuery對(duì)象； DOM對(duì)象；

因?yàn)閖Query對(duì)象不能使用DOM對(duì)象中的方法，但是有些情況要用的時(shí)候，是可以相互轉(zhuǎn)換的。具體方法如下（詳見(jiàn)書(shū)P31）：

jQuery轉(zhuǎn)換為DOM對(duì)象：因?yàn)閖Query都是數(shù)組對(duì)象，所以轉(zhuǎn)換時(shí)使用[index]和get(index)這兩種方法。
DOM轉(zhuǎn)換為jQuery對(duì)象：只要使用$()把DOM對(duì)象包起來(lái)，就變成jQuery對(duì)象了。

jQuery選擇器：

jQuery的選擇器完全繼承了CSS的風(fēng)格，只是CSS選擇器是找到元素為其添加樣式，而jQuery選擇器是找到元素為其添加行為。另外，jQuery中涉及的操作CSS樣式的部分比單純的CSS功能更加強(qiáng)大。并且有跨瀏覽器的兼容性。

注意，目前學(xué)到的除了(“body/#id/.class等”)中都必須有引號(hào)。

另外，在原生JavaScript中，為了更嚴(yán)謹(jǐn)，需要測(cè)試元素的存在性，若html中元素不存在，則會(huì)報(bào)錯(cuò)；而在jQuery中都都已經(jīng)封裝好了，這也大大減少了工作量，避免了此類(lèi)錯(cuò)誤。這樣即使以后因?yàn)槟承┰騽h除了html中的一些元素，也不用擔(dān)心網(wǎng)頁(yè)的JavaScript代碼會(huì)報(bào)錯(cuò)了。需要注意的是$(“#id”)獲取的永遠(yuǎn)是對(duì)象，即使網(wǎng)頁(yè)上沒(méi)有該元素。因此，如果需要判斷存在性時(shí)，要用其他方式，詳見(jiàn)書(shū)P46

jQuery通過(guò)選擇器來(lái)取得jQuery對(duì)象，而jQuery對(duì)象都是數(shù)組對(duì)象，所以不需要再想原生JavaScript那樣，使用很多循環(huán)來(lái)遍歷數(shù)組了，直接操作即可。

基本選擇器

這里要注意的是，當(dāng)需要選擇多個(gè)元素的時(shí)候，直接在$(“”)中寫(xiě)入，并使用 ， 隔開(kāi)即可，并且不同類(lèi)型的選擇器可以寫(xiě)在一起。

層次選擇器

這里要注意，第一個(gè)是所有的子孫元素。第二個(gè)只是兒子輩的子元素。
另外第三、四個(gè)并不常用，因?yàn)橛懈玫姆绞酱嫠麄儯?/p> )； )；

過(guò)濾選擇器

內(nèi)容過(guò)濾選擇器：

可見(jiàn)性過(guò)濾選擇器：

屬性過(guò)濾選擇器：

子元素過(guò)濾選擇器：

表單對(duì)象過(guò)濾選擇器：

表單選擇器：

注意：若有些選擇器名稱(chēng)中含有 · # （ [ 等特殊字符的時(shí)候，在使用$(“”)取得對(duì)象時(shí)可能需要使用轉(zhuǎn)義符進(jìn)行轉(zhuǎn)義。

另外注意：后代選擇器（父子選擇器）使用空格，而過(guò)濾選擇器不使用空格。所以要注意不要應(yīng)為空格影響選擇對(duì)象失敗。

jQuery中的DOM操作

1）DOM操作的分類(lèi)：一般來(lái)說(shuō)DOM操作分為3個(gè)方面：DOM Core，DOM-THML和DOM-CSS.
DOM Core:
DOM Core并不專(zhuān)屬于JavaScript，任何一種支持DOM的程序設(shè)計(jì)語(yǔ)言都可以使用它。
JavaScript中的：getElementById(), getElementByName(),getAttribute和setAttribute()等方法都是DOM Core的組成部分。

HTML_DOM：
使用JavaScript為HTML編寫(xiě)腳本的時(shí)候，有許多專(zhuān)屬于HTML-DOM的屬性。

CSS_DOM：
CSS-DOM是針對(duì)CSS的操作。在JavaScript中，CSS-DOM技術(shù)的主要作用是獲取和設(shè)置style對(duì)象的各種屬性。通過(guò)改變style對(duì)象的各種屬性，可以使網(wǎng)頁(yè)呈現(xiàn)出不同的效果。

2）jQuery作為JavaScript的庫(kù)，繼承并發(fā)揚(yáng)了JavaScript對(duì)DOM對(duì)象的操作的特性，使開(kāi)發(fā)人員能方便的操作DOM對(duì)象，下面介紹jQuery中的各種DOM操作。
查找節(jié)點(diǎn)：
查找元素節(jié)點(diǎn)：

查找屬性節(jié)點(diǎn)：

創(chuàng)建節(jié)點(diǎn)：

使用$(html)來(lái)創(chuàng)建元素節(jié)點(diǎn)，并使用append()來(lái)插入，在元素中可以加入文本，例如： var $li_1=$("

  本文關(guān)鍵詞：鋒利的jQuery，由筆耕文化傳播整理發(fā)布。

本文編號(hào)：261206

qikan