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-19 15:57:57

JQuery选择器细节-遁地龙卷风的相关文章

如何让JQuery报错-遁地龙卷风

0.解决的问题 a.当选择器语法没有问题,找不到元素时,让jquery报错 b.选择器语法有问题,程序无法继续执行时,让jquery报错 主要针对传递字符串,尝试前请备份jquery库,最好改变名字加已区分. 1.环境配置 jquery-3.0.0.js未压缩版 2.选择器语法没有问题,找不到元素 修改jquery源码增加代码,以下是修改后的代码,加红的是增加部分 var version = "3.0.0", // Define a local copy of jQuery jQuer

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 data方法的使用-遁地龙卷风

(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage方法如下 showMessage.i = 0; function showMessage(object) { var body = $("body")[0]; var $p =$("#debugp"); if($p.length==0) { $p = $("&

JQuery simpleModal插件的使用-遁地龙卷风

(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simplemodal.js  1.4.4 chrome49 去官网下载simpleModal,可以省去很多麻烦,比如名子一样但内容不一样,说多了都是泪啊 (1)快速入手 导入顺序 <script type="text/javascript" src="jquery-1.8.3.js

我自作聪明,擅自主张的优化了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