一聚教程网:一个值得你收藏的教程网站

热门教程

jQuery层级选择器实例代码

时间:2022-06-25 17:17:42 编辑:袖梨 来源:一聚教程网

 

 代码如下 复制代码

 

  

  

  

  

 

  

子选择器与后代选择器

  

    

      

div下的第一个p元素

    

    

      

div下的第一个p元素

    

  

  

    

      

        

div下的article下的p元素

      

    

    

      

        

div下的article下的p元素

      

    

  

 

  

    //子选择器

    //$('div > p') 选择所有div元素里面的子元素P

    $('div > p').css("border", "5px groove red");

  

 

  

    //后代选择器

    //$('div p') 选择所有div元素里面的p元素

    $('div p').css("border", "9px groove green");

  

 

 

  

相邻兄弟选择器与一般兄弟选择器

  

    

兄弟节点div, +~选择器不能向前选择

    选择器span元素

    

span后第一个兄弟节点div

    

兄弟节点div

      子元素div

    

    兄弟节点span,不可选

    

兄弟节点div

  

 

  

    //相邻兄弟选择器

    //选取prev后面的第一个的div兄弟节点

    $(".prev + div").css("border", "3px groove blue");

  

 

  

    //一般相邻选择器

    //选取prev后面的所有的div兄弟节点

    $(".prev ~ div").css("border", "3px groove blue");

  

 

 

 

热门栏目