第08章：JQuery

1、1jQuery8.1 jQueryo jQueryn一個(gè) JavaScript 庫(kù)n封裝了預(yù)定義的對(duì)象和使用函數(shù)n簡(jiǎn)化了 JavaScript 編程o jQuery 庫(kù)包含以下特性：nHTML 元素選取 nHTML 元素操作 nCSS 操作 nHTML 事件函數(shù) nJavaScript 特效和動(dòng)畫(huà) nHTML DOM 遍歷和修改 nAJAX 28.2 jQuery語(yǔ)法規(guī)則o 語(yǔ)法n$(selector).action()o $(this).hide() - 隱藏當(dāng)前元素o $(p).hide() - 隱藏所有段落o $(p.test).hide() - 隱藏所有 class=test 的段落o

2、 $(“#test”).hide() - 隱藏所有 id=“test” 的元素n簡(jiǎn)單的代碼示例o jQuery代碼風(fēng)格n鏈?zhǔn)讲僮鳎▋?yōu)化）o jQuery對(duì)象和DOM對(duì)象$(“#foo”).html()Document.getElementById(“foo”).innerHTML38.3 jQuery選擇器選擇器o 基本選擇器基本選擇器n#id : $(“#test”)n.class : $(“.test”)nelement : $(“p”)n* : $(“*”)nselector1,selector2 selectorN: $(“div,span,p.myClass”)o 層次選擇器層次選擇

3、器n$(“ancestor descendant”) : $(“div span”)n$(“parent child”) : $(“divspan”)n$(“prev+next”) : $(“.one+div”) / $(“prev”).next(“next”)n$(“prevsiblings”) : $(“#twodiv”) /$(“prev”).nextall(“siblings”)48.3 jQuery選擇器選擇器o jQuery 選擇器選擇器n過(guò)濾選擇器過(guò)濾選擇器n基本過(guò)濾選擇器基本過(guò)濾選擇器o :first $(“div:first”)o :last $(“div:last”)o :

4、not(selector) $(“input:not(.myClass)”)o :even $(“input:even”)o :odd $(“input:odd”)o :eq(index) $(“input:eq(1)”)o :gt(index) $(“input:gt(1)”)o :lt(index) $(“input:lt(1)o :header $(“:header”)o :animated $(“div:animated”)58.3 jQuery選擇器選擇器o jQuery 選擇器選擇器n內(nèi)容過(guò)濾選擇器o:contains(text) ：$(“div:contain(我)”)o:emp

5、ty $(“div:empty”)o:has(selector) $(“div:has(p)”)o:parent $(“div:parent”)n可見(jiàn)性過(guò)濾選擇器o:hidden $(“:hidden”)o:visible $(“div:visible”)n屬性過(guò)濾選擇器oattribute: $(“divid”)oattribute=value : $(“divtitle=test”)oattribute!=value: $(“divtitle!=test”)oattribute=value: $(“divtitle=test”)oattribute$=value: $(“divtitle$

6、=test”) o attribute*=value: $(“divtitle*=test”) 68.3 jQuery選擇器選擇器o jQuery 選擇器選擇器n表單對(duì)象屬性過(guò)濾選擇器o :enabled $(“#form1 :enabled”)o :disabled $(“#form2:disabled”)o :checked $(“input:checked”)o :selected $(“select:selected”)o 示例78.3 jQuery中的中的DOM操作操作o查找節(jié)點(diǎn)o創(chuàng)建節(jié)點(diǎn):n創(chuàng)建元素節(jié)點(diǎn)、創(chuàng)建文本節(jié)點(diǎn)、創(chuàng)建屬性節(jié)點(diǎn)o插入節(jié)點(diǎn)n插入節(jié)點(diǎn)：append()/appendTo()/prepend()/prependTo()/after()/insertAfter()/before()/insertBefore()n移動(dòng)節(jié)點(diǎn)o刪除節(jié)點(diǎn)nremove() empty() o復(fù)制節(jié)點(diǎn) 、替換節(jié)點(diǎn)o屬性操作o樣式操作o設(shè)置和獲取HTML、文本和值 設(shè)置選擇框 o遍歷節(jié)點(diǎn)：children() next() closeset()oCSS-DOM操作o示例88.4 jQuery的事