Jquery選取器全總結

1.Jquery選取器簡介

　　(1) Jquery中的選取器完全繼承了CSS的風格，利用Jquery選取器，可以非常便捷和快速的找出特定的Dom元素，然後為他們添加相應的行為，而無需擔心瀏覽器是否支援這一選取器，學會使用選取器是學習Jqeury的基礎，Jquery的行為規則都必須在擷取到元素後才會生效。

2.jquery選取器的優勢

　　(1) 簡潔的寫法，$()函數

　　(2)支援CSS1到CSS3選取器

　　(3)完善的處理機制

3.下面我們主要來說一下Jquery中所有的選取器

　　(1) 基本選取器：通過元素id,class和標籤名等來尋找Dom元素

     　　1)$("#id") 根據給定的ID匹配一個元素，返回單個元素  $("#name")選取Id為test的元素

    　　 2)$(".class") 根據給定的類名匹配元素 返回集合元素  $(".class")選取所有class為class的元素

     　　3)$("element") 根據給定的元素名匹配元素，返回集合元素  $("input")選取所有的input元素

     　　4)$("*") 匹配所有的元素，返回集合元素，$("*")選取所有的元素

     　　5)$("selector1,selector2,...,selectorN") 將每一個選取器匹配到的元素合并後返回集合元素， $("div,span,p.myClass")選取所有<div>,<span>和擁有class為myClass的<p>標籤的一組元素

　　(2)層次選取器：如果想通過Dom元素之間的層次關係來擷取特定元素，例如後代元素，子項目，相鄰元素和同輩元素

     　　1)$("ancestor descendant") 獲得ancestor元素裡面的所有descendant(後代)元素，$("div span")選取<div>裡的所有的<span>元素

     　　2)$("parent>child") 選取parent元素下的child(子)元素，返回集合元素 $("div span")選取<div>元素下元素名為<span>的子項目

           　　 註解：和$("ancestor descendant")有區別，$("ancestor descendant")選擇的是後代元素

    　　 3)$("prev+next") 選取緊接在prev元素後的next元素，返回集合元素，$(".one+div")選取class為one的下一個<div>同輩元素

     　　4)$("prev~siblings") 選取prev元素之後的所有siblings元素，$("#two~div")選取Id為two的元素後面的所有<div>同輩元素

            　　註解:可以使用next()方法來替代$('prev+next')選取器  $(".one").next("div");可以使用nextAll()方法來替代$("prev~siblings")選取器 $("#two").nextAll(div)

　　(3)過濾選取器：主要通過特定的過濾規則來篩選出所需要的Dom元素，按照不同的過濾規則，過濾選取器可以分為基本過濾，內容過濾，可見度過濾，屬性過濾，子項目過濾和表單對象屬性過濾選取器

     　　1)基本過濾選取器

           　　 1)$(":first") 選取第一個元素，$("div:first")選取所有<div>元素中第一個<div>元素。

          　　  2)$(":last")選取最後一個元素，$("div:last")選取所有<div>元素中最後一個<div>元素。

           　　3)$(":not(selector)")去除所有與給定選取器匹配的元素，$("input:not(.myClass)")選取class不是myClass的<input>元素。

           　　 4)$(":even")選取索引是偶數的所有元素，索引從0開始，$("input:even")選取索引是偶數的<input>元素

          　　  5)$(":odd")選取索引是奇數的所有元素，索引從0開始，$("input:odd")選取索引是奇數的<input>元素

          　　  6)$(":eq(index)")選取索引等於index的元素，(index從0開始)，$("input:eq(1)")選取索引等於1的<input>元素

            　　7)$(":gt(index)")選取索引大於index的元素，(index從0開始)，$("input:gt(1)")選取索引大於1的<input>元素(大於1，而不包括1)

           　　 8)$(":lt(index)")選取索引小於index的元素，(index從0開始)，$("input:lt(1)")選取索引小於1的<input>元素(小於1，而不包括1)

          　　  9)$(":header")選取所有的標題元素，例如：h1,h2,h3等等，$(":header")選取網頁中的所有的<h1>,<h2>,<h3>...

           　　 10)$(":animated")選取當前正在執行動畫的所有元素，$("div:animated")選取正在執行動畫的<div>元素。

           　　 11)$(":focus")選取當前擷取焦點的元素，$(":focus")選取當前擷取焦點的元素

     　　2)內容過濾選取器：主要體現在它所包含的子項目或者常值內容上面

         　　   1)$(":contains(text)")選取含有文本為"text"的元素，$("div:contains('我')")選取含有文本"我"的<div>元素

          　　  2)$(":empty")選取不包含子項目或者文本的空元素，$("div:empty")選取不包含子項目(包括文本元素)的<div>空元素

          　　  3)$(":has(selector)")選取含有選取器所匹配的元素的元素，$("div:has(p)")選取含有<p>元素的<div>元素

           　　 4)$(":parent")選取含有子項目或者文本的元素,$("div:parent")選取擁有子項目(包括文本元素)的<div>元素

    　　 3)可見度過濾選取器：根據元素的可見和不可見狀態來選擇相應的元素

           　　 1)$(":hidden")選取所有不可見的元素，$(":hidden")選取所有不可見的元素，包括<input type="hidden" />，

           　　 <div style="display:none;">和<div style="visibility:hidden;">等元素。如果只想選取<input>元素，可以使用$("input:hidden")

           　　 2)$(":visible")選取所有可見的元素，$("div:visible")選取所有可見的<div>元素

     　　4)屬性過濾選取器：通過元素的屬性來擷取相應的元素

           　　 1)$("[attribute]")選取擁有此屬性的元素，$("div[id]")選取擁有屬性Id的<idv>元素。

           　　 2)$("[attribute=value]")選取屬性的值為value的元素，$("div[title=test]")選取屬性title為"test"的<div>元素

           　　 3)$("[attribute!=value]")選取屬性的值不等於value的元素，$("div[title!=test]")選取屬性title不等於"test"的<div>元素(注意：沒有屬性title的<div>元素也會被選取)

            　　4)$("[attribute^=value]")選取屬性的直以value開始的元素，$("div[title^=test]")選取屬性title以"test"開始的<div>元素

            　　5)$("[attribute$=value]")選取屬性的值以value結束的元素，$("div[title$=test]")選取屬性title以"test"結束的<div>元素

          　　  6)$("[attribute*=value]")選取屬性的值含有value的元素，$("div[title*=test]")選取屬性title含有"test"的<div>元素

          　　  7)$("[attribute|=value]")選取屬性等於給定字串或以給字串為首碼(該字串後跟一個連字號"-")的元素,$("div[title|="en"]")選取屬性title等於en或者以en為首碼(給字串後跟一個"-")的元素

           　　 8)$("[attribute~=value]")選取屬性用空格分隔的值中包含一個給定值得元素，$("div[title~='uk']")選取屬性title用空格分隔的值中包含字元uk的元素

            　　9)$("[attribute1][attribute2][attribute3]")用屬性選取器合并成一個複合屬性選取器，滿足多個條件，每選擇一次，縮小一次範圍

                   　　$("div[id][title$='test']")選取擁有屬性id，並且屬性title以"test"結束的<div>元素

     　　5)子項目過濾選取器

           　　 註解：子項目過濾選取器的過濾規則相對於其他的選取器稍微有些複雜，只要將元素的父元素和子項目區分清楚，使用起來還是相當簡單的

         　　   1)$(":nth-child(idenx/even/odd/equation)")選取每個父元素下的第index個子項目或者奇偶元素(idnex從1算起)

                  　　 :eq(index)只匹配一個元素，而:nth-child將為每一個父元素匹配子項目，並且:nth-child(index)的index是從1開始的，

                 　　  而:eq(index)是從0開始的

          　　  2)$(":first-child")選取每個父元素的第一個子項目，:first只返回單個元素，而:first-child選擇符將為每個父元素匹配第一個

                　　   子項目，例如:$("ul li:first-child");選取每個<ul>中的一個<li>元素

           　　 3)$(":last-child")選取每個父元素的最後一個子項目,和上面一樣，:last只返回當個元素，而:last-child選擇符將為每個符永

                   元素匹配最後一個子項目，例如：$("ul li:first-child");選取每個<ul>中的最後一個<li>元素。

           　　 4)$(":only-child")如果某個元素是它父元素中唯一的子項目，那麼將會被匹配，如果父元素中含有其他元素，這不會被匹配

                　　   $("ul li:only-child")在<ul>中選取是唯一子項目的<li>元素

          　　  5):nth-child()選取器是很常用的子項目過濾器，詳細功能如下：

                 　　  1)$(:nth-child(even))能選取每個父元素下的索引值是偶數的元素

                   　　2)$(:nth-child(odd))能選取到每個父元素下的索引值是奇數的元素

                  　　 3)$(:nth-child(2))能選取到每個父元素下索引值等於2的元素

                 　　  4)$(:nth-child(3n))能選取到每個父元素下索引值是3的倍數的元素(n從1開始)

                  　　 5)$(:nth-child(3n+1))能選取每個父元素下索引值是(3n+1)的元素(n從1開始)

    　　 6)表單對象過濾選取器：對所選擇的表單進行過濾

          　　  1)$(:enabled)選取所有可用元素，$("#form :enabled");選取id為"form"的表單內的所有可用元素

            　　2)$(:disabled)選取所有停用元素，$("#form :enabled");選取id為"form"的表單內的所有不可用元素

            　　3)$(:checked)選取所有被選中的元素(單選框，複選框)，$("input:checked")選取所有被選中的<input>元素

           　　4)$(:selected)選取所有被選中的選項元素(下拉式清單)，$("select option:selected")選取所有被選中的選項元素

　　(4)表單選取器：方便的擷取到表單的某個或者某類型的元素

     　　1)$(":input")選取所有的<input>,<textarea>,<select>,<button>元素

     　　2)$(":text")選取所有的單行文字框

     　　3)$(":password")選取所有的密碼框

    　　 4)$(":radio")選取所有的單選框

    　　 5)$(":checkbox")選取所有的多選框

    　　 6)$(":submit")選取所有的提交按鈕

     　　7)$(":image")選取所有的映像按鈕

     　　8)$(":reset")選取所有的重設按鈕

     　　9)$(":button")選取所有的按鈕

     　　10)$(":file")選取所有的上傳域

     　　11)$(":hidden")選取所有的隱藏元素

4.選取器中的一些注意事項

　　(1) 選取器中含有特殊符號的注意事項

    　　 1)選取器中含有".","、","#","(","]"等特殊字元

           　　 根據w3c的規定，屬性中是不能含有這些特殊字元的，但在實際項目中偶爾會遇到運算式中含有"#","."等特殊字元，如果按照普通的方式去處理的話可能會出現錯誤，解決此類錯誤是使用轉義符轉義

                   例如：<div id="id#b">韓迎龍</div><div id="id[1]">韓迎龍</div>,這時的取法是這樣的 $("#id\\#b"),$("#id\\[1\\]")                        

    　　 2)屬性選取器的@符號問題

           　　 在Jquery升級版本的過程中，jquery在1.3.1版本中徹底放棄了1.1.0版本遺留下來的@符號，加入你使用的是1.3.1以上的版本，

            　　那麼你不需要再屬性前添加@符號，例如：

          　　  $("div[@title='test']")，正確的寫法就是去掉@符號，$(div[title='test'])

　　(2)選取器中含有空格的注意事項

     　　選取器中的空格是不容忽視的，多一個空格或者少一個空格也許會得到截然不同的結果