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

上一篇学习了基础的五种选择，分别是id选择器，class选择器，element选择器，*选择器 和 并列选择器。根据手册大纲，这篇学习的是层级选择器。

选择器：

1、基础选择器

2、层级选择器

　　1）、ancestor descendant

　　2）、parent > child

　　3）、prev + next

　　4）、prev ~ siblings

3、基本筛选器

4、内容选择器

5、可见性选择器

6、属性选择器

7、子元素选择器

8、表单选择器

9、表单元素选择器

10、混淆选择器

层级选择器：层级选择器有四种选择器

同样与上一篇一样，先写一段简单的HTML代码，供接下来的各选择器使用演示。

<body>

    <div>

        <h1 id="h1">jquery</h1>

        <h1 class="h2">javascript</h1>

            <div>

                <h1>第二层div中的jquery</h1>

                <h1>第二层div中的javascript</h1>

            </div>

    </div>

    <h1>html</h1>

    <h1>css</h1>

</body>

显示如图：

第一种：ancestor descendant（在给定的祖先元素下匹配所有的后代元素）

代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("div h1").css({"color":"red"});

        });

    </script>

效果如图：

解析：$("div h1")，指定祖先元素div下匹配所有的后代h1元素。在此示例中，第一层div下的所有后代即为

 <h1 id="h1">jquery</h1>

 <h1 class="h2">javascript</h1>

        <div>

                <h1>第二层div中的jquery</h1>

                <h1>第二层div中的javascript</h1>

        </div>

则这些所有匹配的后代元素的颜色设置为红色。

第二种：parent > child（在给定的父元素下匹配所有的子元素）

代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#div1 > h1").css({"color":"red"});

        });

    </script>

给第一个div添加一个id="div1"，则可明显却分祖先与后代的关系。

效果图如下：

解析：$("#div1 > h1")，在给定的父元素id为div1的元素下匹配所有为h1标签的子元素，则该父元素的h1子元素有

<h1 id="h1">jquery</h1>

<h1 class="h2">javascript</h1>

第三种：prev + next（匹配所有紧接在 prev 元素后的 next 元素）

代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#div1 + h1").css({"color":"red"});

        });

    </script>

效果图如下：

解析：该段JQuery代码，指的是匹配所有紧接在id=“div1”的元素后的h1元素，紧接则特指一个，即选择器选择的是

<h1>html</h1>

第四种：prev ~ siblings （匹配 prev 元素之后的所有 siblings 元素）

代码如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $("#div1 ~ h1").css({"color":"red"});

        });

    </script>

效果图如下：

解析：该段JQuery代码指的是匹配 id="div1"的元素之后的所有 h1元素，即为

<h1>html</h1>

<h1>css</h1>

四种层级选择器，学完了，总结一下：

prev + next
prev ~ siblings

这两种选择器是同级元素间的选择器。而prev + next特指第一个，prev ~ siblings指所有。

ancestor descendant
parent > child

这两种选择器是上下级关系，也可以称包含关系，后代包含在祖先里，子元素包含在父元素里。区别在于：parent > child，匹配的是parent元素内的第一层所有元素，而ancestor descendant，匹配的是ancestor元素内的所有元素。

这一篇我学习了JQuery的层级选择器，下一篇将学习基本筛选器。进来的大神们，可在文章下面评论，如有理解错误，请指出，一起进步，一起学习。

JQuery学习笔记——层级选择器的更多相关文章

  1. JQuery学习笔记——基础选择器

    第一篇博客,现在原生安卓需求不大了.招聘的Android工程师都需要附带更多的其他技术.这也是开启我学习前端之路的开端.前端时间看了HTML.CSS等,在界面渲染这一块,就不多记录博客了.现在学习着J ...

  2. jQuery学习笔记(2)-选择器的使用

    一.选择器是什么 有了jQuery的选择器,我们几乎可以获取页面上任意一个或一组对象 二.Dom对象和jQuery包装集 1.Dom对象 JavaScript中获取Dom对象的方式 <div i ...

  3. JQuery学习笔记之选择器

    JQuery与DOM对象 <div id="test1" class="test2"></div> DOM对象获取方式: var dom ...

  4. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  5. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

  6. jQuery学习笔记之概念（1）

    jQuery学习笔记之概念(1) ----------------------学习目录-------------------- 1.概念 2.特点 3.选择器 4.DOM操作 5.事件 6.jQuer ...

  7. jQuery学习笔记（一）：入门

      jQuery学习笔记(一):入门 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操 ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

随机推荐

  1. Python环境安装及基本概念

    1.安装Python ①官网下载Python包安装 ②添加环境变量(新版Python包可直接添加环境变量) 手动添加环境变量:控制面板-系统-高级系统设置-环境变量-编辑Path添加python安装目 ...

  2. poj3417

    poj3417 题意 给出一颗 n 个节点, n - 1 条边的树,再加上 m 条新边,允许删掉树边和新边各一条,问能使树分为两部分的方案数. 分析 在树的基础上加上不重复的新边一定会构成环,那么考虑 ...

  3. Caused by: org.springframework.beans.NotWritablePropertyException: Invalid property 'URIType' of bean class [com.alibaba.citrus.service.uribroker.uri.GenericURIBroker]

    linux中的JDK为JDK8,tomcat为tomcat8 加入dubbo.war包 启动报错! Caused by: org.springframework.beans.factory.BeanC ...

  4. Docker-compose实战——Django+PostgreSQL

    今天我们来用docker-compose 快速安装一个Django+PostgreSQL的开发环境. Compose简介 Compose 定位是“defining and running comple ...

  5. Dojo初探之5:dojo的request（请求）操作、请求过程事件绑定和隐藏数据data()操作（基于dojo1.11.2版本）

    前言: 上一章详细阐述了dojo的事件绑定操作,本章将讲解dojo的请求操作 注:dojo的请求操作与js和jquery完全不同! 1.dojo的请求 dojo通过request.get()/.put ...

  6. linq中给字段添加别名

    linq 是我们在查询中经常回用到的一种形式,比如我们创建一个类,然后List<添加> 并绑定到表格中 public class Modeltest { string id; public ...

  7. oracle 11g 完全卸载方法

    网上好多卸载教程都前篇一律,但很多卸完重装都有问题,卸了几次装了几次,就特地总结整理一下 另外说一句:在完全删除(或者叫卸载)oracle时,没有必要特别意oracle提示问题,只要把oracle痕迹 ...

  8. java书系列之——前言

    第1章Java的起源 对于计算机语言的发展史,业界一般认为:B语言导致了C语言的诞生,C语言演变出了C++语言,而C++语言将让位于Java语言.要想更好地了解Java语言,就必须了解它产生的原因.推 ...

  9. Perl正则表达式例子

    Perl正则表达式 一.介绍 正则表达式各语言都有自己的规范,但是基本都差不多,都是由元字符的组合来进行匹配:由于Nmap内嵌的服务与版本探测是使用的Perl正则规范,因此此篇博客记录一下Perl正则 ...

  10. html <input type="text" />加上readonly后在各种浏览器的差异。

    <html> <body> <p>Name:<input type="text" name="email" /> ...