jQuery簡(jiǎn)介
優(yōu)點(diǎn)
- 兼容性好
- API友好
- 功能強(qiáng)大、與時(shí)俱進(jìn)（當(dāng)版本升級(jí)時(shí)，會(huì)將語(yǔ)言的新特性添加進(jìn)來(lái)）
API寫(xiě)法
jquery中只有兩種API寫(xiě)法：
$.方法()$(選擇器).方法()
什么時(shí)候適用jQuery
- DOM操作較多
- 簡(jiǎn)單的Ajax請(qǐng)求
- 兼容多款瀏覽器
什么時(shí)候不適用jQuery
- 交互簡(jiǎn)單
- 流量苛刻（如移動(dòng)端）
- 公司有了jQuery的替代方案
版本說(shuō)明
- jQuery1.xx：兼容IE6、7、8，因此文件較大
- jQuery2.xx：不再兼容IE6、7、8，因此文件較小，且做了其他方面的優(yōu)化
使用jquery
- 為了不讓加載js文件時(shí)，阻塞其他文件的加載，因此，我們將script文件放在html的最后，但是在使用jQuery時(shí)，可以將我們的程序放在
$(fn)內(nèi)，這樣js程序會(huì)在html文件（注意并不會(huì)等所有的文件包括css、圖片等資源加載完成，僅僅只是html加載完成）加載完成后，再執(zhí)行js； 而如果使用window.onload，會(huì)等待所有文件加載完成再執(zhí)行，時(shí)機(jī)太晚
選擇器注意
-
使用jquery方法獲取的是jquery對(duì)象，jquery對(duì)象是jquery對(duì)原生js對(duì)象進(jìn)行了一層封裝，因此，對(duì)于jquery對(duì)象只能使用jquery的方法和屬性；
對(duì)于一個(gè)特定結(jié)果集，我們想獲取到指定index的jQuery對(duì)象，可以使用eq方法
$('div').eq(3); // 獲取結(jié)果集中的第四個(gè)jQuery對(duì)象
$('div')[2]; // 這樣獲取的是js原生對(duì)象，通過(guò)[]進(jìn)行轉(zhuǎn)換了
jQuery常見(jiàn)用法
DOM操作
-
var obj = $('<div>element</div>')： 創(chuàng)建一個(gè)元素 -
$(node).append(ele)： 追加末端ele -
$(node).prepend()：在前面追加 -
$(node).remove()：移除 -
$(node).before()： 在前面插入 -
$(node).after()： 在后面插入 - `$(node).html()：相當(dāng)于innerHTML
- `$(node).text()：相當(dāng)于innerText
-
$(node).empty()： 移除內(nèi)部所有元素
CSS操作
-
$(node).val()： 獲取或修改元素的value -
$(node).css()：獲取或設(shè)置內(nèi)部樣式（不是計(jì)算后的樣式） -
$(node).attr()：屬性值操作 -
$(node).addClass()：類(lèi)操作 -
$(node).removeClass()：移除類(lèi) -
$(node).hasClass()：是否擁有類(lèi) -
$(node).toggleClass()：切換類(lèi)
