jquery選擇器,過濾器介紹

2023-08-04 08:25:08

一、JQuery與JavaScript
1.JavaScript庫
使用過JavaScriptDOM的人都應該知道（比如昨天的練習），使用JSDOM進行頁面的操作是十分麻煩的。比如擷取、修改及添加子節點等這些操作。如果操作一個複雜的頁面呢？Ok，JavaScript庫是以誕生了。
目前比較常見的JavaScript庫有：
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。
詳細出處參考：http://www.jb51.net/article/26261.htm

jquery 浏覽器 javascript css gwt

上一篇: 初識RecyclerView(二)

下一篇: 帶包使用指令行編譯

繼續閱讀