【JavaScript】選擇器

1. ID選擇器

通過HTML元素的id屬性選取指定的元素，以 # 號開頭，加上 id 的名字

$("#id_name");

實例

//用戶點擊按鈕後，有 id="pid" 屬性的元素將被隱藏
$(function(){
    $("button").click(function(){
        $("#pid").hide();
    });
});

2. class選擇器

通過指定的 class 查找元素，以 . 開頭，加上 class 的名字

$(".class_name");

實例

//用戶點擊按鈕後所有帶有 class="type" 屬性的元素都隱藏
$(function(){
    $("button").click(function(){
        $(".type").hide();
    });
});

3. 元素選擇器

基於元素名選取元素，如果有多個，需要用到遍歷，直接寫元素名

$("a");//獲取所有的<a>元素

實例

//用戶點擊按鈕後，所有<p>元素都隱藏
$(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

4. 屬性選擇器

通過屬性選取元素，可用於自定義屬性，需要寫 [] 號，包含屬性名

$("select[name='Type']");//選取所有name屬性爲Type的<select>元素
$("div[data-type]");//獲取所有帶自定義屬性data-type的<div>元素
$("div[data-type="+type+"]");//獲取所有自定義屬性data-type爲變量type的<div>元素

5. 分組選擇器

以 , 號隔開，同時獲取多個類型的元素

$("div,a");//獲取所有<div>和<a>元素
$(".btn,.text")//獲取class爲"btn"或"text"的所有元素

6. 僞類選擇器

僞類	實例	說明
:first	$(“p:first”)	第一個<p>元素
:last	$(“p:last”)	最後一個<p>元素
:first-child	$(“p:first-child”)	屬於其父元素的第一個子元素的所有<p>元素
:last-child	$(“p:last-child”)	屬於其父元素的最後一個子元素的所有<p>元素
:nth-child(n)	$(“p:nth-child(2)”)	屬於其父元素的第二個子元素的所有<p>元素
:even	$(“tr:even”)	所有偶數位置的<tr>元素
:odd	$(“tr:odd”)	所有奇數位置的 <tr> 元素
:eq(index)	$(“ul li:eq(3)”)	列表中的第四個元素（index 值從 0 開始）
:gt(no)	$(“ul li:gt(3)”)	列舉 index 大於 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列舉 index 小於 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不爲空的輸入元素
:empty	$(":empty")	所有空元素

7. 後代選擇器

以空格分隔，從父類元素從左往右寫

$("div a");//<div>元素的後代的所有<a>元素
$(".type_ul input[type='checkbox']:checked")//獲取class爲type_ul的子元素<input>中type爲checkbox且被選中的元素

8. 子元素選擇器

後代選擇器會將元素底下的所有相關元素都搜索出來，如果想進一步縮小範圍，可以使用子元素選擇器，只會選擇某個元素的一級子元素，子元素用 > 號表示

$("#cusTable>tbody>tr");//id爲cusTable的元素的所有<tbody>元素的直接子元素的所有<tr>元素

9. 兄弟選擇器

選擇緊接在一個元素後的另一個元素，兩者有相同的父元素，用 + 號表示

$("div+p");//每個<div>元素相鄰的下一個<p>元素