今日的學(xué)習(xí)再結(jié)合昨天的JavaScriptDOM的內(nèi)容，讓我對此十分清晰。JQuery原則：“write less, do more.”，這句話已充分說明它對簡化使用JavaScriptDOM編程的功力！ 每位老師都有自己的教學(xué)方式，可能根據(jù)教授的內(nèi)容的不同教學(xué)方式也有輕微的變化。老佟是一位非常有經(jīng)驗(yàn)的軟件教師，之前他在大連的軟件公司做培訓(xùn)。經(jīng)過多年的總結(jié)，他已經(jīng)有自己一套成熟的教學(xué)方式。這個方式讓我十分喜歡！至于是什么方式，你自己來體驗(yàn)吧！哈哈~~ 從學(xué)習(xí)JavaWEB、Struts1到現(xiàn)在的JavaScript，我已經(jīng)找到了WEB應(yīng)用開發(fā)的核心――MVC。是的，就是MVC。其實(shí)MVC應(yīng)該是根據(jù)WEB的核心被創(chuàng)造出來的模式，難道不是嗎！這一整套工具，就是分別對視圖層、控制層和數(shù)據(jù)模型層的操作。似乎現(xiàn)在才找到了一些感覺，因?yàn)橐郧皩W(xué)習(xí)servlet時，知道它可以處理用戶的請求，老師講什么就學(xué)習(xí)什么。但現(xiàn)在有思想了，老師你無論講什么，我都知道它應(yīng)該用在哪一層，有什么用途，這樣提高了我的學(xué)習(xí)效率。這是一個非常好的成長！對以后的成長大有幫助。 接下來這些靈散的知識就不多了，然后就開始做項(xiàng)目了。兩個字，快、爽！Ok，開始整理學(xué)習(xí)內(nèi)容。 一、JQuery與JavaScript 1.JavaScript庫 使用過JavaScriptDOM的人都應(yīng)該知道（比如昨天的練習(xí)），使用JSDOM進(jìn)行頁面的操作是十分麻煩的。比如獲取、修改及添加子節(jié)點(diǎn)等這些操作。如果操作一個復(fù)雜的頁面呢？Ok，JavaScript庫因此誕生了。 目前比較常見的JavaScript庫有： 2.JQuery簡介 JQuery是繼Prototype之后又一個優(yōu)秀的JavaScript庫。 JQuery理念：write less , do more. JQuery優(yōu)勢：輕量級、強(qiáng)大的選擇器、出色的 DOM 操作的封裝、可靠的事件處理機(jī)制、完善的Ajax、出色的瀏覽器兼容性、鏈?zhǔn)讲僮鞣绞健?
1). 基本過濾選擇器 a) “:first”，選取第一個元素，別忘記它也是被放在一個集合里哦！因?yàn)镴Query它是DOM對象的一個集合。如，“$("tr:first")”返回所有tr元素的第一個tr元素，它仍然被保存在集合中。 b) “:last”，選取最后一個元素。如，“$("tr:last")”返回所有tr元素的最后一個tr元素，它仍然被保存在集合中。 c) “:not(selector)”，去除所有與給定選擇器匹配的元素。如，“$("input:not(:checked)")”返回所有input元素，但去除被選中的元素（單選框、多選框）。 d) “:even”，選取所有元素中偶數(shù)的元素。因?yàn)镴Query對象是一個集合，這里的偶數(shù)指的就是集合的索引，索引從0開始。 e) “:odd”，選取所有元素中奇數(shù)的元素，索引從0開始。 f) “:eq(index)”，選取指定索引的元素，索引從0開始。 g) “:gt(index)”，選取索引大于指定index的元素，索引從0開始。 h) “:lt(index)”，選取索引小于指定index的元素，索引從0開始。 i) “:header”，選取所有的標(biāo)題元素，如hq、h2等。 j) “:animated”，選取當(dāng)前正在執(zhí)行的所有動畫元素。
2). 內(nèi)容過濾選擇器 它是對元素和文本內(nèi)容的操作。 a) “:contains(text)”，選取包含text文本內(nèi)容的元素。 b) “:empty”，選取不包含子元素或者文本節(jié)點(diǎn)的空元素。 c) “:has(selector)”，選取含有選擇器所匹配的元素的元素。 d) “:parent”，選取含有子元素或文本節(jié)點(diǎn)的元素。（它是一個父節(jié)點(diǎn)）
4).屬性過濾選擇器 通過元素的屬性來選取相應(yīng)的元素。 a) “[attribute]”，選取擁有此屬性的元素。 b) “[attribute=value]”，選取指定屬性值為value的所有元素。 c) “[attribute !=value]”，選取屬性值不為value的所有元素。 d) “[attribute ^= value]”，選取屬性值以value開始的所有元素。 e) “[attribute $= value]”，選取屬性值以value結(jié)束的所有元素。 f) “[attribute *= value]”，選取屬性值包含value的所有元素。 g) “[selector1] [selector2]…[selectorN]”，復(fù)合性選擇器，首先經(jīng)[selector1]選擇返回集合A，集合A再經(jīng)過[selector2]選擇返回集合B，集合B再經(jīng)過[selectorN]選擇返回結(jié)果集合。
5). 子元素過濾選擇器 一看名字便是，它是對某一元素的子元素進(jìn)行選取的。 a) “:nth-child(index/even/odd)”，選取索引為index的元素、索引為偶數(shù)的元素、索引為奇數(shù)的元素。 l nth-child(even/odd)：能選取每個父元素下的索引值為偶(奇)數(shù)的元素。 l nth-child(2)：能選取每個父元素下的索引值為 2 的元素。 l nth-child(3n)：能選取每個父元素下的索引值是 3 的倍數(shù)的元素。 l nth-child(3n + 1)：能選取每個父元素下的索引值是 3n + 1的元素。 b) “:first-child”，選取第一個子元素。 c) “:last-child”，選取最后一個子元素。 d) “:only-child”，選取唯一子元素，它的父元素只有它這一個子元素。
6). 表單過濾選擇器 選取表單元素的過濾選擇器。 a) “:input”，選取所有<input>、<textarea>、<select >和<button>元素。 b) “:text”，選取所有的文本框元素。 c) “:password”，選取所有的密碼框元素。 d) “:radio”，選取所有的單選框元素。 e) “:checkbox”，選取所有的多選框元素。 f) “:submit”，選取所有的提交按鈕元素。 g) “:image”，選取所有的圖像按鈕元素。 h) “:reset”，選取所有重置按鈕元素。 i) “:button”，選取所有按鈕元素。 j) “:file”，選取所有文件上傳域元素。 k) “:hidden”，選取所有不可見元素。
四、JQuery中的DOM操作 一種與瀏覽器，平臺，語言無關(guān)的接口。使用該接口可以輕松地訪問頁面中所有的標(biāo)準(zhǔn)組件。 DOM Core：DOM Core 并不專屬于 JavaScript，任何一種支持 DOM 的程序設(shè)計(jì)語言都可以使用它。它的用途并非僅限于處理網(wǎng)頁，也可以用來處理任何一種是用標(biāo)記語言編寫出來的文檔，例如：XML。 HTML DOM：使用 JavaScript 和 DOM 為 HTML 文件編寫腳本時，有許多專屬于HTML-DOM的屬性。 CSS-DOM：針對于CSS操作，在JavaScript中，CSS-DOM 主要用于獲取和設(shè)置 style 對象的各種屬性。
10.設(shè)置或獲取HTML、文本和值 讀取和設(shè)置某個元素中的 HTML 內(nèi)容： html()，該方法可以用于 XHTML，但不能用于 XML 文檔。 讀取和設(shè)置某個元素中的文本內(nèi)容：text()，該方法既可以用于 XHTML 也可以用于 XML 文檔。 讀取和設(shè)置某個元素中的值：val()，該方法類似 JavaScript 中的 value 屬性。對于文本框，下拉列表框，單選框該方法可返回元素的值(多選框只能返回第一個值)。如果為多選下拉列表框，則返回一個包含所有選擇值的數(shù)組。
3.合成事件 hover()：模擬光標(biāo)懸停時間。當(dāng)光標(biāo)移動到元素上時，會觸發(fā)指定的第一個函數(shù)，當(dāng)光標(biāo)移出這個元素時，會觸發(fā)指定的第二個函數(shù)。如，懸停效果：$("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");}); toggle()：用于模擬鼠標(biāo)連續(xù)單擊事件。第一次單擊元素，觸發(fā)指定的第一個函數(shù)，當(dāng)再一次單擊同一個元素時，則觸發(fā)指定的第二個函數(shù)，如果有更多個函數(shù)，則依次觸發(fā)，直到最后一個。如，設(shè)置元素的選擇與非選中效果： $("td").toggle( function () {$(this).addClass("selected");}, function () {$(this).removeClass("selected");}); 使用toggle()而不傳遞參數(shù)，效果為切換元素的可見狀態(tài)。
4.事件的冒泡 事件會按照 DOM 層次結(jié)構(gòu)像水泡一樣不斷向上只止頂端。 解決：在事件處理函數(shù)中返回 false，會對事件停止冒泡。還可以停止元素的默認(rèn)行為。 目前的所有UI交互或其事件，都支持這個特性。在自己的事件處理函數(shù)返回false將中止事件的繼續(xù)向下傳遞。返回true事件繼續(xù)向下傳遞。
