一、原生 js 的 dom 選擇器

document.getElementById('id屬性值')
document.getElementsByTagName('div')[0]
document.getElementsByClassName('類屬性值')[0]
document.getElementsByName('name屬性值')[0]
document.querySelector(CSS 選擇器) : 只返回匹配指定選擇器的第一個元素
element.querySelector(CSS 選擇器)
document.querySelectorAll(CSS 選擇器) : 返回所有匹配元素

二、jQuery 的 dom 選擇器

• 1，基本選擇器 ---> 一個決定因素

$('#box')???????--> id屬性為box的元素
$('div')????????--> 所有的div標簽
$('.box')???????--> 類屬性為box的元素
$('.box.box1')--> 類屬性為box且為box1的元素

• 2，層級選擇器 ---> 最少兩個決定因素

$('ul li') --> 后代選擇器
$('ul>li') --> 子代選擇器

• 3，過濾選擇器 ---> : ---> 兩個決定因素

$('li:first')--> 第一個li元素
$('li:last') --> 最后一個li元素
$('li:odd') --> 索引值為奇數的li元素
$('li:even') --> 索引值為偶數的li元素
$('li:eq(1)')--> 索引值等于1的li元素
$('li:gt(1)')--> 索引值大于1的li元素
$('li:lt(1)')--> 索引值小于1的li元素

• 4，屬性選擇器 ---> [] ---> 2個 / 3個 決定因素

$('li[id]')????????????--> 所有含有id屬性的li元素
$('li[class=what]') --> class屬性中有what的li元素
$('li[class!=what]')--> class屬性中沒有what類的li元素
$('li[class^=w]')????--> class屬性中以w開頭的li元素
$('li[class$=w]')????--> class屬性中以w結尾的li元素
$('li[class*=b]')????--> class屬性中包含b字眼的li元素

• 5，篩選選擇器 ---> 標簽.篩選條件 ---> n+1個決定因素

$('span').eq(1)????????????--> 索引位置為1的span標簽
$('span').first()???????? --> 第一個span標簽
$('span').last()????????????--> 最后一個span標簽
$('span').parent('.p1')??--> span父標簽中（親的，一層）類屬性含有p1的
$('.list').siblings('li')--> 所有的兄弟元素（不包括自己）
$('div').find('button')??--> 所有的后代元素
$('p').children()???????????--> 獲取所有子元素
$('p').children('span')???--> 獲取所有子元素中的span標簽

三、面試題

有如下 dom 元素片段

<div data-id='a'>
    <div data-id='a2'></div>
        <div data-id='a3'></div>
        <div data-id='a2'></div>
    </div>
<div data-name='b'></div>

用jquery寫出有data-id屬性的div元素；  $('div[data-id]')
用jquery寫出有data-id='a2'的div元素； $('div[data-id=a2]')