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")
5.子元素选择器，这里已:nth-child()为例
元素的选择是根据元素在父元素中的位置或唯一性决定的
(1)
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
$("ul li:nth-child(2n)").css("background","red");
$("li:nth-child(2n)").css("background","red");
两个语句的效果相同，因为所有li元素的父元素都是ul
(2)
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
</body>
$("ul li:nth-child(2n)").css("background","red");
//ul下的li，innerText为2,4为红色
$("li:nth-child(2n)").css("background","red");
//ul下的li，innerText为2,4为红色
//innerText为6,7,8，9的li的父元素是body，6在body中是第2个元素，所以innerText为6的li背景色为红色
///当然innerText为8的li背景色也为红色
未完待续!
欢迎补充指正!
JQuery选择器细节-遁地龙卷风的更多相关文章
- 如何让JQuery报错-遁地龙卷风
0.解决的问题 a.当选择器语法没有问题,找不到元素时,让jquery报错 b.选择器语法有问题,程序无法继续执行时,让jquery报错 主要针对传递字符串,尝试前请备份jquery库,最好改变名字加 ...
- JQuery实战手风琴-遁地龙卷风
(-1)写在前面 这个图片是我从网上下载的,向这位前辈致敬.图片资源在我的百度云盘里.http://pan.baidu.com/s/1nvfJHdZ 我用的是chrome49,JQuery3.0,案例 ...
- JQuery data方法的使用-遁地龙卷风
(-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...
- JQuery simpleModal插件的使用-遁地龙卷风
(0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...
- jquery toggle方法使用出错?请看这里-遁地龙卷风
这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...
- jQuery-1.9.1源码分析系列（二）jQuery选择器
1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...
- 精通jQuery选择器
虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...
- JQuery选择器大全 前端面试送命题：面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性（又叫抗变）帮助理解
JQuery选择器大全 jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素 ...
- 从jQuery学细节
前言 最近看了两遍jQuery源码,感觉只是看懂了jQuery的小部分小部分,不过仅此,就已经对john resig佩服的五体投地咯.. 下面附上这位帅哥的靓照,记住吧,是他改变了世界. 看的大多是实 ...
随机推荐
- ECMAScript严格模式简介
写在前面 大家都知道使用"use strict"表示使用ECMAScript进行严格模式,使用"use strict"有两种方式 在文件头部写上它(使得整个脚本 ...
- JavaWeb学习总结-02 Tomcat 学习和使用
一 Tomcat服务器端口的配置 Tomcat的所有配置都放在conf文件夹之中,里面的server.xml文件是配置的核心文件. 如果想修改Tomcat服务器的启动端口,则可以在server.xml ...
- python03 面向对象的编程01
话不多说,直接进入正文: 编程思想: 我个人所了解的有2种,还有个函数式编程的概念模模糊糊(大概是把常用的代码封装成一个函数,重复调用即可,先认为就是这样吧) 1 面向对象:面向对象是把所有的事务物当 ...
- DIY(码表)制作实验
代码: #include<reg52.h>typedef unsigned char u8;typedef unsigned int u16;/********端口定义********* ...
- geoip scala api
#!/bin/bash /home/hadoop/spark-1.6.2/bin/spark-shell --master spark://hbase11:7077 --executor-memory ...
- 理解Linux系统/etc/init.d目录和/etc/rc.local脚本
一.关于/etc/init.d 如果你使用过Linux系统,那么你一定听说过init.d目录.这个目录到底是干嘛的呢?它归根结底只做了一件事情,但这件事情非同小可,是为整个系统做的,因此它非常重 ...
- 安装ubuntu和安装ubuntu后要安装的软件列表
安装ubuntu 老毛桃进入win pe修复启动项 在win pe下面制作ubuntu的安装盘,只用的软件是ultraISO 参考博客下面的分区的那篇文章 http://jingyan.baidu. ...
- Java线程操作方法
取得和设置线程名称 //================================================= // File Name : Thread_demo //--------- ...
- VC----文件图标和窗口图标及在任务栏显示的图标
WNDCLASSEX wndcls; wndcls.cbSize=sizeof(wndcls); wndcls.cbClsExtra=0; wndcls.cbWndExtra=0; wndcls.hb ...
- Enabling and Mounting NFS on CoreOS
http://blog.scottlowe.org/2015/02/20/config-mount-nfs-coreos/ #cloud-config write-files: - path: /et ...