码迷,mamicode.com
首页 > Web开发 > 详细

JQuery选择器细节-遁地龙卷风

时间:2016-08-13 01:14:16      阅读:153      评论:0      收藏:0      [点我收藏+]

标签:

1.层次选择器-子元素选择器

<body>

<div>

      <p>lol</p>

      <div>

           <p></p>

      </div>

</div>

</body>

alert($("div>p").length);//2

//逐层遍历符合的元素
alert($("body>div>p").length)//1

//会定位到body的子div,然后定位子p

2.内容过滤器-has

<html>

<body>

<div id="dnf">
  <p class="lol">123</p>
  <p>123</p>
  <p>123</p>
</div>

</body>

</html>

var a = $("#dnf p:has(.lol)").length //这样是获取不到的
var b = $("#dnf:has(p):has(.lol)").length

var c= $("has(.lol)").length
alert(a);//0
alert(b);//1

alert(c);//3

has过滤器过滤的是后代元素

"#dnf p:has(.lol)"的意思是是否有这样的p元素,它是应用id为dnf的后代元素,且改p元素的后代元素中有应用class为lol的元素

"#dnf:has(p):has(.lol)"的意思是是否有这样的元素,它的id是dnf,且后代元素中有p元素,且有class为lol的元素” html body div

":has(.lol)" 的意思是是否有这样的元素,它的后代元素中有class为lol的元素,从html标签开始逐层遍历

3.内容过滤选择器-empty

<div></div><!--可以被找到-->

<div><!--不可以被找到,有文本元素-->

</div>

4.应用了class为lol的div元素

$("div.lol")

 

未完待续!

欢迎补充指正!

 

JQuery选择器细节-遁地龙卷风

标签:

原文地址:http://www.cnblogs.com/resolvent/p/5766960.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!