jQuery選擇器

jQuery的視頻以實例為主,然後在對實例中用到的新的知識點進行歸納總結,這種講課的方式我挺喜歡的,尤其是在敲完實例之後後邊的總結對我的學習很有幫助,能跟著老師的講解回想例子中是怎樣應用的,為什麼應用等,到現在為止做瞭四個實例,發現每個例子的實現都離不開對DOM元素的操作,我們知道在操作DOM元素之前我們必須對其進行標識和選擇,而選擇元素的方法貌似很多,這四個實例中就用到瞭好幾個.本文將介紹如何選擇將被操作的元素

1.基本選擇器

基本選擇器是JQuery中最常用的選擇器,也是最簡單的選擇器,它通過元素id、class 和標簽名來查找DOM元素。這個非常重要,下面的內容都是以此為基礎,逐級提高的。

(1)“$(“#id”)”,獲取id指定的元素,id是全局唯一的,所以它隻有一個成員。

(2)“$(“a”)”,獲取所有鏈接()元素

(3)“$(“.class”)”,獲取class指定的元素,不同的元素可以具有相同的class屬性,所以它可能具有多個成員。

(4)“$(“element”)”,獲取element(元素名,比如p、table等)指定的元素,它可能具有多個成員。

(5)“$(“*”)”,獲取所有元素,相當於document。

2.層次選擇器

通過DOM元素間的層次關系獲取元素,其主要的層次關系包括後代、父子、相鄰、兄弟關系,通過其中基類關系可以方便快捷地定位元素

(1)“$(“ancestordescendant”)”,獲取給定的祖先元素下匹配的所有後代元素,註:這裡可能有好幾集的關系.

如: $(‘p span’).css(‘display’, ‘block’); //顯示p中所有的標記

(2)“$(“parent> child”)”,獲取給定的父類元素下匹配的直接子類元素,註:這裡隻有一級的關系.

如: $(‘p>span’).css(‘display’, ‘block’); //顯示

中子標記

(3)“$(“pre+ next”)”,獲取緊隨pre元素的後一個兄弟元素,可以使用.next()代替.

如: $(‘#userName +p’).css(‘display’, ‘block’);$(‘#userName).next().css(‘display’,’block’); //都是顯示ID為userName元素後的下一個

(4)“$(“pre ~ siblings”)”,獲取pre元素後邊的所有兄弟元素,可以使用.nextAll()代替

如: $(‘# userName ~ p’).css(‘display’, ‘block’);$(‘#userName).nextAll().css(‘display’, ‘block’); //都是顯示ID為userName元素後的所有

3.過濾選擇器

通俗的講, Selector選擇器就是”一個表示特殊語意的字符串”. 隻要把選擇器字符串傳入上面的方法中就能夠選擇不同的Dom對象並且以jQuery包裝集的形式返回. 按照不同的過濾規則,過濾選擇器可以分為基本過濾,內容過濾,可見性過濾,屬性過濾,子元素過濾和表單對象屬性過濾選擇器。

(1). 基本過濾選擇器

1)“:first”,選取第一個元素。

如:“$(“li:first”)”返回所有li元素的第一個li元素,它仍然被保存在集合中。

2) “:last”,選取最後一個元素。

如:“$(“li:last”)”返回所有li元素的最後一個li元素,它仍然被保存在集合中。

3) “:not(selector)”,去除所有與給定選擇器匹配的元素。

如:“$(“input:not(:checked)”)”返回所有input元素,但去除被選中的元素(單選框、多選框)。

4)“:even”,選取所有元素中偶數的元素,索引從0開始。

如: $(“tbody tr:even”)返回表格內容區域中所有數組下標為偶數的行

5)“:odd”,選取所有元素中奇數的元素,索引從0開始。

如: $(“tbody tr:odd”)返回表格內容區域中所有數組下標為奇數的行

6)“:eq(index)”,根據索引值得到jQuery對象中包含的多個元素中的某一個元素,索引從0開始。

7) “:gt(index)”,選取索引大於指定index的元素,索引從0開始。

8) “:lt(index)”,選取索引小於指定index的元素,索引從0開始。

9) “:header”,選取所有的標題元素,如h1、h2等。

10)“:animated”,選取當前正在執行的所有動畫元素。

(2). 內容過濾選擇器

1) “:contains(text)”,選取包含text文本內容的元素。

2) “:empty”,選取不包含子元素或者文本節點的空元素。

3) “:has(selector)”,選取含有選擇器所匹配的元素的元素。

4) “:parent”,選取含有子元素或文本節點的元素。(它是一個父節點)

(3). 可見性過濾選擇器

1)“:hidden”,選取所有不可見元素。

2) “:visible”,選擇所有可見元素。

(4).屬性過濾選擇器

1) “[attribute]”,選取擁有此屬性的元素。

2) “[attribute=value]”,選取指定屬性值為value的所有元素

3) “[attribute!=value]”,選取屬性值不為value的所有元素。

4) “[attribute^= value]”,選取屬性值以value開始的所有元素。

5) “[attribute$= value]”,選取屬性值以value結束的所有元素。

6) “[attribute*= value]”,選取屬性值包含value的所有元素。

7) “[selector1][selector2]…[selectorN]”,復合性選擇器,首先經[selector1]選擇返回集合A,集合A再經過[selector2]選擇返回集合B,集合B再經過[selectorN]選擇返回結果集合。

(5). 子元素過濾選擇器

1):nth-child(even/odd):能選取每個父元素下的索引值為偶(奇)數的元素。

如:$(“li:nth-child(even)”).addClass(“GetFocus”);//增加每個父元素下索引值為偶數的子元素類別

2):nth-child(2):能選取每個父元素下的索引值為 2 的元素。

如: $(“li:nth-child(2)”).addClass(“GetFocus”);//增加每個父元素下的第2個子元素類別

3):nth-child(3n):能選取每個父元素下的索引值是 3 的倍數的元素。

如: $(“li:nth-child(3n)”).addClass(“GetFocus”);//增加每個父元素下索引值為3的倍數的元素類別

4):first-child,選取第一個子元素。

如:$(“”li:first-child””).addClass(“GetFocus”);//增加每個父元素下的第一個子元素類別

5):last-child,選取最後一個子元素。

如:$(” li:last-child “).addClass(“GetFocus”);//增加每個父元素下的最後一個子元素類別

6):only-child,選取唯一子元素,它的父元素隻有它這一個子元素。

如: $(” li:only-child “).addClass(“GetFocus”); //增加每個父元素下隻有一個子元素類別

(6). 表單過濾選擇器

1)“:input”,選取所有、