【鋒利的jQuery】讀書筆記

發(fā)布時間：2017-03-22 09:02

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

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

在jQuery中，$就是jQuery的簡寫形式，例如：

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

如果沒有特別說明$都是jQuery的簡寫形式。

重要代碼：

$(document).ready(});

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

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

1）鏈式操作風格：簡單來說就是將需要執(zhí)行的各種函數(shù)寫成一長串。這樣一行代碼就能實現(xiàn)很復雜的效果了。
但是呢，如果一行中有太多的操作，就會太長了，不便于看懂理解和維護，，此時適當?shù)膿Q行，便于理解維護。一般來說，對同一個對象不超過3個操作的，可以直接寫成一行；對同一個對象進行多個操作的，可以每行寫一個操作，或者按照功能塊來分，將同一個功能塊的幾個操作寫在同一行；對于多個對象少量操作的，可以每個對象寫一行，涉及到子元素的時候，可以適當?shù)倪M行縮進。
簡單的例子如下：

這里寫圖片描述

2）為代碼添加注釋：因為jQuery的選擇器功能強大，可以很容易的用幾行代碼就搞定原生JavaScript需要寫很多行才能實現(xiàn)的效果。這種時候，如果不加注釋，其他人就很難閱讀代碼的功能，所以在需要的地方適當?shù)脑黾幼⑨�，解釋功能，無論是日后自己閱讀還是跟他們合作分享的時候，都會好很多。
通過良好的編碼風格和習慣，能夠提高開發(fā)效率。

jQuery對象和DOM對象

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

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

等同于：

document.getElementById("id").innerHTML;

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

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

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

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

jQuery對象； DOM對象；

因為jQuery對象不能使用DOM對象中的方法，但是有些情況要用的時候，是可以相互轉(zhuǎn)換的。具體方法如下（詳見書P31）：

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

jQuery選擇器：

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

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

另外，在原生JavaScript中，為了更嚴謹，需要測試元素的存在性，若html中元素不存在，則會報錯；而在jQuery中都都已經(jīng)封裝好了，這也大大減少了工作量，避免了此類錯誤。這樣即使以后因為某些原因刪除了html中的一些元素，也不用擔心網(wǎng)頁的JavaScript代碼會報錯了。需要注意的是$(“#id”)獲取的永遠是對象，即使網(wǎng)頁上沒有該元素。因此，如果需要判斷存在性時，要用其他方式，詳見書P46

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

基本選擇器

jQuery的基本選擇器

這里要注意的是，當需要選擇多個元素的時候，直接在$(“”)中寫入，并使用，隔開即可，并且不同類型的選擇器可以寫在一起。

層次選擇器

jQuery層次選擇器

這里要注意，第一個是所有的子孫元素。第二個只是兒子輩的子元素。
另外第三、四個并不常用，因為有更好的方式代替他們：

)； )；

過濾選擇器

jQuery過濾選擇器

jQuery過濾選擇器續(xù)表

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

jQuery內(nèi)容過濾選擇器

可見性過濾選擇器：

jQuery可見性過濾選擇器

屬性過濾選擇器：

jQuery屬性過濾選擇器

子元素過濾選擇器：

jQuery子元素過濾選擇器

表單對象過濾選擇器：

jQuery表單對象過濾選擇器

表單選擇器：

jQuery表單選擇器

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

另外注意：后代選擇器（父子選擇器）使用空格，而過濾選擇器不使用空格。所以要注意不要應為空格影響選擇對象失敗。

jQuery中的DOM操作

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

這里寫圖片描述