详细分类 jQuery选择器

 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选择器的使用就没有什么问题了

 

 

本博客由作者原创，如需转载请注明出处！！