JQuery 選擇器、過濾器介紹
2.JQuery簡介 JQuery是繼Prototype之後又一個優秀的JavaScript庫。 JQuery理念：write less , do more. JQuery優勢：輕量級、強大的選擇器、出色的 DOM 操作的封裝、可靠的事件處理機制、完善的Ajax、出色的瀏覽器兼容性、鏈式操作方式……。 二、JQuery對象與DOM對象 1.JQuery對象 JQuery對象就是使用「$(「DOMObj」)」，將DOM對象包裝起來。一般在JQuery對象前面加上「$」這樣與DMO對象區分，它已經是一種公認的命名約定。JQuery對象不能調用DOM對象的屬性和方法，同樣DOM對象也不能調用JQuery對象的屬性和方法。 2.JQuery對象轉成DOM對象 如果想使用JQuery對象調用DOM對象的方法，怎麼辦？應該將JQuery對象轉換成DOM對象，JQuery對象是一個數組對象，這個很特別。所以只需調用JQueryObj[x]或JQueryObj.get(X);即可轉換為DOM對象。 3.DOM對象轉換成JQuery對象 使用「$(「DOMObj」)」將DOM對象包裝起來就可以了。 三、JQuery選擇器 選擇器是JQuery的根基，在JQuery 中，對事件處理，遍歷DOM和Ajax操作都依賴於選擇器。這也是今天我們學習的重點內容。 1.基本選擇器 基本選擇器是JQuery中最常用的選擇器，也是最簡單的選擇器，它通過元素id、class 和標籤名來查找DOM元素。這個非常重要，下面的內容都是以此為基礎，逐級提高的。 1).「$(「#id」)」，獲取id指定的元素，id是全局唯一的，所以它只有一個成員。 2).「$(「.class」)」，獲取class指定的元素，不同的元素可以具有相同的class屬性，所以它可能具有多個成員。 3).「$(「element」)」，獲取element（元素名，比如div、table等）指定的元素，它可能具有多個成員。 4).「$(「*」)」，獲取所有元素，相當於document。 5).「$(「selector1,selector2,…,selectorN」)」，將每個選擇器匹配到的元素合併後一起返回。返回selector1匹配的集合+selector2匹配的集合+…+selectorN匹配的集合。 2.層次選擇器 什麼是層次？層次就是父子關係、兄弟關係的節點。所以，層次選擇器就是用來獲取指定元素的父子節點、兄弟節點。 1).「$(「ancestor descendant」)」，獲取ancestor元素下邊的所有元素。 2).「$(「parent > child」)」，獲取parent元素下邊的所有子元素（只包含第一層子元素）。 3).「$(「pre + next」)」，獲取緊隨pre元素的後一個兄弟元素。 4).「$(「pre ~ siblings」)」，獲取pre元素後邊的所有兄弟元素。 3.過濾選擇器 過濾？肯定是要添加過濾條件的。通過「:」添加過濾條件，比如「$(「div:first」)」返回div元素集合的第一個div元素，first是過濾條件。 按照不同的過濾規則，過濾選擇器可以分為基本過濾，內容過濾，可見性過濾，屬性過濾，子元素過濾和表單對象屬性過濾選擇器。 1). 基本過濾選擇器 a) 「:first」，選取第一個元素，別忘記它也是被放在一個集合里哦！因為JQuery它是DOM對象的一個集合。如，「$("tr:first")」返回所有tr元素的第一個tr元素，它仍然被保存在集合中。 b) 「:last」，選取最後一個元素。如，「$("tr:last")」返回所有tr元素的最後一個tr元素，它仍然被保存在集合中。 c) 「:not(selector)」，去除所有與給定選擇器匹配的元素。如，「$("input:not(:checked)")」返回所有input元素，但去除被選中的元素（單選框、多選框）。 d) 「:even」，選取所有元素中偶數的元素。因為JQuery對象是一個集合，這裡的偶數指的就是集合的索引，索引從0開始。 e) 「:odd」，選取所有元素中奇數的元素，索引從0開始。 f) 「:eq(index)」，選取指定索引的元素，索引從0開始。 g) 「:gt(index)」，選取索引大於指定index的元素，索引從0開始。 h) 「:lt(index)」，選取索引小於指定index的元素，索引從0開始。 i) 「:header」，選取所有的標題元素，如hq、h2等。 j) 「:animated」，選取當前正在執行的所有動畫元素。 2). 內容過濾選擇器 它是對元素和文本內容的操作。 a) 「:contains(text)」，選取包含text文本內容的元素。 b) 「:empty」，選取不包含子元素或者文本節點的空元素。 c) 「:has(selector)」，選取含有選擇器所匹配的元素的元素。 d) 「:parent」，選取含有子元素或文本節點的元素。（它是一個父節點） 3). 可見性過濾選擇器 根據元素的可見與不可見狀態來選取元素。 「:hidden」，選取所有不可見元素。 「:visible」，選擇所有可見元素。 可見選擇器：hidden 不僅包含樣式屬性 display 為 none 的元素，也包含文本隱藏域 (<input type=「hidden」>)和 visible:hidden 之類的元素。 4).屬性過濾選擇器 通過元素的屬性來選取相應的元素。 a) 「[attribute]」，選取擁有此屬性的元素。 b) 「[attribute=value]」，選取指定屬性值為value的所有元素。 c) 「[attribute !=value]」，選取屬性值不為value的所有元素。 d) 「[attribute ^= value]」，選取屬性值以value開始的所有元素。 e) 「[attribute $= value]」，選取屬性值以value結束的所有元素。 f) 「[attribute *= value]」，選取屬性值包含value的所有元素。 g) 「[selector1] [selector2]…[selectorN]」，複合性選擇器，首先經[selector1]選擇返回集合A，集合A再經過[selector2]選擇返回集合B，集合B再經過[selectorN]選擇返回結果集合。 5). 子元素過濾選擇器 一看名字便是，它是對某一元素的子元素進行選取的。 a) 「:nth-child(index/even/odd)」，選取索引為index的元素、索引為偶數的元素、索引為奇數的元素。 l nth-child(even/odd)：能選取每個父元素下的索引值為偶(奇)數的元素。 l nth-child(2)：能選取每個父元素下的索引值為 2 的元素。 l nth-child(3n)：能選取每個父元素下的索引值是 3 的倍數的元素。 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」，選取所有不可見元素。 7).表單對象屬性過濾選擇器 選取表單元素屬性的過濾選擇器。 「:enabled」，選取所有可用元素。 「:disabled」，選取所有不可用元素。 「:checked」，選取所有被選中的元素，如單選框、複選框。 「:selected」，選取所有被選中項元素，如下拉列表框、列表框。 四、JQuery中的DOM操作 一種與瀏覽器，平台，語言無關的介面。使用該介面可以輕鬆地訪問頁面中所有的標準組件。 DOM Core：DOM Core 並不專屬於 JavaScript，任何一種支持 DOM 的程序設計語言都可以使用它。它的用途並非僅限於處理網頁，也可以用來處理任何一種是用標記語言編寫出來的文檔，例如：XML。 HTML DOM：使用 JavaScript 和 DOM 為 HTML 文件編寫腳本時，有許多專屬於HTML-DOM的屬性。 CSS-DOM：針對於CSS操作，在JavaScript中，CSS-DOM 主要用於獲取和設置 style 對象的各種屬性。 1.查找節點 請見上面的「基本選擇器」。 2.創建節點 使用JQuery的工廠函數，創建一個新節點：var $newNode = $(「<p>你好</p>」);，然後將新節點插入到指定元素節點處。 3.插入節點 將新創建的節點，或獲取的節點插入指定的位置。 「$node.append($newNode)」，向每個匹配的元素內部的結尾處追加結尾處。如，「$("p").append("<b>Hello</b>");」將"<b>Hello</b>"添加到"p"內部的結尾處。 「$newNode.appendTo($node)」，將新元素追加到每個匹配元素內部的結尾處。 「$node.prepend($newNode)」，向每個匹配的元素內部的結尾處追加開始處。如，「$("p").prepend("<b>Hello</b>");」將"<b>Hello</b>"添加到"p"內部的起始處。 「$newNode.prependTo($node)」， 將新元素追加到每個匹配元素內部的開始處。 「$node.after($newNode)」，向每個匹配的元素的之後插入內容，是並列兄弟。如，「$("p").after("<b>Hello</b>");」將"<b>Hello</b>"插入到"p"的後邊。它們是兄弟關係。 「$newNode.insertAfter($node)」，將新元素插入到每個匹配元素之後。 「$newNode.before($node)」，向每個匹配的元素的之前插入內容。如，「$("p").before("<b>Hello</b>");」將"<b>Hello</b>"插入到"p"的前面，它們是兄弟關係。 「$node.insertBefore($newNode)」，將新元素插入到每個匹配元素之前。 注意：如果插入的節點是不是新創建的，插入將變成移動操作。所以，在插入這樣的節點之前應該使用clone的節點。 4.刪除節點 從DOM中刪除所有匹配的元素。如，「$("p").remove(".hello");」刪除所為class屬性值為hello的p元素，還有它下面的所有元素。 從DOM中清除所有匹配的元素。如，「$("p").empty();」清除所有p元素，還有它下面的所有元素。 5.複製節點 克隆匹配的DOM元素。如，「$("p").clone();」返回克隆後的副本，但不具有任何行為。如果要將DOM的事件一起克隆，應該使用「$("p").clone(true);」。 6.替換節點 將所有匹配的元素都替換為指定的 HTML 或 DOM 元素。如，$("p").replaceWith("<b>Paragraph. </b>");，將所有p元素，替換為"<b>Paragraph. </b>"。 與replaceWith相返：$("<b>Paragraph. </b>").replaceAll("p");。 7.包裹節點 wrap()：將指定節點用其他標記包裹起來。該方法對於需要在文檔中插入額外的結構化標記非常有用， 而且不會破壞原始文檔的語義。如，「$("p").wrap("<div class="wrap"></div>");」。每個p元素被包裹到<div>中。 wrapAll()：將所有匹配的元素用一個元素來包裹。而wrap()方法是將所有的元素進行單獨包裹。如，「$("p").wrapAll("<div></div>");」，將所有p元素包裹到<div>中。 wrapInner()：將每一個匹配的元素的子內容(包括文本節點)用其他結構化標記包裹起來。如，「$("p").wrapInner("<b></b>");」， <b>被每一個p元素包裹。 8.屬性設置 attr()：獲取屬性和設置屬性。 當為該方法傳遞一個參數時，即為某元素的獲取指定屬性。如，「$("img").attr("src");」，獲取img元素的src屬性值。 當為該方法傳遞兩個參數時，即為某元素設置指定屬性的值。如，「$("img").attr("src","test.jpg");」，設置img元素的src屬性值為test.jsp。 jQuery 中有很多方法都是一個函數實現獲取和設置。如：attr()，html()，text()，val()，height()，width()，css()等。 removeAttr()：刪除指定元素的指定屬性。 9.樣式操作 可以通過「attr()」設置或獲取css樣式。 追加樣式：addClass() 。如，「$("p").addClass("selected");」，向所有P元素中追加「selected」樣式。 移除樣式：removeClass() --- 從匹配的元素中刪除全部或指定的class。如，「$("p").removeClass("selected");」，刪除所有P元素中的「selected」。 切換樣式：toggleClass() --- 控制樣式上的重複切換。如果類名存在則刪除它，如果類名不存在則添加它。如，「$("p").toggleClass("selected");」，所有的P元素中，如果存在「selected」樣式就刪除「selected」樣式，否則就添加「selected」樣式。 判斷是否含有某個樣式：hasClass() --- 判斷元素中是否含有某個 class，有返回 true； 否則返回 false。如，「$(this).hasClass("protected")」，判斷當前節點是否有「protected」樣式。 10.設置或獲取HTML、文本和值 讀取和設置某個元素中的 HTML 內容： html()，該方法可以用於 XHTML，但不能用於 XML 文檔。 讀取和設置某個元素中的文本內容：text()，該方法既可以用於 XHTML 也可以用於 XML 文檔。 讀取和設置某個元素中的值：val()，該方法類似 JavaScript 中的 value 屬性。對於文本框，下拉列表框，單選框該方法可返回元素的值(多選框只能返回第一個值)。如果為多選下拉列表框，則返回一個包含所有選擇值的數組。 11.常用遍歷節點的方法 取得匹配元素的所有子元素組成的集合：children()。該方法只考慮第一層子元素而不考慮任何後代元素。 取得匹配元素後面緊鄰的兄弟元素的集合(但集合中只有一個元素)：next()。 取得匹配元素前面緊鄰的兄弟元素的集合(但集合中只有一個元素)：prev()。 取得匹配元素前後所有的兄弟元素: siblings()。 12.CSS-DOM操作 獲取和設置元素的樣式屬性：css()。 獲取和設置元素透明度：opacity()屬性。 獲取和設置元素高度，寬度：height()，width()。在設置值時，若只傳遞數字，則默認單位是px。如需要使用其他單位則需傳遞一個字元串，例如 「$(「p:first」).height(「2em」)」； 獲取元素在當前視窗中的相對位移：offset()。它返回的對象包含了兩個屬性：top，left。該方法只對可見元素有效。 五、JQuery中的事件 1.載入DOM 在頁面載入完畢後，瀏覽器會通過 JavaScript 為 DOM 元素添加事件。在常規的 JavaScript 代碼中，通常使用 window.onload 方法，在JQuery 中使用$(document).ready() 方法。JQuery中的簡化寫法「$()」。在window.onload中註冊事件時，只能在一個window.onload體中註冊。但使用JQuery，可以在多個$(document).ready()或$()中註冊。 2.事件綁定 對匹配的元素對指定的事件綁定。如，昨天我們在window.onload中綁定事件的方法：「$("p").onclick(function(){ alert( $(this).text() ); });」 在JQuery的$(document).ready()中可以這樣綁定：「$("p").click(function(){ alert( $(this).text() ); });」 使用bind()，可以這樣綁定：$("p").bind("click", function(){ alert( $(this).text() ); }); 3.合成事件 hover()：模擬游標懸停時間。當游標移動到元素上時，會觸髮指定的第一個函數，當游標移出這個元素時，會觸髮指定的第二個函數。如，懸停效果：$("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");}); toggle()：用於模擬滑鼠連續單擊事件。第一次單擊元素，觸髮指定的第一個函數，當再一次單擊同一個元素時，則觸髮指定的第二個函數，如果有更多個函數，則依次觸發，直到最後一個。如，設置元素的選擇與非選中效果： $("td").toggle( function () {$(this).addClass("selected");}, function () {$(this).removeClass("selected");}); 使用toggle()而不傳遞參數，效果為切換元素的可見狀態。 4.事件的冒泡 事件會按照 DOM 層次結構像水泡一樣不斷向上只止頂端。 解決：在事件處理函數中返回 false，會對事件停止冒泡。還可以停止元素的默認行為。 目前的所有UI交互或其事件，都支持這個特性。在自己的事件處理函數返回false將中止事件的繼續向下傳遞。返回true事件繼續向下傳遞。 5.事件對象的屬性 事件對象：當觸發事件時，事件對象就被創建了。在程序中使用事件只需要為處理函數添加一個參數。在事件處理函數中使用些參數。如，獲取事件發生時，相對於頁面的位置：event.pageX, event.pageY，event是事件處理函數的參數。 6.移除事件 移除某按鈕上的所有click 事件：$(「btn」).unbind(「click」) 移除某按鈕上的所有事件：$(「btn」).unbind(); one()：該方法可以為元素綁定處理函數。當處理函數觸發一次後，事件立即被刪除。即在每個對象上，事件處理函數只會被執行一次。 六、JQuery中的DOM動畫 通過設置DOM對象的顯示與隱藏方式，可以產生動畫效果。 1.無動畫效果的隱藏與顯示 hide()：在HTML文檔中，為一個元素調用hide()方法會將該元素的display樣式改為none。代碼功能同css(「display」, 「none」);相同。 show()：將元素的display樣式改為先前的顯示狀態。 toggle()：切換元素的可見狀態：如果元素時可見的，則切換為隱藏；如果元素時隱藏的，則切換為可見的。 2.通過設置透明度效果的隱藏與顯示，達到淡入淡出的動畫效果 fadeIn()，fadeOut()：只改變元素的透明度。fadeOut() 會在指定的一段時間內降低元素的不透明度，直到元素完全消失。fadeIn() 則相反。如，用600毫秒緩慢的將段落淡入：$("p").fadeIn("slow");。 fadeTo()：把不透明度以漸近的方式調整到指定的值(0 – 1 之間)。並在動畫完成後可選地觸發一個回調函數。如，用200毫秒快速將段落的透明度調整到0.25，動畫結束後，顯示一個「Animation Done」信息框：「$("p").fadeTo("fast", 0.25, function(){ alert("Animation Done."); });」。 3.通過設置高度效果的隱藏與顯示，達到滑下與收起的動畫效果 slideDown()，slideUp()：只會改變元素的高度。如果一個元素的display屬性為none，當調用slideDown() 方法時，這個元素將由上至下延伸顯示。slideUp() 方法正好相反，元素由下至上縮短隱藏。如，用600毫秒緩慢的將段落滑下：$("p").slideDown("slow");。 slideToggle()：通過高度變化來切換匹配元素的可見性。如，200毫秒快速將段落滑上或滑下，動畫結束後，會顯示一個「Animation Done」信息框：「$("p").slideToggle("fast",function(){ alert("Animation Done."); });」。 使用JavaScript、JQuery可以處理當前頁面的動態更新，再結合CSS樣式可以做出十分漂亮的UI，甚至比桌面軟體UI漂亮的多。JavaScript的編寫與調試非常麻煩，所以也有一些公司出品了專門針對JavaScript應用的簡化開發，比如Google出品的GWT，可以像使用Java編寫swing那樣編寫JavaScript。它為用戶提供像swing那樣的UI介面與事件等操作並且支持JAVA的核心庫。使用GWT自己的編譯器，可以將JAVA代碼編譯為JavaScript代碼、CSS樣式文件和HTML。
推薦閱讀：