jQuery知識點筆記上

1、jQuery是什么？

jQuery是一個快速、小巧且功能豐富的JavaScript庫。它使HTML文檔的遍歷和操作、事件處理、動畫和Ajax等操作變得更加簡單，并提供了一個易于使用的API，可以跨多種瀏覽器工作，結(jié)合了多功能性和可擴(kuò)展性。
jQuery中封裝了很多方法，學(xué)習(xí)jQuery就是學(xué)習(xí)當(dāng)中方法的使用。
jQuery特性：隱式迭代、鏈?zhǔn)骄幊獭?/p>

2、如何使用jQuery？

使用步驟：
（1）引入jQuery文件；
下載jQuery文件：
jQuery官網(wǎng)：https://jquery.com/

jQuery版本：
1.x：支持老瀏覽器，比如IE678，停止更新
2.x：不支持老瀏覽器，停止更新
3.x：不支持老瀏覽器，更新中
引入jQuery代碼：

（2）寫一個入口函數(shù)；
入口函數(shù)有兩種寫法：

jQuery入口函數(shù)和JavaScript的入口函數(shù)window.onload的區(qū)別：

a、jQuery入口函數(shù)可以寫多個，而window.onload只能寫一個；
b、執(zhí)行時間不同，jQuery入口函數(shù)要先于window.onload函數(shù)執(zhí)行；因為jQuery要等待頁面上dom樹加載完后執(zhí)行，window.onload要等待頁面上所有資源（dom樹、外部圖片、圖片等）加載完執(zhí)行。

（3）使用jQuery選擇器找到要操作的元素，進(jìn)行操作。

3、$是一個函數(shù)

jQuery文件結(jié)構(gòu)：jQuery文件是一個自執(zhí)行函數(shù)；

$是一個函數(shù)，因此參數(shù)傳遞不同，效果也不同；
如果參數(shù)傳遞的是一個匿名函數(shù)，就成為了入口函數(shù)；
如果參數(shù)傳遞的是一個字符串，就成為了選擇器，也有可能創(chuàng)建一個標(biāo)簽；
如果參數(shù)是一個dom對象，它就會把參數(shù)轉(zhuǎn)換為jQuery對象。

4、dom對象和jQuery對象

dom對象（Document Object Model）：文檔對象模型，定義了訪問HTML文檔對象的一套屬性、方法和事件。
dom對象就是原生js獲取到的對象，比如document.getElementById("one")；
特點：只能調(diào)用dom方法或?qū)傩裕荒苷{(diào)用jQuery的屬性或方法。

jQuery對象：利用jQuery選擇器獲取到的對象就是jQuery對象。
特點：只能調(diào)用jQuery對象的屬性和方法，不能調(diào)用原生js的dom對象的屬性和方法；
ps：定義jQuery對象的變量時，最好使用$開頭。
jQuery對象是一個偽數(shù)組，jQuery對象其實就是dom對象的一個包裝集。

dom對象和jQuery對象的相互轉(zhuǎn)換：

5、獲取、設(shè)置文本內(nèi)容text()

獲取文本：
text()方法不給參數(shù)，獲取標(biāo)簽的文本，會獲取到這個標(biāo)簽中所有的文本，包括后代元素中的文本；
包含了多個dom元素的jQuery對象，通過text()方法獲取文本，會把所有dom元素的文本獲取到。

設(shè)置文本：
text()方法含參數(shù)，參數(shù)就是要設(shè)置的文本，設(shè)置的文本將覆蓋原來的文本；
如果設(shè)置的文本中包含HTML標(biāo)簽，不會被解析出來，仍然是以文本形式顯示；
包含了多個dom元素的jQuery對象，通過text()方法設(shè)置文本，會把所有dom元素的文本都設(shè)置上（隱式遍歷)。

6、獲取、設(shè)置樣式css()

獲取樣式：
將css()的參數(shù)設(shè)置為想要獲取的樣式值的樣式名稱；
在IE瀏覽器中，要獲取邊框這樣的樣式值，一定要記得給一個準(zhǔn)確的邊框，比如border-top-width：上邊框?qū)挾龋?br>獲取包含了多個dom元素的jQuery對象的樣式，只能獲取到第一個dom元素的樣式。

設(shè)置樣式：
css()參數(shù)為樣式名、樣式值用來設(shè)置元素的樣式（設(shè)置的樣式是行內(nèi)樣式）；
設(shè)置包含了多個dom元素的jQuery對象的樣式，將為所有dom元素設(shè)置給定的樣式。

7、jQuery選擇器

jQuery選擇器返回的是jQuery對象。
jQuery選擇器分為：基本選擇器、層級選擇器、過濾選擇器、篩選選擇器（方法）。

7.1、基本選擇器

語法：類似于CSS；
分為：ID選擇器、類選擇器、標(biāo)簽選擇器、并集選擇器、交集選擇器。

7.2、層級選擇器

語法：類似于CSS；
分為：子代選擇器、后代選擇器。

7.3、過濾選擇器

語法：

7.4、篩選選擇器（方法）

語法：

8、mouseenter事件和mouseleave事件

mouseover事件在鼠標(biāo)移動到選取的元素及其子元素上時觸發(fā)；
mouseenter事件只有在鼠標(biāo)移動到選取的元素上時才會觸發(fā)；

9、class類操作

jQuery中的類操作有：添加類、移除類、判斷類、切換類；
添加類addClass()：

移除類removeClass()：

判斷類hasClass()：判斷某個元素是否含有某個類，返回值true、false；

切換類toggleClass()：如果元素有某個類，就移除這個類；沒有就添加這個類。

jQuery知識點筆記下

10、jQuery動畫

10.1、顯示show()隱藏hide()

顯示show()：
當(dāng)為show()添加參數(shù)時，就可以實現(xiàn)動畫效果；
有兩個參數(shù)：
參數(shù)1：執(zhí)行動畫的時長，以毫秒為單位，也可以使用代表時長的字符串：fast（相當(dāng)于200毫秒）、normal（相當(dāng)于400毫秒）、slow（相當(dāng)于600毫秒），如果代表時長的單詞寫錯了，相當(dāng)于normal；
參數(shù)2：代表動畫執(zhí)行完畢后的回調(diào)函數(shù)；

隱藏hide()：語法與show()類似；

切換toggle()：當(dāng)狀態(tài)為顯示時切換為隱藏，當(dāng)狀態(tài)為隱藏時，切換為顯示，語法與show()類似；

10.2、滑入slideDown()滑出slideUp()

默認(rèn)參數(shù)400毫秒；
滑入slideDown()：
slideDown()不加參數(shù)時也可以實現(xiàn)動畫效果，但是slideDown()也有兩個參數(shù)；
參數(shù)1：執(zhí)行動畫的時長；
參數(shù)2：代表動畫執(zhí)行完畢后的回調(diào)函數(shù)；

滑出slideUp()：語法和slideDown類似；

切換slideToggle()：

10.3、淡入fadeIn()淡出fadeOut()

沒有參數(shù)時默認(rèn)400毫秒；
淡入fadeIn()：

淡出slideOut()：

切換fadeToggle()：

淡出到某種長度fadeTo()：

10.4、自定義動畫animate()

animate()有四個參數(shù)：
參數(shù)1：必選，對象類型，代表的是需要做動畫的屬性；
參數(shù)2：可選的，代表的是執(zhí)行動畫的時長，單位毫秒；
參數(shù)3：可選的，代表的是動畫是緩動還是勻速，有兩個可設(shè)置值：默認(rèn)為swing（緩動）、linear（勻速）；
參數(shù)4：動畫執(zhí)行完畢后的回調(diào)函數(shù)。
示例：為id為div1的元素設(shè)置自定義動畫

10.5、動畫隊列與停止動畫

當(dāng)我們多次觸發(fā)一個元素上的動畫時，就會出現(xiàn)動畫隊列，后面觸發(fā)的動畫要等前面的動畫執(zhí)行完才能開始執(zhí)行；
我們可以使用stop()方法停止動畫：
兩個參數(shù)（都是布爾類型，如果不寫參數(shù)，默認(rèn)兩個參數(shù)都是false）：
參數(shù)1：是否清除隊列；
參數(shù)2：是否跳轉(zhuǎn)到最終結(jié)果。
示例：設(shè)置元素div的動畫的stop()

11、節(jié)點操作

11.1、動態(tài)創(chuàng)建元素html()和$()

html()：
當(dāng)html()不給參數(shù)時，可以獲取元素的所有內(nèi)容，包括文本、標(biāo)簽等；
當(dāng)html()給了參數(shù)時，可以設(shè)置元素的內(nèi)容，新設(shè)置的內(nèi)容將覆蓋元素原來的內(nèi)容，與text()不同的是html()可以解析html代碼，因此可以創(chuàng)建節(jié)點；

$()：
可以創(chuàng)建節(jié)點，但是創(chuàng)建的節(jié)點只存在于內(nèi)存中，如果需要顯示，則需要追加到頁面；

11.2、添加節(jié)點

添加節(jié)點的方法有append()、prepend()、before()、after()、appendTo()。

append()：作為最后一個子元素添加；
父元素.append(子元素);

prepend()：作為第一個子元素添加；
父元素.prepend(子元素);

before()：把元素B插入到元素A的前面，兄弟元素添加；
元素A.before(元素B);

after()：把元素B插入到元素A的后面，兄弟元素添加；
元素A.after(元素B);

appendTo()：把子元素作為父元素的最后一個子元素添加；
子元素.appendTo(父元素);

11.3、清除節(jié)點empty()和移除節(jié)點remove()

empty()：
不僅清除了節(jié)點，并且把節(jié)點的事件也清除了，相對于html()較為安全；

remove()：

11.4、克隆節(jié)點clone()

clone()克隆出來的節(jié)點（包括后代節(jié)點）只存在于內(nèi)存中，如果需要顯示，則需要追加到頁面；
clone()方法具有參數(shù)：
true：代表將事件一起克?。?br>false：代表不會克隆事件。
ps：不給參數(shù)默認(rèn)false，不管參數(shù)是什么都會克隆后代元素。

12、獲取、設(shè)置表單元素內(nèi)容val()

獲?。?br>val()不給參數(shù)就可以獲取內(nèi)容；

設(shè)置：
val()中給的參數(shù)就是要設(shè)置的內(nèi)容；

13、屬性操作attr()和removeAttr()

設(shè)置屬性：
attr('屬性名','屬性值');

獲取屬性：
attr('屬性名');

移除屬性：
removeAttr('屬性名');

14、布爾類型屬性操作prop()

jQuery1.6以后，對于checked、selected、disabled這一類布爾類型的屬性，不能用attr()，只能用prop()。
示例：

15、尺寸和位置操作：寬width()和height()

width()和height()：
獲取、設(shè)置元素的寬高，不包括padding/border/margin；

innerWidth()和innerHeight()：
返回元素的寬高，包括padding；

outerWidth()和outerHeight()：
返回元素的寬高，包括padding/border；

outerWidth(true)和outerHeight(true)：
返回元素的寬高，包括padding/border/margin；

獲取頁面可視區(qū)域的寬高：

16、offset()和position()

offset()：
獲取元素距離document的位置，返回值是一個對象，對象里面包含了top和left的值；

position()：獲取的是元素距離有定位的父元素的位置，返回值是一個對象，對象里面包含了top和left的值。

17、scrollLeft()和scrollTop()

設(shè)置或者獲取垂直滾動條的位置：

18、事件

18.1、注冊事件on

jQuery與原生js注冊事件的區(qū)別：jQuery給同一個元素注冊相同的事件，后一個事件不會把前面的覆蓋掉，而原生js則會覆蓋前面的事件。
on注冊簡單事件：

on注冊委托事件：

18.2、解綁事件off()

示例：

18.3、事件觸發(fā)trigger()

18.4、事件對象

事件對象：注冊一個事件，觸發(fā)它時系統(tǒng)自動生成的記錄這個事件觸發(fā)時的一些信息就是事件對象，比如觸發(fā)時有沒有按住某個鍵等；
事件對象用事件參數(shù)來獲取。

事件對象常用的三個坐標(biāo)：
pageX和pageY：觸發(fā)點距離頁面最頂部的左上角的位置（會計算滾動條的距離）；
screenX和screenY：觸發(fā)點距離屏幕最左上角的值；
clientX和clientY：可視區(qū)，觸發(fā)點距離頁面左上角的值（忽視滾動條）；

阻止事件冒泡（子元素事件組織父元素事件冒泡）：stopPropagation()；

阻止瀏覽器默認(rèn)行為：preventDefault()；

既阻止事件冒泡，又阻止默認(rèn)行為：return false;

獲取按鍵：keyCode。

19、鏈?zhǔn)骄幊?/h1>

鏈?zhǔn)骄幊淌莏Query的一大特性，只要方法返回值是jQuery對象，那么就可以繼續(xù)點出方法。
end()：回到上一個狀態(tài)。
jQuery方法只有jQuery對象能使用。
示例：

20、顯示迭代each()

each()：遍歷jQuery對象集合，為每個匹配的元素執(zhí)行函數(shù)；

lis是li對象數(shù)組，遍歷$lis，并為每個li設(shè)置對應(yīng)的opacity；

21、多庫共存

查看jQuery版本：

當(dāng)引入多個jQuery時，后引入的jQuery文件將覆蓋原來的jQuery文件（多庫沖突）。
多庫共存：noConflict()