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

热门教程

jQuery基本筛选选择器实例代码

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

 代码如下 复制代码

 

  

  

  

  

 

  

基本筛选器

  

:first/:last/:even/:odd

  

    

      

div:first

      

:even

    

    

      

:odd

    

    

      

:even

    

    

      

:odd

    

    

      

:even

    

    

      

div:last

      

:odd

    

  

  

  //找到第一个div

  $(".div:first").css("color", "#CD00CD");

  

 

  

  //找到最后一个div

  $(".div:last").css("color", "#CD00CD");

  

 

  

  //:even 选择所引值为偶数的元素,从 0 开始计数

  $(".div:even").css("border", "3px groove red");

  

 

  

  //:odd 选择所引值为奇数的元素,从 0 开始计数

  $(".div:odd").css("border", "3px groove blue");

  

 

 

  

:eq/:gt/:lt

  

    

      

:lt(3)

    

    

      

:lt(3)

    

    

      

:eq(2)

    

    

    

    

      

:gt(3)

    

    

      

:gt(3)

    

  

  

  //:eq

  //选择单个

  $(".aaron:eq(2)").css("border", "3px groove blue");

  

 

  

  //:gt 选择匹配集合中所有索引值大于给定index参数的元素

  $(".aaron:gt(3)").css("border", "3px groove blue");

  

 

   

  //:lt 选择匹配集合中所有索引值小于给定index参数的元素

  //与:gt相反

  $(".aaron:lt(2)").css("color", "#CD00CD");

  

 

  

:not

  

    

      

      

Aaron

    

    

      

      

慕课

    

    

      

      

其他

    

  

  

    //:not 选择所有元素去除不匹配给定的选择器的元素

    //选中所有紧接着没有checked属性的input元素后的p元素,赋予颜色

    $("input:not(:checked) + p").css("background-color", "#CD00CD");

  

 

热门栏目