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

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

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

$("#text")  //選取id屬性為“text”的元素

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

$(".test")  //選取文件中所有的class屬性為“test”的元素
 

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

*{
    width:100%;
    height:100%;
}

d: 標籤選擇器：$(“標籤”) 選取文件中所有匹配選擇器的元素

$("p")  //選取文件中所有的P元素

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

$("div,p,span,.test")// 選取文件中所有的div、p、span以及class屬性為“test”的元素

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

a: $(“標籤1 標籤2”) 獲取所有標籤1中的標籤2後代元素

$("div span") //獲取div下所有的span元素

b: $(“標籤1>標籤2”) 獲取所有標籤1中的標籤2子元素

$("div>span") //獲取div下所有的span子元素

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

$("div+p") //獲取緊跟div之後的P元素

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

$("div~p") //獲取div之後的所有兄弟節點P元素

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

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個元素

$("p:eq(3)")// 選取索引為3的P元素

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的元素

$("p:not(.test)") //選取class屬性不是“test”的P元素

9、 :header 選取文件中所有的標題元素

$(":header") //選取文件中所有的標題元素

10、 :focus 選取當前獲取焦點的元素

$(":focus")  //選取當前獲取焦點的元素

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

$("div:animated")  //選取當前正在執行動畫的div元素

B： 內容過濾

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

$("div:contains('jinlin')")  //選取所有中包含“jinlin”的div元素

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

$("td:empty")  //選取所有不包含子元素或者文字的

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

$("div:parent")  //選取文件中所有有子元素或者文字的div元素

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

$(":root") //選取整個文件的根元素

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

$("div:has(p)")  //選取所有含有P元素的div

C: 可見性過濾

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

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

2、 :visible選取所有可見

$("div:visible")  //選取所有可見的div

D: 屬性過濾

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

$("div[id]")  //選取所有包含id屬性的div

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的元素

$("div[titile*='text']")  //選取所有title中包含有“text”的div

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

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

E: 表單過濾

1、 :input 選取所有input元素

$(":input")  //選取所有input元素（包括input、textarea、select、button）

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

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

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

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

4、:image 選取所有的影象按鈕

$(":image")  //選取所有的影象按鈕

5、 :reset/:submit 選取所有的重置/提交按鈕

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

6、 :button 選取所有的按鈕

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

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

$(":file")  //選取所有的上傳控制元件

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

$(":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=0,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選擇器）