ccckaass的部落格

[階層選擇器]

//物件中的某一種物件：
$('#div p').addClass('d1');
//物件中的所有物件(*)：
$('#div *').addClass('d1');
//之後符合條件的第一個(+)：
$('#div+p').addClass('d1');
//之後符合的所有(~)：
$('#div~p').addClass('d1');

[Data選擇器]

<div data-test="my_test_div">Select Me!</div>

1.

$('[data-test="my_test_div"]');

2.

$('div[data-test="my_test_div"]');

[子元素選擇器]

$("ul li:nth-child(2)");  //第 2 個節點
$("ul li:nth-child(odd)"); //所有奇數子節點
$("ul li:nth-child(3n + 1)"); //1, 4, 7 … 個節點
$("div span:first-child") //所有的div元素的第一個子節點
$("div span:last-child") //所有的div元素的最後一個節點
$("div button:only-child") //所有只有一個 button 子節點的 div

[屬性過濾選擇器]

$("div[id]"); //選擇所有含有id屬性的div元素 
$("input[name='Jack']"); //選擇所有的name屬性等於'Jack'的input元素 
$("input[name!='Jack']"); //選擇所有的name屬性不等於'Jack'的input元素 
$("input[name^='J']"); //選擇所有的name屬性以'J'開頭的input元素 
$("input[name$='K']"); //選擇所有的name屬性以'k'結尾的input元素 
$("input[name*='ck']"); //選擇所有的name屬性包含'ck'的input元素 
$("input[id][name$='man']"); //可以使用多個屬性進行聯合選擇，該選擇器是得到所有的含有id屬性並且屬性以man結尾的元素

[jQuery 自訂選擇器(Custom Selectors)]

:even //找出結果集中其偶數的 elements (2,4,6,8…)
:odd  //找出結果集為奇數(單數)的 elements (1,3,5,7…)
:eq(N), :nth(N) //找出選擇結果集 index 為 N 的 elements
:gt(N)//找出結果集中索引大於 N 的 elements
:lt(N)//找出結果集中索引小於 N 的 elements
:first//找出結果集中的第一個 element (相當於 eq(0) 或者 nth(0))
:last//選擇結果集中的最後一個 element
:parent//在結果集中選擇 elements，它必須具有子 elements(包括文本節點)
(跟 :empty 相反)
:contains('test')//選擇結果集中包含有指定文本的 elements
:has(selector)//找出結果集中至少出現一次某 selector 的元素
:not(selector)//反選取指定的 selector

[JavaScripts 選擇器]

**從form 取元素的 NAME** :
1. this.elements['name'] 以元素名稱(username)來取值
2. this.elements.name 集合中name屬性為username的值
3. document.getElementsByName("name")
**從form 取元素的 ID** :
1. this.id
**取得元素的 className值** :
1. 選擇器.className
**取得classname 當作選擇器** :
1.document.getElementsByClassName *會變成陣列