<!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="https://www.imooc.com/static/lib/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 子元素筛选选择器的更多相关文章

  1. jQuery——子元素筛选器

    子元素筛选器 名称 :first-child JQ语法 jQuery( "selector:first-child" ) 说明 :first-child选择器用于匹配作为父元素的第 ...

  2. jquery子元素过滤选择器

    :nth-child('索引值')//获取指定元素下的某个子元素的位置,索引从1开始: //偶数行                 //$('li:nth-child(even)').addClass ...

  3. jQuery内容过滤选择器与子元素过滤选择器用法实例分析

    jQuery选择器内容过滤 一.:contains(text) 选择器::contains(text)描述:匹配包含给定文本的元素返回值:元素集合 示例: ? 1 2 $("div.mini ...

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

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

  5. jQuery之元素筛选

      1.eq()  筛选指定索引号的元素2.first() 筛选出第一个匹配的元素3.last() 筛选出最后一个匹配的元素4.hasClass() 检查匹配的元素是否含有指定的类5.filter() ...

  6. 过滤选择器first与子元素过滤选择器first-child的区别

    1.表格代码如下: <table id="table"> <tr> <td>id</td> <td>name</t ...

  7. 一个样例看清楚JQuery子元素选择器children()和find()的差别

    近期在我们的hybrid app项目开发中定位出了一个问题.通过这个问题了解下JQuery选择器find()和children()的差别.问题是这种:我们的混合app是一个单页面应用(main.htm ...

  8. jquery子元素选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. jQuery选择器(子元素过滤选择器)第七节

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. Linux 中的-rwxr-xr-x权限代表什么意思

    Linux 中的权限 这里我拿一个tomcat目录举例说明.首先我们在linux系统中执行命令:ls -l 我们拿出其中一个说明-rwxr-xr-x,在Linux 系统中权限是区分用户的,即用户.组用 ...

  2. FinalShell—一体化服务器管理软件（SSH客户端）

    下面附上一些截图和官方连接: 官网:http://www.hostbuf.com/ FinalShell是一体化的的服务器,网络管理软件,不仅是ssh客户端,还是功能强大的开发,运维工具,充分满足开发 ...

  3. WinSCP-windows与Linux之间文件传输

    WinSCP是一款Windows下通过使用SSH协议的开源工具,用于连接Linux操作系统,可以上传或者下载文件使用! 开源顾名思义,无需注册,安装即可使用!(安装请自行百度WinSCP) 打开桌面上 ...

  4. 【视频开发】ONVIF客户端搜索设备获取rtsp地址开发笔记(精华篇)

    转载地址:http://blog.csdn.net/gubenpeiyuan/article/details/25618177 概要:           目前ONVIF协议家族设备已占据数字监控行业 ...

  5. 使用清华源进行pip install

    pypi 镜像使用帮助 pypi 镜像每 5 分钟同步一次. 临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-pac ...

  6. 百度URL参数解析

    在用Python爬取百度搜索的内容时,发现百度搜索的url非常的长,往往会跟一大段的参数,但其实很多参数都是没有必要的,如同样是搜索java关键字,可以通过 http://www.baidu.com/ ...

  7. git revert commitid

    是生成一个和commitid的提交完全相反的提交.类似倒转.

  8. [转帖]TimesTen与Redis的对比

    TimesTen与Redis的对比 2017-02-23 17:25:27 dingdingfish 阅读数 3682更多 分类专栏: TimesTen Oracle Redis In-Memory ...

  9. setdefault函数的用法及理解

    setdefault函数的用法及理解 dict.setdefault(key, default=None) 功能:如果键不存在于字典中,将会添加该键并将default的值设为该键的默认值,如果键存在于 ...

  10. arc079

    D. Decrease (Contestant ver.) 大意: 每次操作选一个最大数$-n$,其余数全$+1$. 要求构造一个序列$a$, 使得恰好$k$次操作后最大值不超过$n-1$. 只要让$ ...