<!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. springboot踩坑记

    1. @ConditionalOnProperty 根据配置加载不同的 bean 场景:对 redis 配置进行封装,实现自动化配置,能兼容哨兵模式和集群模式.想到在 redis 配置中加一个 red ...

  2. Ubuntu部署Docker容器环境

    1.首先切换到root用户 2.安装网卡报错 解决办法,删除锁住的文件: 再次安装成功. 4.ubuntu下面安装:apt-get install openssh-server  安装远程工具 5.设 ...

  3. （十二）springboot中shiro的使用

    一.引入maven配置 <dependency>     <groupId>org.apache.shiro</groupId>     <artifactI ...

  4. mysql 更新与查询（排序 分组 链接查询）

    UPDATE更新 #每一次数据的更新都需要update UPDATE 命令修改 MySQL 数据表数据的通用 SQL 语法: UPDATE table_name SET field1=new-valu ...

  5. Oracle Spatial分区应用研究之八：不同分区粒度在1.5亿要素量级下的查询性能

    以土地调查地类图斑层作为测试数据,共计约1.5亿条要素.随机生成90次各比例尺的查询范围,在ORACLE 11gr2数据库中进行空间查询,记录查询耗时.最后计算平均值和第90百分位数,结果如下图所示: ...

  6. latex 写大论文图目录中图注过长解决方案

    写论文(尤其是学位论文)的时候,Figure通常都是有很长的注释,而Latex的list of figures似乎不能换行(看到有换行的,不过感觉不够美观). 再说,list of figures里面 ...

  7. LeetCode 1046. 最后一块石头的重量(1046. Last Stone Weight) 50

    1046. 最后一块石头的重量 1046. Last Stone Weight 题目描述 每日一算法2019/6/22Day 50LeetCode1046. Last Stone Weight Jav ...

  8. JS实现简单的图片透明度循环变化（渐变）

    找了好多,都是由100到0就结束了,到头来自己魔改,以下就是源码. div中加入img,js添加函数,完事(调用),取名后面加个1是为了避免冲突 <!DOCTYPE HTML> <h ...

  9. Go调用Delphi编写的DLL

    参数整数没有问题,但是如果是字符串,要注意几个细节. 记录如下: 1.Delphi定义函数的时候,字符串参数需要使用PChar类型 2.Go传递参数的时候要将字符串转成UTF16的指针,接收的时候采用 ...

  10. golang中，map作为函数参数是如何传递的

    当你声明一个map的时候: m := make(map[int]int) 编译器会调用 runtime.makemap: // makemap implements a Go map creation ...