因为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. Linux学习总结(十二)—— CentOS用户管理:创建用户、修改用户、修改密码、密码有效期、禁用账户、解锁账户、删除用户、查看所有用户信息

    文章首发于Linux学习总结(十二)-- CentOS用户管理,请尊重原创保留原文链接. 创建用户 useradd -g webadmin -d /home/zhangsan zhangsan pas ...

  2. SpringMVC入门--编写一个SpringMVC小程序

    一.SpringMVC的优势 Spring 为展现层提供的基于 MVC 设计理念的优秀的Web 框架,是目前最主流的 MVC 框架之一.Spring3.0 后全面超越 Struts2,成为最优秀的 M ...

  3. java版飞机大战 实战项目详细步骤.md

    [toc] 分析 飞机大战 首先对这个游戏分析,在屏幕上的物体都是飞行物,我们可以把建一个类,让其他飞行物继承这个类.游戏中应有英雄机(也就是自己控制的飞机).敌人.而敌人应该分为打死给分的飞机(就是 ...

  4. python close()是假象,真正关闭Socket的方法

    背景: 工作中自己用python写了一个tcp工具,然后用while循环一直接收消息,并且打印出来.然后正常close发现设备并没有离线,然后用了临时的规避方案,发现其实是一直阻塞在recv()接收方 ...

  5. 【CentOS7】Could not retrieve mirrorlist http://mirrorlist.centos.org/?...

    在执行命令 sudo yum clean expire-cache 清理完过期的缓存后,再执行yum install 或 update命令都失败了.原因是清理过期缓存结果不该被清理的也删掉了,可能是y ...

  6. 新鲜出炉的JSON,拿走不谢!

    一.JSON简介 1.JSON全称是JavaScript Object Notation即JavaScript对象标记法. JSON是一种轻量级(Light-Weight).基于文本的(Text-Ba ...

  7. 电脑每次开机都出现check file system on:C 的解决办法

    电脑每次开机都出现check file system on:C 的解决办法... ----------------------------------------- ----------------- ...

  8. web前端笔记整理一---HTML

    一 HTML标签1 页面及标记 1 HTML 文件结构 拓展名 .html或者.htm <!DOCTYPE html>// 声明 <html> html 主体 <head ...

  9. html js文字左右滚动插件

    自己写过很多插件,但都是直接嵌入在了工程里,从来没有拿出来单独封装成一个文件过,这是第一次,希望是一个良好的开端. 一个文字过长而可以左右滚动的插件 <!DOCTYPE html> < ...

  10. 深入了解mysql数据传输编码原理

    一.基本概念(这里引用http://www.laruence.com/2008/01/05/12.html) 1. 给定一系列字符,对每个字符赋予一个数值,用数值来代表对应的字符,这一数值就是字符的编 ...