<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link rel="stylesheet" type="text/css" href="css/style.css">
                <style type="text/css">
            div, span, p {
                width: 140px;
                height: 140px;
                margin: 5px;
                background: #aaa;
                border: #000 1px solid;
                float: left;
                font-size: 17px;
                font-family: Verdana;
            }

            div.mini {
                width: 55px;
                height: 55px;
                background-color: #aaa;
                font-size: 12px;
            }

            div.hide {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                $("#btn1").click(function(){
                    //选取子元素, 需要在选择器前添加一个空格.
                    $("div.one :nth-child(2)").css("background", "#ffbbaa");
                });
                $("#btn2").click(function(){
                    $("div.one :first-child").css("background", "#ffbbaa");
                });
                $("#btn3").click(function(){
                    $("div.one :last-child").css("background", "#ffbbaa");
                });

                $("#btn4").click(function(){
                    $("div.one :only-child").css("background", "#ffbbaa");
                });

            });
        </script>
    </head>
    <body>
        <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
        <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
        <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
        <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>

        <br><br>
        <div class="one" id="one">
            id 为 one,class 为 one 的div
            <div class="mini">class为mini</div>
        </div>
        <div class="one" id="two" title="test">
            id为two,class为one,title为test的div
            <div class="mini" title="other">class为mini,title为other</div>
            <div class="mini" title="test">class为mini,title为test</div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini"></div>
        </div>
        <div class="one">
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini">class为mini</div>
            <div class="mini" title="tesst">class为mini,title为tesst</div>
        </div>
        <div style="display:none;" class="none">style的display为"none"的div</div>
        <div class="hide">class为"hide"的div</div>
        <div>
            包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
        </div>
        <div id="mover">正在执行动画的div元素.</div>
    </body>
</html>

jQuery选择器(子元素过滤选择器)第七节的更多相关文章

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

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

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

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

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

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

  4. JQuery表单元素过滤选择器

    此选择器主要是对所选择的表单元素进行过滤: 选择器 描述 返回 enabled 选择所有的可用的元素 集合元素 disabled 选择所有的不可用的元素 集合元素 checked 选择所有被选中的元素 ...

  5. jquery子元素过滤选择器

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

  6. 008 jquery过滤选择器-----------（子元素过滤选择器）

    1.介紹 2.程序 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. jQuery中的子（后代）元素过滤选择器（四、六）：nth-child()、first-child、last-child、only-child

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  8. jquery 子元素筛选选择器

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content ...

  9. Jquery | 基础 | jQuery表单对象属性过滤选择器

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>使用jQuery表单对象属性 ...

随机推荐

  1. Sql Server——查询(二)

    上次写了查询里的一些简单的查询方法,如果说上次的是初级查询,那这次的就是高级查询了. 今天主要是聚合函数.分组查询.连接查询.联合查询.在我看来前三个挺简单的,稍微难理解点的也就最后一个,为什么呢?因 ...

  2. java数据库编程之高级查询

    第三章:高级查询(-) 3.1:修改表 3.1.1:修改表 语法: Alter table <旧表名> rename [ TO] <新表名>; 例子:Alter table ` ...

  3. Cmder 软件中修改λ符号方法

    以前的版本 网上都有,我就不介绍了,  只介绍现在的 1. 打开Cmder软件安装位置 2. 打开vendor文件夹 profile.ps1文件 3. 找到第77行  Write-Host " ...

  4. 轻量级文本编辑器，Notepad最佳替代品：Notepad++

    目录 正文之前 1. 目的 2. 原帖 3. 为何推荐Notepad++ 3.1. Notepad++的一些基本特点 3.2. notepad,notepad2,notepad++,ultraEdit ...

  5. mysql导出数据库和恢复数据库代码

    mysql导出数据库和备份数据库 用mysqldump 命令行 命令格式 mysqldump -u 用户名 -p  数据库名 > 数据库名.sql 范例: mysqldump -uroot -p ...

  6. 在不用Promise的情况下如何控制异步请求？

    如何更好的控制异步请求?相信大家一定首选Promise对象.确实,使用Promise控制异步请求确实非常方便,直接使用then()方法就可以实现当一个异步请求完成后再处理另一个请求或操作.同时,这样的 ...

  7. 【特效】hover图片立体翻转

    hover图片翻转效果二::绕Y轴旋转90度,注意父层要加透视属性perspective,这样才能看出立体效果 html: <ul class="list-img"> ...

  8. 数据收集利器 cAdvisor - 每天5分钟玩转 Docker 容器技术（82）

    cAdvisor 是 google 开发的容器监控工具,我们来看看 cAdvisor 有什么能耐. 在 host 中运行 cAdvisor 容器. docker run \ --volume=/:/r ...

  9. 进程池与线程池（concurrent.futures）

    from concurrent.futures import ProcessPoolExecutor import os,time,random def task(n): print('%s is r ...

  10. 文本可视化[二]——《今生今世》人物关系可视化python实现

    文本可视化[二]--<今生今世>人物关系可视化python实现 在文本可视化[一]--<今生今世>词云生成与小说分析一文中,我使用了jieba分词和wordcloud实现了,文 ...