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选择器细节-遁地龙卷风的更多相关文章

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

    0.解决的问题 a.当选择器语法没有问题,找不到元素时,让jquery报错 b.选择器语法有问题,程序无法继续执行时,让jquery报错 主要针对传递字符串,尝试前请备份jquery库,最好改变名字加 ...

  2. JQuery实战手风琴-遁地龙卷风

    (-1)写在前面 这个图片是我从网上下载的,向这位前辈致敬.图片资源在我的百度云盘里.http://pan.baidu.com/s/1nvfJHdZ 我用的是chrome49,JQuery3.0,案例 ...

  3. JQuery data方法的使用-遁地龙卷风

    (-1)说明 我用的是chrome49,这个方法涉及到JQuery版本问题,我手里有3.0的,有1.9.1,后面将1.9.1及其以前的称为低版本,3.0称为高版本 测试例子用到的showMessage ...

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

    (0)写在前面 jquery.simpleModal.浏览器这三者的兼容性,不仅显示在报错上,还体现在所呈现的效果不是预期上. 说一下我的环境 jquery-1.8.3.js jquery.simpl ...

  5. jquery toggle方法使用出错?请看这里-遁地龙卷风

    这个函数在1.9之前和1.9之后的用法大不相同 1 1.9之间,用于点击元素时函数的轮流执行 toggle(function() { alert(1);//1,3,5,7... },function( ...

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

    1.选择器结构 jQuery的选择器根据源码可以分为几块 init: function( selector, context, rootjQuery ) { ... // HANDLE: $(&quo ...

  7. 精通jQuery选择器

    虽然jQuery上手简单,相比于其他库学习起来较为简单,但是要全面掌握,却不轻松.因为它涉及到网页开发的方方面面,提供的方法和内部变化有上千种之多.初学者常常感到,入门很方便,提高很困难.本文的目标是 ...

  8. JQuery选择器大全 前端面试送命题:面试题篇 对IOC和DI的通俗理解 c#中关于协变性和逆变性(又叫抗变)帮助理解

    JQuery选择器大全   jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement")    选择id值等于myElement的元素 ...

  9. 从jQuery学细节

    前言 最近看了两遍jQuery源码,感觉只是看懂了jQuery的小部分小部分,不过仅此,就已经对john resig佩服的五体投地咯.. 下面附上这位帅哥的靓照,记住吧,是他改变了世界. 看的大多是实 ...

随机推荐

  1. jQuery知识点总结(第五天)

    节点的操作和数据库操作一样,无非是增.删.改.查. 今天总结删除节点.复制节点.替换节点.与包裹节点 删除节点: 如果文档中一个元素多余,那么就需要删除掉.jQuery提供了三种删除节点的方法.分别是 ...

  2. Objective -C学习笔记 之copy(复制)

    //自定义类对象实现copy需要遵守copy协议(否则程序崩溃),实现必须实现的协议方法,里面的代码就决定了你的copy是深是浅 #import <Foundation/Foundation.h ...

  3. 手写控件,frame,center和bounds属性

    一.手写控件 1.手写控件的步骤 (1)使用相应的控件类创建控件对象 (2)设置该控件的各种属性 (3)添加控件到视图中 (4)如果是button等控件,还需考虑控件的单击事件等 (5)注意:View ...

  4. 日志分析 第一章 ELK介绍

    1 ELK各组件介绍? ELK Stack是elasticsearch.logstash.kibana是三个开源软件的组合, fielbeat是一个轻量级日志收集工具,类似于Linux系统中tail ...

  5. 结合Hadoop,简单理解SSH

    在启动dfs和yarn时,需要多次输入密码,不但启动本机进程还有辅服务器启动那些节点也需要相应密码,主与辅服务器之间是通过SSH连接的,并发送操作指令 一.ssh密码远程登录 1.使用ssh连接另一台 ...

  6. 对象Clone

    //================================================= // File Name : Clone_demo //-------------------- ...

  7. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  8. POJ 2388 Who's in the Middle(水~奇数个数排序求中位数)

    题目链接:http://poj.org/problem?id=2388 题目大意: 奇数个数排序求中位数 解题思路:看代码吧! AC Code: #include<stdio.h> #in ...

  9. TeXmacs - 所见即所得 - 专业排版软件

    所见即所得,支持中文,很好用, 容易奔溃,奔溃进入不了程序时,删除文件夹 C:\Users\Perelman\AppData\Roaming\TeXmacs

  10. apk支持html video控制 ,是播放状态就暂停,暂停状态就播放

    apk支持html video控制 <!DOCTYPE html> <html> <body> <div style="text-align:cen ...