<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title></title>

    <link rel="stylesheet" href="imooc.css" type="text/css">

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

</head>

<body>

    <h2>子元素筛选选择器</h2>

    <h3>:first-child、:last-child、:only-child</h3>

    <div class="left first-div">

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

        <div class="div">

            <a>:first-child</a>

        </div>

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>:last-child</a>

        </div>

    </div>

    <script type="text/javascript">

        //查找class="first-div"下的第一个a元素

        //针对所有父级下的第一个

        $(".first-div a:first-child").css("color", "#CD00CD");

    </script>

    <script type="text/javascript">

        //查找class="first-div"下的最后一个a元素

        //针对所有父级下的最后一个

        //如果只有一个元素的话，last也是第一个元素

        $(".first-div a:last-child").css("color", "red");

    </script>

    <script type="text/javascript">

        //查找class="first-div"下的只有一个子元素的a元素

        $(".first-div a:only-child").css("color", "blue");

    </script>

    <h3>:nth-child、:nth-last-child</h3>

    <div class="left last-div">

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>第三个元素</a>

            <a>:last-child</a>

        </div>

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

        </div>

        <div class="div">

            <a>:first-child</a>

            <a>第二个元素</a>

            <a>第三个元素</a>

            <a>:last-child</a>

        </div>

    </div>

    <script type="text/javascript">

        //查找class="last-div"下的第二个a元素

        $(".last-div a:nth-child(2)").css("color", "#CD00CD");

    </script>

    <script type="text/javascript">

        //查找class="last-div"下的倒数第二个a元素

        $(".last-div a:nth-last-child(2)").css("color", "red");

    </script>

</body>

</html>

注意：

jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的

jQuery选择器之子元素选择器的更多相关文章

  1. 深入学习jQuery选择器系列第二篇——过滤选择器之子元素选择器

    × 目录 [1]通用形式 [2]反向形式 [3]首尾元素 [4]唯一元素 前面的话 在上一篇中已经介绍过基础选择器和层级选择器,本文开始介绍过滤选择器.过滤选择器是jQuery选择器中最为庞大也是最为 ...

  2. jQuery选择器之子元素过滤选择器Demo

    测试代码: 07-子元素过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  3. jquery选择器之子元素

    HTML代码: :first-child 匹配第一个子元素,每个父元素的第一个子元素 :last-child 匹配最后一个子元素,每个父元素的最后一个子元素 <!DOCTYPE html> ...

  4. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. jQuery选择器之内容过滤选择器Demo

    测试代码: 04-内容过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  6. jquery选择器之内容过滤选择器

    先写出DOM元素的HTML结构: <style type="text/css"> /*高亮显示*/ .highlight{ background-color: gray ...

  7. css 选择器之子元素

    /*html*/ <div class="wrap"> <span>1</span> <span>2</span> &l ...

  8. jQuery选择器之基本过滤选择器Demo

    测试代码: 03-基本过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. jQuery选择器之可见性过滤选择器Demo

    测试代码 05-可见性过滤选择器.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

随机推荐

  1. I2S

    音频数据传输而制定: Inter—IC Sound : 单线 时钟和数据一条线,时分复用: 标准的I2S总线电缆是由3根串行导线组成的:1根是时分多路复用(简称TDM)数据线:1根是字选择线:1根是时 ...

  2. 四叉树 bnuoj

    点击打开题目链接 建树+广搜一棵树:最下面有更短代码(很巧妙). #include<iostream> #include<stdio.h> #include<queue& ...

  3. java中io类型及成熟io框架

    就io本身而言,概念上有5中模型:blocking I/O, nonblocking I/O, I/O multiplexing(select and poll), singal driven I/O ...

  4. Mother's Milk

    链接 分析:我们用vis[i][j][k]来记录A,B,C三个状态是否被访问过,同时用s[i]来记录C的所有可能值,当i==0时,如果j合法,则标记s[k]=1,最后统计所有为1的s即可 /* PRO ...

  5. 线段树之成段更新（ 需要用到延迟标记,简单来说就是每次更新的时候不要更新到底,用延迟标记使得更新延迟到下次需要更新or询问到的时候）

    HDU  1698 链接:  http://acm.hdu.edu.cn/showproblem.php?pid=1698 线段树功能:update:成段替换 (由于只query一次总区间,所以可以直 ...

  6. Android之APP模块编译

    一,如何把app编进系统 a.源码编译,在packages/apps目录下有安卓原生的app,以Bluetooth为例,源码根目录下有Android.mk文件: packages\apps\Bluet ...

  7. Vue.nextTick()的正确使用

    Vue异步执行DOM更新.只要观察导数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变,如果同一个watcher被多次触发,只会一次推入到队列中.这种在缓冲时去除重复数据对于避免 ...

  8. 任务17：从UML角度来理解依赖

    什么是依赖 如果我们用EF操作数据库. 那么CustomerController就对Context形成了依赖. 我们这种依赖的写法就是隐式的依赖 显式依赖于隐式依赖 怎么理解隐式的依赖呢? 三层架构是 ...

  9. 【Tip】JavaScript

    『JavaScript』 『引用网络资源』 JQuery <script src="http://code.jquery.com/jquery-latest.js">& ...

  10. 进程与线程（2）- python实现多进程

    python 实现多进程 参考链接: https://morvanzhou.github.io/tutorials/python-basic/multiprocessing/ python中实现多进程 ...