[置頂]       JQuery基礎(chǔ)知識(shí)

優(yōu)點(diǎn)：

可跨瀏覽器編程。還有Prototype、Dojo、ExtJS(功能更強(qiáng)的JS庫(kù)，常用與企業(yè)級(jí)程序)。

宗旨：Write Less, Do More

本質(zhì)：

JavaScript庫(kù)。

JQuery能做什么？

與DOM功能相同。

導(dǎo)入

<script src="xxx.js" type="text/javascript"></script>

1：“$”符號(hào)

方法名(jQuery方法的別名)

window.jQuery = window.$ = jQuery

作用：篩選對(duì)象

$通常使用選擇器來(lái)獲得相應(yīng)的對(duì)象集合（id選擇器#id，類選擇器tagName）

2：$(docuemnt).ready方法：

會(huì)在當(dāng)前瀏覽器加載生成完整個(gè)DOM樹(shù)完成之后調(diào)用（相當(dāng)于window.onload），并可以多次調(diào)用相當(dāng)于C#中的“+=”;

與onload的區(qū)別

onload是所用DOM元素創(chuàng)建完畢、圖片、CSS等都加載完畢后才被觸發(fā)，而ready則是DOM元素創(chuàng)建完畢后就被出發(fā)，這樣可以提高網(wǎng)頁(yè)的響應(yīng)速度，在JQuery中也可以用$(window).load()來(lái)實(shí)現(xiàn)onload事件的調(diào)用機(jī)制。

簡(jiǎn)寫(xiě)：$(function() {});

3：JQuery對(duì)象轉(zhuǎn)換為DOM對(duì)象

1）[index]

2）get(inde)

4：選擇器

id選擇器-->#id

類選擇器-->tagName

class選擇器-->.className

*選擇器-->*   選擇所有的元素

組合選擇器-->使用“,”作為分隔符  $("#msgDiv, msg2Div")

層次選擇器

-->后代選擇器：ancestor decendant使用空格作為分隔符  $("form input")

-->子代選擇器：$("parent> child")

--> 匹配所有緊接在prev后的next元素  $("prev + next")

-->匹配prev元素之后的所有siblings兄弟元素  $("prev ~ siblings")

5：瀏覽器解析JS代碼時(shí)，會(huì)先解析聲明式代碼。eg:function()[]

之后在加載運(yùn)行式代碼

6：JQuery中注冊(cè)事件監(jiān)聽(tīng)click()、leave()、focus()、blur()....

JQuery中注冊(cè)事件監(jiān)聽(tīng)本質(zhì)：調(diào)用IE中attchEvent、FireFox中addEventListener

7：JQuery提供的函數(shù)

JQuery其實(shí)就是一個(gè)方法，方法的本質(zhì)就是對(duì)象，對(duì)象是可以有方法屬性，所以JQuery方法也有它自己的方法。

7.1

$.map(array, fn(){})：用來(lái)將一個(gè)數(shù)組，轉(zhuǎn)換成另一個(gè)數(shù)組。

如果傳入的匿名方法的參數(shù)是一個(gè)，那么這個(gè)參數(shù)就是當(dāng)前被循環(huán)出的數(shù)組元素。function(item){}

如果傳入的匿名方法的參數(shù)是兩個(gè)，則第一個(gè)是被循環(huán)出來(lái)的數(shù)組元素，第二個(gè)為當(dāng)前被循環(huán)到的小角標(biāo)。function(item, index){}

如果map時(shí)的匿名函數(shù)中包含return語(yǔ)句，那么map方法就會(huì)有一個(gè)返回值，返回的是由return語(yǔ)句返回單個(gè)元素組成的新數(shù)組。

$.map不能處理json格式對(duì)象的數(shù)組

注意：JS中的任何方法都有返回值，如果用戶不手動(dòng)返回的話，就會(huì)返回undefined

7.2

$.each(array, fn(){})：對(duì)數(shù)組array每個(gè)元素調(diào)用fn函數(shù)進(jìn)行處理，沒(méi)有返回值。$.each(arr, function(key, value){ alert(key + '=' + value ); });

如果each循環(huán)數(shù)組的話，那么key就是下標(biāo)，value就是元素

在each循環(huán)時(shí)，只要回調(diào)函數(shù)返回了false，那么循環(huán)終結(jié)

$.map與$.each區(qū)別：是否有返回值

7.3

$.trim(str)

str.replace(/^[\sxA0]+/, "").replace(/[\sxA0]+$/, ""); xA0 也是空格

7.4

.text()獲得元素內(nèi)部的文本

.text(val)向元素內(nèi)部添加文本

.html()和html(val)獲取或設(shè)置標(biāo)簽內(nèi)的html標(biāo)簽

8：Json

Json其實(shí)就是js中對(duì)象的一種表示方法(字面量表示法)

注意：值類型的變量，不能動(dòng)態(tài)添加屬性。

9：JQuery對(duì)象就是通過(guò)JQuery包裝DOM對(duì)象后產(chǎn)生的對(duì)象

$('#div1').html()等價(jià)于document.getElementById('div').innerHTML

$(".class,#id,div").css() == document.getElementById().style

css("border", "3px solid #000"0:

$().val() == .value()

10：Array是JS的對(duì)象，所以JQuery和DOM都能使用

11：JQuery綁定事件支持多播

12：過(guò)濾器

:first

:last

:eq(index)索引

:gt(index) 大于

:lt(index)小于

:not()

:even   :odd

:header

$("div[id]")屬性過(guò)濾選擇器

$("div[name^='x']")：name屬性以x開(kāi)頭的div元素

$("div[name$='x']")：結(jié)尾

$("div[][]");

$("div[name*='x']")：包含

$("*:disabled");

$("*:enabled");

$("input:checked");Radio  CheckBox

$("input:selected");  下拉列表<select .../>

12:<a .../>不跳轉(zhuǎn)，設(shè)置href="javascript:void(0)";

13：合成事件$(selector).hover(funcIn, funcOut);

14：對(duì)JQuery頂層對(duì)象進(jìn)行擴(kuò)展$.extend({});

15：對(duì)JQuery元素進(jìn)行擴(kuò)展$.fn.extend({});

16：常用的JS插件

JQueryUI

JQueryEasyUI

JQueryCookie