jQuery選擇器和JS選擇器

jQuery選擇器：

jQuery選擇器的寫法和CSS選擇器的寫法非常相似，在學習之前了解下CSS選擇器，對掌握jQuery選擇器是非常有幫助的

(一) 基本選擇器：主要包含id選擇器、class選擇器、*選擇器、标簽選擇器以及複合選擇器

a: Id選擇器：$(“#ID”) 選取id屬性為“ID”的元素

b:class選擇器：$(“.class”) 選取所有class屬性為“class”的元素（id是單一的，而class則可以多次使用同一命名）

c: *選擇器：$(“*”) 選取所有元素

*{
    width:%;
    height:%;
}
           

d: 标簽選擇器：$(“标簽”) 選取文檔中所有比對選擇器的元素

e: 複合選擇器：$(“selector1，selector2，selector3”) 選取文檔中所有選擇器比對的元素

(二) 層級選擇器：根據元素之間的層次關系來擷取特定的元素

a: $(“标簽1 标簽2”) 擷取所有标簽1中的标簽2後代元素

b: $(“标簽1>标簽2”) 擷取所有标簽1中的标簽2子元素

c: $(“标簽1+标簽2”) 擷取緊跟标簽1之後的标簽2元素，和$(“标簽1”).next(“标簽2”)的效果一樣

d:$(“标簽1~标簽2”) 擷取緊跟标簽1之後的所有标簽2元素，和$(“标簽1”).nextAll(“标簽2”)的效果一樣

(三) 過濾選擇器：過濾選擇器可以分為基本過濾、内容過濾、可見性過濾、屬性過濾、表單過濾

A: 基本過濾

1、 :first/:last 選取第一個/最後一個元素

$("p:first")// 選取第一個P元素
$("p:last")// 選取最後一個P元素
           

2、 :first-child/:last-child/:nth-child/:nth-last-child 選取其父元素下第一個/最後一個/第n（>=1）個/倒數第n個比對的子元素

$("ul li:first-child") //選取每一個ul中的第一個子元素，如果第一個不是li，則不比對，這是和:first的差別

$("ul li:last-child") //選取每一個ul中的最後一個子元素，如果最後一個不是li，則不比對，這是和:last的差別

$("ul li:nth-child(n)") //選取每一個ul中的第n個子元素，如果第n個不是li，則不比對

$("ul li:nth-last-child(n)") //選取每一個ul中的倒數第n個子元素，如果倒數第n個不是li，則不比對
           

3、 :first-of-type/:last-of-type/:nth-of-type/:nth-last-of-child選取其父元素下第一個/最後一個/第n（>=1）個/倒數第n個比對的子元素

$("ul li:first-of-type") //選取每一個ul中的第一個li子元素,這是和:firs-child的差別

$("ul li:last-of-type") //選取每一個ul中的最後一個li子元素這是和:last-child的差別

$("ul li:nth-of-type(n)") //選取每一個ul中的第n個li子元素，這是和:nth-child(n)的差別

$("ul li:nth-last-of-type(n)") //選取每一個ul中的倒數第n個li子元素，這是和:nth-last-child(n)的差別
           

4、:only-child/:only-of-type 選取父元素中唯一的子元素/選取父元素中唯一的子元素而且子元素沒有兄弟元素

$("ul li:only-child");  //選取ul中隻有一個li的元素

$("ul li:only-of-type"); //選取ul中隻有一個li子元素的元素
           

5、 :eq(n) 選取第n個元素

6、:even/:odd 選取索引為偶數/奇數的元素

$("p:even") //選取索引為偶數的P元素
$("p:odd") //選取索引為奇數的P元素
           

7、 :gt(n)/:lt(n) 選取索引大于/小于n的元素

$("p:gt(10)") //選取索引大于10 的P元素
$("p:lt(10)") //選取索引小于10 的P元素
           

8、 :not(selector) 選取不比對selector的元素

9、 :header 選取文檔中所有的标題元素

10、 :focus 選取目前擷取焦點的元素

11、 :animated 選取所有正在執行動畫效果的元素

B： 内容過濾

1、 :contains(text) 選取包含給定文本的元素

2、 :empty 選取不包含任何子元素或者文本的空元素

3、 :parent 選取含有子元素或者文本的元素

4、 :root 選取該文檔的根元素，在HTML中，文檔的根元素，永遠是html

5、:has(selector) //選取所有含有選擇器所比對的元素的元素

C: 可見性過濾

1、 :hidden 選取所有不可見或者type為hidden的元素

$("input:hidden")  //選取所有type為hidden的元素
$("div:hidden")  //選取所有隐藏的div
           

2、 :visible選取所有可見

D: 屬性過濾

1、 [attribute] 選取包含給定屬性的元素

2、 [attribute=value]/ [attribute!=value] 選取包含給定屬性的值為/不為value的元素

$("div[class='test']")  //選取所有class屬性值為test的div元素
$("div[id!='test']")  //選取所有id屬性值不為test的div元素
           

3、 [attribute^=value]/[attribute$=value] 選取以value為開頭/結尾的元素

$("div[title^='text']")  //選取title屬性以text開頭的div元素
$("div[title$='text']")  //選取title屬性以text結尾的div元素
           

4、 [attribute*=value] 選取屬性中包含value的元素

5、 [attribute=value] [attribute=value] 選取同時滿足多個屬性選擇器條件的元素

$("input[id][name='name']")  //選取有ID屬性并且name屬性值為“name”的input元素
           

E: 表單過濾

1、 :input 選取所有input元素

2、 :text/:password 選取所有的單行文本框/密碼框

$(":text")  //選取所有的單行文本框
$("password")   //選取所有的密碼框
           

3、 :radio/:checkbox 選取所有的單選框/複選框

$(":radio")  //選取所有的單選框
$(":checkbox")  //選取所有的複選框
           

4、:image 選取所有的圖像按鈕

5、 :reset/:submit 選取所有的重置/送出按鈕

$(":reset")  //選取所有的重置按鈕
$(":submit")  ///選取所有的送出按鈕
           

6、 :button 選取所有的按鈕

7、 :file 選取所有的上傳控件

8、 :hidden 選取所有的不可見元素

JS選擇器

JS選擇器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

A： getElementById(ID): 傳回對指定ID的第一個對象的引用，如果在文檔中查找一個特定的元素，最有效的方法是getElementById()，文法格式為：

oElement = document. getElementById (ID);

var x=document. getElementById("text")  //在文檔中查找到id屬性值為text的元素，x得到的是一個對象[object]，不是一個具體的值
           

但是getElementById()在IE6/7下有可能執行的結果是不同的，在ie6/7中，getElementById(idvalue)同時查詢id、name兩個值，傳回的結果是第一個name或者id等于idvalue的對象，并不是僅按照id來查找的

input type="text" name="test1" id="test" value="測試1" />
<input type="text" name="test2" id="test1"  value="測試2" />
<script type="text/javascript">
    var $test = document.getElementById("test1").value;
    alert($test);  //在ie6/7下輸出的結果是“測試1”
</script>
           

可以通過以下方法确定确定通過id擷取到

var getElementById = function(ids){
    var idvalue = document.getElementById(ids);
        if(idvalue.id === ids){
            return idvalue;
        }else{
            var node = document.all[id];
            for(var i=,len=node.length;i<len;i++){
                if(node[i].id===id)
                    return node[i];
            }
        }
}
           

B: getElementsByName(name): 傳回文檔中name屬性為name值的元素，因為name屬性值不是唯一的，是以查詢到的結果有可能傳回的是一個數組，而不是一個元素。文法格式為:

oElement = document. getElementsByName (name);

<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<script type="text/javascript">
    var x=document.getElementsByName("myInput");
    alert(x.length); //輸入的結果為3
</script>
           

getElementsByName(name)在舊版浏覽器中不支援除input之外的标簽

C: getElementsByTagName(tagname): 傳回文檔中指定标簽的元素，文法格式為：

oElement = document. getElementsByTagName (tagname);

<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<input name="myInput" type="text" size="20" />
<script type="text/javascript">
    var x=document.getElementsByTagName("input");
    alert(x.length); //輸入的結果為3
</script>
           

D: getElementsByClassName():傳回文檔中所有指定類名的元素，文法格式為:

oElement = document. getElementsByClassName (classname);

<div class="example">第一個</div>
<div class="example color">第二個</div>
<script type="text/javascript">
    var x=document.getElementsByClassName("example");
    alert(x.length); //輸入的結果為2
</script>
           

E: querySelector():傳回文檔中比對指定css選擇器的第一個元素，文法格式為:

oElement = document. querySelector(css selector);

document.querySelector(“p”)  //傳回文檔中第一個P元素
           

F: querySelectorAll():傳回文檔中比對指定css選擇器的第一個元素，文法格式為:

oElement = document. querySelectorAll(css selector);
document.querySelectorAll(".test")//傳回文檔中所有class值為test元素;
           

（原生的JS選擇速度相比較之下會快于同等條件下的JQuery選擇器）