使用jQuery獲取元素
我們可以通過document.getElementById等方法獲取DOM對象图谷，但是方法名稱長主之，使用不方便酵幕，而且功能有限衬以，不能像CSS選擇器那樣靈活
jQuery定義了一套選擇器規(guī)則缓艳，和CSS選擇器目的一樣，都是為了選擇出符合特定規(guī)則的元素看峻。講jQuery不得不提到其選擇器阶淘，這是jQuery能夠快速流行的非常重要的原因，為了方便使用者jQuery刻意和CSS選擇器使用相同的語法互妓，幾乎支持所有類型的CSS3選擇器溪窒，當(dāng)然也有一些其特定的選擇器
選擇器
| 基本選擇器 |
|
| $('*') |
匹配頁面所有元素 |
| $('#id') |
id選擇器 |
| $('.class') |
類選擇器 |
| $('element') |
標(biāo)簽選擇器 |
| 組合/層次選擇器 |
|
| $('E,F') |
多元素選擇器，用”,分隔车猬，同時(shí)匹配元素E或元素F |
| $('E F') |
后代選擇器霉猛，用空格分隔，匹配E元素所有的后代（不只是子元素珠闰、子元素向下遞歸）元素F |
| $(E>F) |
子元素選擇器惜浅，用”>”分隔，匹配E元素的所有直接子元素 |
| $('E+F') |
直接相鄰選擇器伏嗜，匹配E元素之后的相鄰的同級元素F |
| $('E~F') |
普通相鄰選擇器（弟弟選擇器）坛悉，匹配E元素之后的同級元素F（無論直接相鄰與否） |
| $('.class1.class2') |
匹配類名中既包含class1又包含class2的元素 |
| 基本過濾選擇器 |
|
| $("E:first") |
所有E中的第一個(gè) |
| $("E:last") |
所有E中的最后一個(gè) |
| $("E:not(selector)") |
按照selector過濾E |
| $("E:even") |
所有E中index是偶數(shù) |
| $("E:odd") |
所有E中index是奇數(shù) |
| $("E:eq(n)") |
所有E中index為n的元素 |
| $("E:gt(n)") |
所有E中index大于n的元素 |
| $("E:lt(n)") |
所有E中index小于n的元素 |
| $(":header") |
選擇h1~h6 元素 |
| $("div:animated") |
選擇正在執(zhí)行動畫效果的元素 |
| 內(nèi)容過濾器 |
|
| $('E:contains(value)') |
內(nèi)容中包含value值的元素 |
| $('E:empty') |
內(nèi)容為空的元素 |
| $('E:has(F)') |
子元素中有F的元素伐厌，$('div:has(a)'):包含a標(biāo)簽的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 |
|
('E[attr=value]') |
屬性attr以value結(jié)尾的E |
| $('E[attr *=value]') |
屬性attr包含value的E |
| $('E[attr][attr *=value]') |
可以連用 |
| 子元素過濾器 |
|
| $('E:nth-child(n)') |
E的第n個(gè)子節(jié)點(diǎn) |
| $('E:nth-child(3n+1)') |
E的index符合3n+1表達(dá)式的子節(jié)點(diǎn) |
| $('E:nth-child(even)') |
E的index為偶數(shù)的子節(jié)點(diǎn) |
| $('E:nth-child(odd)') |
E的index為奇數(shù)的子節(jié)點(diǎn) |
| $('E:first-child') |
所有E的第一個(gè)子節(jié)點(diǎn) |
| $('E:last-child') |
所有E的最后一個(gè)子節(jié)點(diǎn) |
| $('E:only-child') |
只有唯一子節(jié)點(diǎn)的E的子節(jié)點(diǎn) |
| 表單元素選擇器 |
|
| $('E:type') |
特定類型的input |
| $(':checked') |
被選中的checkbox或radio |
| $('option: selected') |
被選中的option |
簡直就是復(fù)習(xí)CSS選擇器挣轨，正是得益于此，開發(fā)者在眾多js庫中迅速青睞于jQuery轩猩，看個(gè)圖方便記憶
- 除了使用選擇器jQuery還提供了一些方法幫助我們查找當(dāng)前元素相關(guān)元素
.eq(index), .get([index])
- 對于一個(gè)特定結(jié)果集卷扮，我們想獲取到指定index的jQuery對象，可以使用eq方法
$('div').eq(3); // 獲取結(jié)果集中的第四個(gè)jQuery對象
- 我們可以通過類數(shù)組下標(biāo)的獲取方式或者get方法獲取指定index的DOM對象均践，也就是我們說的jQuery對象轉(zhuǎn)DOM對象
$('div')[2];
$('div').eq(2);
get()不寫參數(shù)把所有對象轉(zhuǎn)為DOM對象返回
