分类解析jQuery选择器(5)

      $("div[class$=div]").css("color","red");       <div>我是第一个div</div>  ***会被选中,class属性以div结束       <div>我是第二个div</div>  ***会被选中,class属性以div结束       <div>我是第三个div</div>   ***不会被选中,class属性不以div结束

  (6)、[attribute*=value]  获取属性值包含value值元素

      $("div[class*=div]").css("font-size","30px");       <div>我是div1</div>  ***会被选中,属性值包含div       <div>我是1div</div>  ***会被选中,属性值包含div       <div>我是1div1</div> ***会被选中,属性值包含div       <div>我是abc</div>   ***会被选中,属性值包含div

  (7)、[selector][selector][selector]  获取属性交集元素

      $("div:[class][title=title1]").css("background-color","red");       <div title="title1">我是div1,title1</div>  ***会被选中,有class属性且title属性等于title1       <div title=title2>我是div1,title2</div>   ***不会被选中,虽然有class属性,但是title属性不等于title2       <div>我是div3</div>           ***不会被选中,没有title属性

7、子元素过滤选择器

   (1):nth-child(eq|even|odd|index)    获取每个父元素下的特定位置元素,索引号从1开始

$("div>p:nth-child(1)").css("background-color","red");  //选中每一个父元素下的div下的第一个直接P元素 <div>   <p>我是第一个P</p>   *** 会被选中,是div下的第一个子P元素   <p>我是第二个P</p>   *** 不会被选中,是第二个了 </div> <div>   <P>我是第三个P</P>   *** 会被选中,是div下的第一个子P元素   <P>我是第四个P</P>   *** 不会被选中,是第二个了 </div>

(2):first-child    选中每个父元素下的第一个

$("p:first-child").css("background-color","red");    //选中每一个父元素下的第一个P元素 <div>   <p>我是第一个P</p>   *** 会被选中,是div下的第一个子P元素   <p>我是第二个P</p>   *** 不会被选中,是第二个了 </div> <ul>   <li>     <P>我是第三个P</P>   *** 会被选中,是div下的第一个子P元素     <P>我是第四个P</P>   *** 不会被选中,是第二个了   </li> </ul>

(3)、:last-child  选中每一个父元素下的最后一个元素

$("p:last-child").css("background-color","red");    //选中每一个父元素下的第一个P元素 <div>   <p>我是第一个P</p>   *** 不会被选中,不是某父元素的最后一个子P元素   <p>我是第二个P</p>   *** 会被选中,是div元素下的最后一个子P元素 </div> <ul>   <li>     <P>我是第三个P</P>   *** 不会被选中,不是某父元素下的最后一个子P元素     <P>我是第四个P</P>   *** 会被选中,是div元素下的最后一个P元素   </li> </ul>

(4)、:only-child  获取每个父元素下唯一仅有的一个子元素

$("p:only-child").css("background-color","red");   <div>     <p>我是第一个P</p>  ***不会被选中,不是某父元素下的唯一一个P元素     <p>我是第二个P</p>  ***不会被选中,不是某父元素下的唯一一个P元素   </div>   <div>     <span>我是一个span</span>  ***不会被选中,不是某父元素下的唯一一个P元素     <p>我是第三个P</p>       ***不会被选中,不是某父元素下的唯一一个span元素   </div>   <div>     <p>我是一个P</p>    ***会被选中,是div下的唯一一个P元素   </div>

8、表单对象属性过滤选择器

  (1)、:enabled  获取表单中所有属性为可用的元素

$("input:enabled").val("jQuery表单对象属性过滤选择器");   <div>     <input type="text" value="我是一个可用的input" />    ***会被选中,是一个可用的表单元素     <input type="text" value="我是一个不可用的input" disabled="disabled" />  ***不会被选中,是不可用的表单元素   </div>

(2)、:disabled  获取表单中属性不可用的元素

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzzgws.html