Jquery选择器(1)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/Allenyhy/article/details/82910889

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

 

 

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