JQ選擇器：
1.基本選擇器
①$(“#myDiv”); 根據給定的ID匹配一個元素。
②$(".myClass"); 根據給定的類匹配元素。
③$("div"); 根據給定的元素名匹配所有元素
④$("*"); 匹配所有元素,多用於結合上下文來搜索
⑤$("div,span,p.myClass"); 將每一個選擇器匹配到的元素合併後一起返回。你可以指定任意多個選擇器，並將匹配到的元素合併到一個結果內。
案例1：
// $('#b1')表示選中 b1這個控件
// $('#b1').click 給b1這個按鈕綁定 click事件
// function(){} 表示點擊b1按鈕時，要執行的函數體
案例2：所有p元素點擊時顯示當前的內容
說明：$(this)表示當前元素
2.層次選擇器
如果想通過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用層次選擇器.
①ancestor descendant
用法: $(“form input”);
說明: 在給定的祖先元素下匹配所有後代元素.這個要和下面的”parent > child”區分開.
②parent > child
用法: $(“form > input”) ;
說明: 在給定的父元素下匹配所有子元素.注意:要區分好後代元素與子元素
③prev + next
用法: $(“label + input”) ;
說明: 匹配所有緊接在 prev 元素後的一個 next 兄弟元素
④prev ~ siblings
用法: $(”form ~ input”) ;
說明: 匹配 prev 元素之後的所有 siblings 元素.注意:是匹配之後的元素,不包含該元素在內,並且siblings匹配的是和prev同輩的元素,其後輩元素不被匹配.
注意: (“prev ~ div”) 選擇器只能選擇“# prev ”元素後面的同輩元素; 而 jQuery 中的方法 siblings() 與前後位置無關, 只要是同輩節點就可以選取
備註：
prev + next表示選擇 prev 同一級的下一個元素 (強調：一個)
prev ~ siblings表示選擇 prev 同一級的後面所有元素(強調：所有)
3.過濾選擇器
-
過濾選擇器主要是通過特定的過濾規則來篩選出所需的 DOM 元素, 該選擇器都以“:” 開頭
-
按照不同的過濾規則, 過濾選擇器可以分爲基本過濾, 內容過濾, 可見性過濾, 屬性過濾, 子元素過濾和表單對象屬性過濾選擇器.
3.1基礎過濾選擇器
①:first
用法: $(”tr:first”) ;
說明: 匹配找到的第一個元素
②:last
用法:$(”tr:last”);
說明: 匹配找到的最後一個元素.與 :first 相對應.
③:not(selector)
用法:$(”input:not(:checked)”);
說明: 去除所有與給定選擇器匹配的元素.有點類似於”非”,意思是沒有被選中的input(當input的type=”checkbox”).
④:even
用法: $(”tr:even”)
說明: 匹配所有索引值爲偶數的元素，從 0 開始計數.js的數組都是從0開始計數的.例如要選擇table中的行,因爲是從0開始計數,所以table中的第一個tr就爲偶數0.
⑤:odd
用法: $(”tr:odd”)
說明: 匹配所有索引值爲奇數的元素,和:even對應,從 0 開始計數.
擴展：表格隔行換色
⑥:eq(index)
用法: $(”tr:eq(0)”)
說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號裏面的是索引值,不是元素排列數.
⑦:gt(index)
用法: $(”tr:gt(0)”)
說明: 匹配所有大於給定索引值的元素.
⑧:lt(index)
用法: $(”tr:lt(2)”)
說明: 匹配所有小於給定索引值的元素.
⑨:header(固定寫法)
用法: $(”:header”)
說明: 匹配如 h1, h2, h3之類的標題元素.這個是專門用來獲取h1,h2這樣的標題元素.
⑩:animated(固定寫法)
說明: 匹配所有正在執行動畫效果的元素
擴展：
function cartoon(){//執行動畫的方法
$("#mover").slideToggle("normal",cartoon);
}
cartoon();
3.2 內容過濾選擇器
內容過濾選擇器的過濾規則主要體現在它所包含的子元素和文本內容上
①:contains(text)
用法: $(”div:contains(’John’)”)
說明: 匹配包含給定文本的元素.這個選擇器比較有用，當我們要選擇的不是dom標籤元素時,它就派上了用場了,它的作用是查找被標籤”圍”起來的文本內容是否符合指定的內容的.
②:empty
用法: $(”td:empty”)
說明: 匹配所有不包含子元素或者文本的空元素
③:has(selector)
用法: $(”div:has(p)”).addClass(”test”)
說明: 匹配含有選擇器所匹配的元素的元素.這個解釋需要好好琢磨,但是一旦看了使用的例子就完全清楚了:給所有包含p元素的div標籤加上class=”test”.
④:parent
用法: $(”td:parent”) 返回值 集合元素
說明: 匹配含有子元素或者文本的元素.感覺與上面的”:empty”形成反義詞.
3.3 可見度過濾選擇器
可見度過濾選擇器是根據元素的可見和不可見狀態來選擇相應的元素
①:hidden
用法: $(”tr:hidden”)
說明: 匹配所有的不可見元素，input 元素的 type 屬性爲“hidden”的話也會被匹配到.意思是css中display:none和input type=”hidden”的都會被匹配到.同樣,要在腦海中徹底分清楚冒號”:”, 點號”.”和逗號”,”的區別.
擴展（提前瞭解）：JQ中使用each遍歷對象和數組
②:visible
用法: $(”tr:visible”)
說明: 匹配所有的可見元素.
3.4屬性過濾選擇器
屬性過濾選擇器的過濾規則是通過元素的屬性來獲取相應的元素
1、[attribute]
用法: $(”div[id]“)
說明: 匹配包含給定屬性的元素. 例子中是選取了所有帶”id”屬性的div標籤.
2、[attribute=value]
用法: $(”input[name='newsletter']“).attr(”checked”, true);
說明: 匹配給定的屬性是某個特定值的元素.例子中選取了所有 name 屬性是 newsletter 的 input 元素.
3、[attribute!=value]
用法: $(”input[name!='newsletter']“).attr(”checked”, true);
說明: 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素.此選擇器等價於:not([attr=value]),要匹配含有特定屬性但不等於特定值的元素,請使用[attr]:not([attr=value]).之前看到的 :not 派上了用場.
4、[attribute^=value]
用法: $(”input[name^=‘news’]“)
說明: 匹配給定的屬性是以某些值開始的元素.（類似於正則匹配的符號）
5、[attribute$=value]
用法: $(”input[name$=‘letter’]“)
說明: 匹配給定的屬性是以某些值結尾的元素.
6、[attribute*=value]
用法: $(”input[name*=‘man’]“)
說明: 匹配給定的屬性是以包含某些值的元素.
7、[attributeFilter1][attributeFilter2][attributeFilterN]
用法: $(”input[id][name$=‘man’]“)
說明: 複合屬性選擇器,需要同時滿足多個條件時使用.又是一個組合,這種情況我們實際使用的時候很常用.這個例子中選擇的是所有含有 id 屬性,並且它的 name 屬性是以 man 結尾的元素.
3.5 子元素過濾選擇器
1、:nth-child(index/even/odd/equation)
用法: $(”ul li:nth-child(2)”)
說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎過濾(Basic Filters)中的 eq() 有些類似,不同的地方就是前者是從0開始,後者是從1開始.
nth-child() 選擇器詳解如下：
(1) :nth-child(even/odd): 能選取每個父元素下的索引值爲偶(奇)數的元素
(2):nth-child(2): 能選取每個父元素下的索引值爲 2 的元素
(3):nth-child(3n): 能選取每個父元素下的索引值是 3 的倍數的元素
(4):nth-child(3n + 1): 能選取每個父元素下的索引值是 3n + 1的元素
2、:first-child
用法: $(”ul li:first-child”)
說明: 匹配第一個子元素.’:first’只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素.這裏需要特別點的記憶下區別.
3、:last-child
用法: $(”ul li:last-child”)
說明: 匹配最後一個子元素.’:last’只匹配一個元素,而此選擇符將爲每個父元素匹配一個子元素.
4、: only-child
用法: $(”ul li:only-child”)
說明: 如果某個元素是父元素中唯一的子元素,那將會被匹配.如果父元素中含有其他元素,那將不會被匹配.意思就是:只有一個子元素的纔會被匹配!
3.6 表單對象屬性過濾選擇器
此選擇器主要對所選擇的表單元素進行過濾
1、:enabled
用法: $(”input:enabled”)
說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不爲disabled,當然就爲enabled
2、:disabled
用法: $(”input:disabled”)
說明: 匹配所有不可用元素.與上面的那個是相對應的.
3、:checked
用法: $(”input:checked”)
說明: 匹配所有選中的被選中元素(複選框、單選框等，不包括select中的option).這話說起來有些繞口.
4、:selected
用法: $(”select option:selected”)
說明: 匹配所有選中的option元素.
擴展：總結jquery對象集合遍歷的四種形式
//必須用這個 val()函數把每個值打印;
var $objs = $("select option:selected");
/*
$.each($objs, function () {
alert($(this).val());
});*/
/*
$.each($objs, function (i, n) {
// alert(n.value);
alert($(n).val());
})*/
/*
$objs.each(function () {
window.alert($(this).val());
})*/
$objs.each(function (i, n) {
window.alert("ok" + $(n).val());
})
如何使用我們的選擇器
總結如下:
- 1.使用什麼樣的選擇器根據需求定
- 2.如果針對文檔內容，則使用內容選擇器
- 3.如果是選擇父子（祖先、後代）元素則使用層次選擇器
- 4. 如果是根據id/class/tagname/使用基本選擇器
- 5. 如果是選擇表單中的元素，則使用表單選擇器、表單對象屬性選擇器
- 6. 根據可見性選擇元素，則使用可見性選擇器
- 7. 如果是選擇某個元素中包含某個屬性（屬性值），則使用屬性選擇器
- 8. !!!如果考慮對選中的元素，要進行過濾，則使用過濾選擇器，（有三種方法）
$("div:contains('di')"); //內容
$("div[type]")//屬性
$("div .one")// 選中div 中含 class 爲 .one 的div元素
4. 表單選擇器
1、:input
用法: $(”:input”) ; 返回值 集合元素
說明:匹配所有 input, textarea, select 和 button 元素
2、:text
用法: $(”:text”) ; 返回值 集合元素
說明: 匹配所有的單行文本框.
3、:password
用法: $(”:password”) ; 返回值 集合元素
說明: 匹配所有密碼框.
4、:radio
用法: $(”:radio”) ; 返回值 集合元素
說明: 匹配所有單選按鈕.
5、:checkbox
用法: $(”:checkbox”) ; 返回值 集合元素
說明: 匹配所有複選框
6、:submit
用法: $(”:submit”) ; 返回值 集合元素
說明: 匹配所有提交按鈕.
7、:image
用法: $(”:image”) 返回值 集合元素
說明: 匹配所有圖像域.
8、:reset
用法: $(”:reset”) ; 返回值 集合元素
說明: 匹配所有重置按鈕.
9、:button
用法: $(”:button”) ; 返回值 集合元素
說明: 匹配所有按鈕.這個包括直接寫的元素button.
10、:file
用法: $(”:file”) ; 返回值 集合元素
說明: 匹配所有文件域.
11、:hidden
用法: $(”input:hidden”) ; 返回值 集合元素
說明: 匹配所有不可見元素，或者type爲hidden的元素.這個選擇器就不僅限於表單了,除了匹配input中的hidden外,那些style爲hidden的也會被匹配.
注意: 要選取input中爲hidden值的方法就是上面例子的用法,但是直接使用“:hidden”的話就是匹配頁面中所有的不可見元素,包括寬度或高度爲0的,
【代碼】https://github.com/rxbook/study-jquery-2/tree/master/JQ01-%E9%80%89%E6%8B%A9%E5%99%A8