因为DOM结构就是层级结构,所以我们经常要根据层级关系进行选择。

1、层级选择器

$('ancestor descendant'),选择祖先中的子孙,中间留空格:
$('form[name=upload] input');
//选择name属性为upload的表单里的<input>
2
 
1
$('form[name=upload] input'); 
2
//选择name属性为upload的表单里的<input>

多层选择也是允许的:
$('form.test p input'); // 在form表单选择被<p>包含的<input>
1
 
1
$('form.test p input'); // 在form表单选择被<p>包含的<input>

2、子选择器

$('parent>child'),类似层级选择器,但是限定了层级关系必须是父子关系,就是<child>节点必须是<parent>节点的直属子节点。
<!-- HTML结构 -->
<div class="testing">
<ul class="lang">
<li class="lang-javascript">JavaScript</li>
<li class="lang-python">Python</li>
<li class="lang-lua">Lua</li>
</ul>
</div> //jQuery选择器
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
$('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系
12
 
1
<!-- HTML结构 -->
2
<div class="testing">
3
    <ul class="lang">
4
        <li class="lang-javascript">JavaScript</li>
5
        <li class="lang-python">Python</li>
6
        <li class="lang-lua">Lua</li>
7
    </ul>
8
</div>
9

10
//jQuery选择器
11
$('ul.lang>li.lang-javascript'); // 可以选出[<li class="lang-javascript">JavaScript</li>]
12
$('div.testing>li.lang-javascript'); // [], 无法选出,因为<div>和<li>不构成父子关系

3、过滤器

过滤器一般不单独使用,它通常附加在选择器上,帮助我们更精确地定位元素。观察过滤器的效果:
$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点

$('ul.lang li:first-child'); // 仅选出JavaScript
$('ul.lang li:last-child'); // 仅选出Lua
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素
x
 
1
$('ul.lang li'); // 选出JavaScript、Python和Lua 3个节点
2

3
$('ul.lang li:first-child'); // 仅选出JavaScript
4
$('ul.lang li:last-child'); // 仅选出Lua
5
$('ul.lang li:nth-child(2)'); // 选出第N个元素,N从1开始
6
$('ul.lang li:nth-child(even)'); // 选出序号为偶数的元素
7
$('ul.lang li:nth-child(odd)'); // 选出序号为奇数的元素

4、表单选择器

:input
可以选择<input>,<textarea>,<select>和<button>

:file
可以选择<input type="file">,和input[type=file]一样

:checkbox
可以选择复选框,和input[type=checkbox]一样

:radio
可以选择单选框,和input[type=radio]一样

:focus
可以选择当前输入焦点的元素,例如把光标放到一个<input>上,用$('input:focus')就可以选出

:checked
选择当前勾上的单选框和复选框,用这个选择器可以立刻获得用户选择的项目,如$('input[type=radio]:checked')

:enabled
可以选择可以正常输入的<input>、<select>等,也就是没有灰掉的输入

:disabled
和:enabled正好相反,选择那些不能输入的。

:visible
所有可见的

:hidden
所有隐藏的


06jQuery-02-层级选择器的更多相关文章

  1. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  2. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  3. CSS 层级选择器

    CSS 层级选择器 注:使用空格分隔,塞选到最后一项应用. 标签选择器 下 标签选择器 父标签 --> 指定子标签添加css属性 <html> <head> <!- ...

  4. 什么是 jQuery 和jQuery的基本选择器,层级选择器,基本筛选器

    jQuery是什么? [1]   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. [2]   jQuery是继prototype ...

  5. jquery 层级选择器

    关于层级选择器. $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素. parent :任何有效的选择器. chil ...

  6. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

  8. js进阶 10-5 jquery中的层级选择器有哪些

    js进阶 10-5 jquery中的层级选择器有哪些 一.总结 一句话总结: 1.jquery中的层级选择器有哪些? 四种,后代,子代,兄弟,相邻兄弟 2.如何区别jquery中的层级选择器? 记住这 ...

  9. jQuery中的层级选择器

    话不多说,请看效果: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...

  10. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

随机推荐

  1. sizeof求类的大小

    用sizeof求类的大小,http://blog.csdn.net/szchtx/article/details/10254007(sizeof浅析(三)——求类的大小),这篇博文给出了非常详尽的举例 ...

  2. MySQL GROUP BY多个字段分组用法详解

    mysql语句中group by 很容易理解 是分组查询.比如 select sum(score) from user group by name 意思是查询每个人的分数总和但是, select su ...

  3. 【Centos7】卸载OpenJDK

    一般情况下,centos会自带OpenJDK,Hadoop的运行环境要求自己配置JRE,但在home下配置好了JRE后,使用java -version仍然看到OpenJDK,原因是系统根据$PATH路 ...

  4. oracle内存优化

    一直都想总结一下oracle内存调整方面的知识,最近正好优化一个数据库内存参数,查找一些资料并且google很多下.现在记录下来,做下备份.         一.概述:                ...

  5. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  6. 奇货商城重构——webpack自动化工程

    近几年,前端各种框架工具层出不穷,从两三年前还是一个jQuery搞定全站,到之后requirejs/seajs,node,gulp/webpack,Angular/React/Vue,RN/weex的 ...

  7. Redis在电商中的实际应用-Java

    示例代码用Jedis编写. 1. 各种计数,商品维度计数和用户维度计数 说起电商,肯定离不开商品,而附带商品有各种计数(喜欢数,评论数,鉴定数,浏览数,etc),Redis的命令都是原子性的,你可以轻 ...

  8. [2012-06-29]sed根据行号范围执行替换

    测试数据: personball@vostro:SHELL$cat aaa <instrumentation android:name="aaa" android:name= ...

  9. 关于 Go 中 Map 类型和 Slice 类型的传递

    关于 Go 中 Map 类型和 Slice 类型的传递 Map 类型 先看例子 m1: func main() { m := make(map[int]int) mdMap(m) fmt.Printl ...

  10. Python Counter class

    Counter class https://docs.python.org/2/library/collections.html#collections.Counter # class collect ...