JQuery 选择器细节

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")

未完待续!

欢迎补充指正!

时间: 2024-10-20 08:50:31

JQuery 选择器细节的相关文章

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

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,然

我自作聪明,擅自主张的优化了jQuery选择器。

</pre><pre name="code" class="javascript">闲了一会,写篇博客. 最近项目里面,我自作聪明,擅自主张的,自我感觉的优化了一下jQuery选择器.哈哈哈~~~~ ( ﹁ ﹁ ) 我这么想的: jQuery最底层采用getById getByTagName,2.0版本之后结合最近html5的API--getByClassName. 如果没有getByClassName.将进行所搜查找className选择器

jQuery-1.9.1源码分析系列(二)jQuery选择器

1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { … // HANDLE: $(""), $(null), $(undefined), $(false) ... // Handle HTML strings if ( typeof selector === "string" ) { … // HANDLE: $(DOMElement) } else if (

从jQuery学细节

前言 最近看了两遍jQuery源码,感觉只是看懂了jQuery的小部分小部分,不过仅此,就已经对john resig佩服的五体投地咯.. 下面附上这位帅哥的靓照,记住吧,是他改变了世界. 看的大多是实现的细节.技巧,整体的架构还是没有看出来.功力不够呀,还得慢慢修炼.jQuery真的是值得去读无数次的东西,每读一次,都会有不一样的收获.以后有空就多看看吧~ 研读优秀框架的源码,是从初级jser进阶到中级jser的捷径,可以学到好多优秀代码的风格.从代码可以看出一个程序员的水平呀~ 现在把自己看出

jQuery 选择器2

jQuery 选择器 选择器 实例 选取 * $("*") 所有元素 #id $("#lastname") id="lastname" 的元素 .class $(".intro") 所有 class="intro" 的元素 element $("p") 所有 <p> 元素 .class.class $(".intro.demo") 所有 class=&qu

优化jQuery选择器

优化jQuery选择器 选择优化比以前更加重要,因为越来越多的浏览器实现了queryselectorall()并承担了将jQuery选择器转移到浏览器的责任.记住这些小技巧可以让你轻松突破学习选择器时的瓶颈. jQuery 扩展 如果可能的话,避免使用jQuery扩展选择器.这些扩展无法在性能让原生的queryselectorall() DOM提供的方法更有效,所以还是用jQuery提供的常规选择器吧. 1 2 3 4 5 // Slower (the zero-based :even sele

JavaScript(15)jQuery 选择器

jQuery 选择器 选择器允许对元素组或单个元素进行操作. jQuery 元素选择器和属性选择器允许通过标签名.属性名或内容对 HTML 元素进行选择. 在 HTML DOM 术语中:选择器允许对 DOM 元素组或单个 DOM 节点进行操作. jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") 选取所有 class="intro" 的 &

锋利的jQuery学习笔记之jQuery选择器

在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 td{font-size:10px;} a{tetx-decoration:none;} ID选择器 #ID{CSS规则} 以文档元素的唯一标示ID为选择符 #node{corlor:red;} 类选择器 .className{CSS规则} 以文档元素的class作为选择符 div.node{backgro

JQuery选择器

JQuery选择器 通过一个样例来分辨这些选择器,首先做一个初始的页面: 1.HTML 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>选择器</title> 6 <script type="text/javascript" src="../JQue