選擇器
| 基本選擇器 | |
|---|---|
| $('*') | 匹配頁面所有元素 |
| $('#id') | id選擇器 |
| $('.class') | 類選擇器 |
| $('element') | 標簽選擇器 |
| 組合/層次選擇器 | |
| $('E,F') | 多元素選擇器，用”,分隔，同時匹配元素E或元素F |
| $('E F') | 后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F |
| $(E>F) | 子元素選擇器，用”>”分隔，匹配E元素的所有直接子元素 |
| $('E+F') | 直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F |
| $('E~F') | 普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否） |
| $('.class1.class2') | 匹配類名中既包含class1又包含class2的元素 |
| 基本過濾選擇器 | |
| $("E:first") | 所有E中的第一個 |
| $("E:last") | 所有E中的最后一個 |
| $("E:not(selector)") | 按照selector過濾E |
| $("E:even") | 所有E中index是偶數 |
| $("E:odd") | 所有E中index是奇數 |
| $("E:eq(n)") | 所有E中index為n的元素 |
| $("E:gt(n)") | 所有E中index大于n的元素 |
| $("E:lt(n)") | 所有E中index小于n的元素 |
| $(":header") | 選擇h1~h6 元素 |
| $("div:animated") | 選擇正在執行動畫效果的元素 |
| 內容過濾器 | |
| $('E:contains(value)') | 內容中包含value值的元素 |
| $('E:empty') | 內容為空的元素 |
| $('E:has(F)') | 子元素中有F的元素，$('div:has(a)'):包含a標簽的div |
| $('E: parent') | 父元素是E的元素，$('td: parent'):父元素是td的元素 |
| 可視化選擇器 | |
| $('E:hidden') | 所有被隱藏的E |
| $('E:visible') | 所有可見的E |
| 屬性過濾選擇器 | |
| $('E[attr]') | 含有屬性attr的E |
| $('E[attr=value]') | 屬性attr=value的E |
| $('E[attr !=value]') | 屬性attr！=value的E |
| $('E[attr ^=value]') | 屬性attr以value開頭的E |
|
|
屬性attr以value結尾的E |
| $('E[attr *=value]') | 屬性attr包含value的E |
| $('E[attr][attr *=value]') | 可以連用 |
| 子元素過濾器 | |
| $('E:nth-child(n)') | E的第n個子節點 |
| $('E:nth-child(3n+1)') | E的index符合3n+1表達式的子節點 |
| $('E:nth-child(even)') | E的index為偶數的子節點 |
| $('E:nth-child(odd)') | E的index為奇數的子節點 |
| $('E:first-child') | 所有E的第一個子節點 |
| $('E:last-child') | 所有E的最后一個子節點 |
| $('E:only-child') | 只有唯一子節點的E的子節點 |
| 表單元素選擇器 | |
| $('E:type') | 特定類型的input |
| $(':checked') | 被選中的checkbox或radio |
| $('option: selected') | 被選中的option |
簡直就是復習CSS選擇器有木有，正是得益于此，開發者在眾多js庫中迅速青睞于jQuery，看個圖方便記憶
除了使用選擇器jQuery還提供了一些方法幫助我們查找當前元素相關元素
.eq(index), .get([index])
對于一個特定結果集，我們想獲取到指定index的jQuery對象，可以使用eq方法
$('div').eq(3); // 獲取結果集中的第四個jQuery對象
我們可以通過類數組下標的獲取方式或者get方法獲取指定index的DOM對象，也就是我們說的jQuery對象轉DOM對象
$('div')[2];
$('div').eq(2);
get()不寫參數把所有對象轉為DOM對象返回
兄弟元素獲取
.next([selector]), .prev([selector])
next取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。如果提供一個選擇器，那么只有緊跟著的兄弟元素滿足選擇器時，才會返回此元素。prev正好相反，獲取元素之前的同輩元素
$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])
nextAll獲得每個匹配元素集合中每個元素所有后面的同輩元素，選擇性篩選的選擇器，prevAll與之相反，獲取元素前面的同輩元素
.siblings([selectors])
獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器
$('li.third-item').siblings()
父子元素獲取
.parent([selector])
取得匹配元素集合中，每個元素的父元素，可以提供一個可選的選擇器
$('li.item-a').parent()
.parents([selector])
獲得集合中每個匹配元素的祖先元素，可以提供一個可選的選擇器作為參數
$('li.item-a').parents('div')
.children([selector])
獲得匹配元素集合中每個元素的子元素，選擇器選擇性篩選
$('ul.level-2').children()
.find([selector])
查找符合選擇器的后代元素
$('ul').find('li.current');
篩選當前結果集
.first()
獲取當前結果集中的第一個對象
.last()
獲取當前結果集的最后一個對象
.filter(selector), .filter(function(index))
篩選當前結果集中符合條件的對象，參數可以是一個選擇器或者一個函數
$('li').filter(':even')
$('li').filter(function(index) {
return index % 3 == 2;
})
.not(selector), .not(function(index))
從匹配的元素集合中移除指定的元素，和filter相反
.is(selector), is(function(index)), is(dom/jqObj)
判斷當前匹配的元素集合中的元素，是否為一個選擇器，DOM元素，或者jQuery對象，如果這些元素至少一個匹配給定的參數，那么返回true
if ( $target.is("li") ) {
$target.css("background-color", "red");
}
.has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素
$('li').has('span')
