jQuery選擇器----->CSS選擇器       jQuery選擇器實際上是實現了CSS選擇器

jQuery選擇器的分類

 jQuery選擇器可以分為下面三種類型的選擇器

基本選擇器

$('tag')       -------按元素標籤選擇

$('.class')  -------按類名選擇

$('#id')      -------按id選擇

$('*')         -------匹配所有元素

組合選擇器

$('seclector1, selector2')    -------多元素選擇器

$('seclector1 selector2')     -------後代元素選擇器

$('seclector1>selector2')    -------子元素選擇器

$('seclector1+selector2')    -------毗鄰元素選擇器

其他選擇器

$('seclector:first-child')    --------選取第一個子元素

$('seclector:last-child')    ---------選取最後一個子元素

$('seclector.eq(index)')   ---------選取集合中下標為index的元素

$('attribute=value')          ---------選取屬性值為value的元素

下面我們來舉一個綜合性比較強的栗子來實戰一下這些元素

DOM樹的結構如下圖所示：

//獲取父元素
$('#me').parent();
獲取所有的父元素及其祖先元素
$('#me').parents();
//使用eq來獲取相應元素
$('#me').parents().eq(0);   //獲取爸爸
$('#me').parents().eq(1);   //獲取爺爺
//使用parents(selector)來精確查詢
$('#me').parents('.fat');
$('#me').parents('.oldest');
//獲取所有的兄弟元素
$('#me').sibling();

假設DOM的結構如下所示：

//使用.children獲取子元素
$('#grandPa').children();
//使用.find('*')來獲取所有子元素
$('#grandPa').find('*')；
//使用.find('selector')來精確查詢子孫元素
$('#grandPa').find('.youngest')；

看到這裡應該對於jQuery選擇器的使用就沒有什麼問題了

本部落格由作者原創，如需轉載請註明出處！！