一、選擇器是什麼

有了jQuery的選擇器，我們幾乎可以獲取頁面上任意一個或一組對象

二、Dom對象和jQuery包裝集

1.Dom對象

JavaScript中獲取Dom對象的方式

<div id="divMsg">Hello World</div>
<script>
    var div = document.getElementById("divMsg");
    console.log(div);
    var divs = document.getElementsByTagName("div");
    console.log(divs);
</script>

輸出的結果

2.jQuery包裝集

可以理解為是Dom對象的擴展，在jQuery的世界中所有的對象，都被封裝成一個jQuery包裝集，包裝集是一個集合

<div id="divMsg">Hello World</div>
<script>
    $(function () {
        var div = $("#divMsg");
        console.log(div);
        var divs = $("div");
        console.log(divs);
    })
</script>

輸出的結果

3.Dom對象與jQuery對象的轉換

(1)Dom轉jQuery包裝集

<div id="divMsg">Hello World</div>
<script>
    //第一步：獲取Dom元素對象
    var div = document.getElementById("divMsg");
    //第二步：使用$()來轉換
    var $div = $(div);
    console.log($div);
</script>

(2)jQuery包裝集轉Dom對象

註：通過索引器返回的不再是jQuery包裝集，而是一個Dom對象

<div id="divMsg">Hello World</div>
<script>
    //第一步：通過索引器從包裝集獲取一個元素
    var div = $("#divMsg")[0];
    console.log(div);
</script>

三、選擇器的分類

1.jQuery選擇器按照功能主要分為“選擇”和“過濾”。並且可以配合使用，可以同時使用組合成一個選擇器字元串。主要的區別是：“過濾”作用的選擇器是指定條件從前面匹配的內容中篩選，“過濾”選擇器也可以單獨使用，表示從全部“*”中帥選。比如

而“選擇”功能的選擇器則不會有預設的範圍，因為作用是“選擇”而不是“過濾”；

2.基礎選擇器Basics

  1 $("#divId") 		         選取ID為divId的元素
  2 $("a") 			選取所有<a>元素
  3 $(".bgRed") 			選取class為bgRed的元素
  4 $("*")			選取所有元素
  5 $("#divId, a.bgRed")		選取ID為divId的元素，和class為.bgRed的<a>元素

3.層次選擇器

  1 $(".bgRed div") 		選取class為bgRed的元素中的所有<div>元素
  2 $(".myList>li") 		選取class為myList元素中的直接子節點<li>對象
  3 $("#hibiscus+img")		選取在id為hibiscus元素後面的img對象
  4 $("#someDiv~[title]")		選取id為someDiv的對象後面所有帶有title屬性的元素

4.基本過濾器Basic Filters

  1 $("tr:first")		         選取第一個<tr>元素
  2 $("tr:last")			選取最後一個<tr>元素
  3 $("input:not(:checked)")         選取未選中的 <input> 元素
  4 $("tr:odd")			選取偶數位置的<tr>元素
  5 $("tr:eq(1)")			選取第2個<tr>元素(索引從0開始)
  6 $("tr:gt(0)")			選取索引大於等於1的<tr>元素
  7 $("tr:lt(2)")			選取索引小於2的<tr>元素
  8 $(":header")                     選取頁面所有的標題

5.內容過濾器Content Filters

  1 $("div:contains('Kimisme')")     選取包含 "Kimisme" 的 <div>元素
  2 $("td:empty")			選取不包含子元素或者文本的<td>元素

  3 $("div:has(p)")		選取含有<p>元素的<div>元素
  4 $("td:parent")			選取含有子元素或者文本的 <td> 元素

6.可見性過濾器 Visibility Filters

  1 $("tr:hidden")			選取不可見的 <tr> 元素:
  2 $("tr:visible")		選取可見的 <tr> 元素:

7.屬性過濾器 Attribute Filters

  1 $("div[id]")			選取含有 id 屬性的 <div> 元素
  2 $("input[name='newsletter']")	選取 name 屬性是 newsletter 的 <input> 元素
  3 $("input[name!='newsletter']")	選取 name 屬性不是 newsletter 的 <input> 元素
  4 $("input[name^='news']")	選取 name 屬性以news開頭的 <input> 元素
  5 $("input[name$='letter']")	選取 name 以 letter 結尾的 <input> 元素: 
  6 $("input[name*='man']")		選取 name 包含 man 的 <input> 元素
  7 $("input[id][name$='man']")	選取含有 id 屬性，並且它的 name 屬性是以 man 結尾的<input>元素

8.子元素過濾器 Child Filters

  1 $("ul li:nth-child(2)")		在 <ul> 元素中查找第2個 <li> 元素
  2 $("ul li:first-child")		在 <ul> 元素中查找第1個 <li> 元素 
  3 $("ul li:last-child")		在 <ul> 元素中查找最後一個 <li> 元素 
  4 $("ul li:only-child")		在 <ul> 元素中查找是唯一子元素的 <li> 元素

9.表單選擇器Forms

  1 $(":input")			選取所有的<input>元素
  2 $(":text")			選取所有type=”text”的文本框
  3 $(":password")		         選取所有密碼框
  4 $(":radio")			選取所有單選按鈕
  5 $(":checkbox")		         選取所有覆選框 
  6 $(":submit")		         選取所有提交按鈕
  7 $(":image")			選取所有圖像域
  8 $(":reset")			選取所有重置按鈕
  9 $(":button")		         選取所有按鈕
 10 $(":file")			選取所有文件域

10.表單過濾器Form Filters

  1 $("input:enabled")		選取所有可用的input元素: 
  2 $("input:disabled")		選取所有不可用的input元素: 
  3 $("input:checked")		選取所有選中的覆選框元素:
  4 $("select option:selected")	選取所有選中的<select>元素:

四、參考文章

http://www.cnblogs.com/zhangziqiu/archive/2009/05/03/jQuery-Learn-2.html

五、備註

樣式發不出來還是不行，還是要用table，有空再改