小白的jquery学习之路02选择器

jquery

学习第一步选择器：

层级

• ancestor descendant
• parent > child
• prev + next
• prev ~ siblings

(1)选择的是#box中儿子辈的p标签

$('#box>p').css({'color':'red','font-size':'25px'})

(2)选择的是紧邻在.box后面的一个p标签

$('.one+p').css({'color':'red','font-size':'25px'})

 (3)选择的是紧邻在.box的同级p标签

 $('.one~p').css({'color':'red','font-size':'25px'})

基本筛选器

• :first
• :not(selector)
• :even
• :odd
• :eq(index)
• :gt(index)
• :lang^1.9+
• :last
• :lt(index)
• :header
• :animated
• :focus
• :root^1.9+
• :target^1.9+

(4)选择的是box中第一个p标签

 $("#box p:first").css({'color':'red','font-size':'25px'});

 

(5)选择的是box中最后一个p标签

   $("#box p:last").css({'color':'red','font-size':'25px'});

 (6)选择的是box中的所有的除了class是one的标签

    $("#box p:not(.one)").css({'color':'red','font-size':'25px'});

 (7)选择的是box中所有偶数的p标签

    $("#box p:even").css({'color':'red','font-size':'25px'});

  (8)选择的是box中所有奇数的p标签

  $("#box p:odd").css({'color':'red','font-size':'25px'});

   (9)选择的是box中序号是3的p标签

    $("#box p:eq(3)").css({'color':'red','font-size':'25px'});

   (10)选择的是box中序号大于3的p标签 4.5.6.7.8

    $("#box p:gt(3)").css({'color':'red','font-size':'25px'});

   (11)选择的是box中序号小于3的p标签 

  $("#box p:lt(3)").css({'color':'red','font-size':'25px'});

  

内容

• :contains(text)
• :empty
• :has(selector)
• :parent

  (12)选择的是box中内容包含看3的p标签

$("#box p:contains(看3)").css({'color':'red','font-size':'25px'});

   (13)选择的是box中内容是空的p标签

    $("#box p:empty").css({'height':'100px','width':'100px','background-color':'#f00'});

   (14)选择的是box中非空的p标签

       $("#box p:empty").css({'color':'red','font-size':'25px'});

     (15)选择的是box中含有span标签的p标签

      $("#box p:has(span)").css({'color':'red','font-size':'25px'});

可见性

• 
  

  • :hidden
  • :visible

(1)选择的是box中处于隐藏状态的p标签 即display:none 
    $("#box p:hidden").css({'color':'red','font-size':'25px','display':'block'});
(2)选择的是box中处于隐藏状态的p标签 即display:none 

    $("#box p:visible").css({'color':'red','font-size':'25px','display':'block'});

属性

• 属性

  • [attribute]
  • [attribute=value]
  • [attribute!=value]
  • [attribute^=value]
  • [attribute$=value]
  • [attribute*=value]
  • [attrSel1][attrSel2][attrSelN]

（3）选择的是box中所有有class属性的p标签 
   $("#box p[class]").css({'color':'red','font-size':'25px','display':'block'});
（4）选择的是box中所有有hd属性的p标签 hd属性是自定义属性
  $("#box p[hd]").css({'color':'red','font-size':'25px','display':'block'});
（5）选择的是box中所有有hd=zzz属性的p标签 hd属性是自定义属性
    $("#box p[hd=zzz]").css({'color':'red','font-size':'25px','display':'block'});
（6）选择的是box中所有hd不等于zzz属性的p标签 hd属性是自定义属性

     $("#box p[hd!=zzz]").css({'color':'red','font-size':'25px','display':'block'});

(7)选择的是box中所有hd属性以zx为开头的p标签 hd属性是自定义属性
    $("#box p[hd^=zx]").css({'color':'red','font-size':'25px','display':'block'});
(8)选择的是box中所有hd属性以zz为结尾的p标签 hd属性是自定义属性
    $("#box p[hd$=zz]").css({'color':'red','font-size':'25px','display':'block'});
(9)选择的是box中所有hd属性含有zz的p标签 hd属性是自定义属性
    $("#box p[hd*=zz]").css({'color':'red','font-size':'25px','display':'block'});

复合写法：

选择的是box中所有hd属性含有z并且含有style属性的p标签 hd属性是自定义属性

    $("#box p[hd*=z][style]").css({'color':'red','font-size':'25px','display':'block'});

子元素

• :first-child
• :first-of-type^1.9+
• :last-child
• :last-of-type^1.9+
• :nth-child
• :nth-last-child()^1.9+
• :nth-last-of-type()^1.9+
• :nth-of-type()^1.9+
• :only-child

• :only-of-type^1.9+

我们可以理解为-child就是把所以标签一起看，-of-type就是去除其他标签类型，光看选中标签

<script src="jquery.js"></script>
<script>
   
$(function(){
(1)选择div中p标签的父级中第一个子元素。父级的第一个子元素必须是p，否则不会被选中
   $("div p:first-child").css({'color':'red','font-size':'25px'});
 (2)选择div中span标签的父级中第一个span标签。父级的第一个子元素必须是p，否则不会被选中
    //$("div span:first-of-type").css({'color':'red','font-size':'25px'});

  (3)注意：第2个子元素如果是span，那么被选中，如果不是，就不选  n-th从1开始
    //$("div span:nth-child(2)").css({'color':'red','font-size':'25px'});

  (4)选择div中span标签的父级中第n个span标签
    $("div span:nth-of-type(3)").css({'color':'red','font-size':'25px'});
    (5)选中只有一个p标签的p标签,不能有其他标签
    //$("div p:only-child").css({'color':'red','font-size':'25px'});
     (6)选中只有一个p标签的p标签，可以有其他类型例span标签
    $("div p:only-of-type").css({'color':'red','font-size':'25px'});








    })

    


</script>


</head>
<body>
    <div >
    <p>我是独生子</p>
  </div>
<div >
  <p>我是p标签0</p>
      <span>我是span标签1</span>
      <p>我是p标签2</p>
      <span>我是span标签3</span>
       <p>我是p标签4</p>
      <span>我是span标签</span>
       <p>我是p标签5</p>
      <span>我是span标签6</span>
      <p>我是p标签7</p>
      <span>我是span标签8</span>
       <p>我是p标签9</p>
      <span>我是span标签10</span>
   </div>


===================================
   <div>
      <p>我是p标签0</p>
      <span>我是span标签1</span>
      <p>我是p标签2</p>
      <span>我是span标签3</span>
       <p>我是p标签4</p>
      <span>我是span标签</span>
       <p>我是p标签5</p>
      <span>我是span标签6</span>
      <p>我是p标签7</p>
      <span>我是span标签8</span>
       <p>我是p标签9</p>
      <span>我是span标签10</span>
   </div>


   ===================================
   <div>
      <p>我是p标签0</p>
      <span>我是span标签1</span>
      <p>我是p标签2</p>
      <span>我是span标签3</span>
       <p>我是p标签4</p>
      <span>我是span标签</span>
       <p>我是p标签5</p>
      <span>我是span标签6</span>
      <p>我是p标签7</p>
      <span>我是span标签8</span>
       <p>我是p标签9</p>
      <span>我是span标签10</span>
   </div>




</body>
</html>