因为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. maven3自定义archetype

    maven使用起来还是很方便,但默认自带的archetype配置junit版本比较老.每次创建新项目都要手动修改junit版本,所以就想着能不能自己建一个新版本出来,省得每次手动修改的麻烦. 网上找了 ...

  2. 【可视化】Echarts3 在世界地图中绘制中国各省份的轮廓

    要在世界地图展现出来的情况下绘制中国省份的轮廓,根据现有的echarts-api是不可行的. 但好在echarts也提供了自定义地图的方式,使用echarts.registerMap();来实现 第一 ...

  3. Office办公软件(Excel PPT Word)使用整理

    Office办公软件(Excel PPT Word)使用整理.. -------------- Excel默认打印预览于当前连接的打印机的纸张大小保持一致. Excel sheet不见了怎么办 --- ...

  4. 卸载oracle 11g数据库

    完全卸载oracle11g步骤:1. 开始->设置->控制面板->管理工具->服务 停止所有Oracle服务.2. 开始->程序->oracle - OraHome ...

  5. jQuery遍历-同胞

    同胞拥有相同的父元素. 通过 jQuery,您能够在 DOM 树中遍历元素的同胞元素. 在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() ...

  6. Winform 下载服务器安装包并安装

    代码中包含了检测本地安装盘符代码 一,定义下载委托事件(用于实现前台进度条更新和下载完成后事件的回调): private delegate void Action(); private string ...

  7. 【Linux部署 · GIT】在linux系统安装git和配置实现SSH

    领导给了一个不开放ftp的测试库,让我部署项目.拿到一个全新的环境,真是个练手的好机会. 该操作系统为:CentOs release 6.5(Final) 由于不开放ftp,所以上传下载代码是非常麻烦 ...

  8. php精简完全小结(linux/laravel篇)

    php官网:http://www.php.netphp版本: 查看:php -version说明:None-Thread Safe就是非线程安全,在执行时不进行线程(thread)安全检查:Threa ...

  9. 项目管理svn

    https://nchc.dl.sourceforge.net/project/tortoisesvn/1.9.6/Application/TortoiseSVN-1.9.6.27867-x64-sv ...

  10. 教学服务系统设计之PHP后台设计

    项目简介 本项目是与@nameoverflow同学合作.该同学负责vue 前端的设计,我负责php后台的接口实现.本文将主要记录php后台. 本项目的Github地址:https://github.c ...