1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Untitled Document</title>
  6.         <link rel="stylesheet" type="text/css" href="css/style.css">
  7.                 <style type="text/css">
  8.             div, span, p {
  9.                 width: 140px;
  10.                 height: 140px;
  11.                 margin: 5px;
  12.                 background: #aaa;
  13.                 border: #000 1px solid;
  14.                 float: left;
  15.                 font-size: 17px;
  16.                 font-family: Verdana;
  17.             }
  18.  
  19.             div.mini {
  20.                 width: 55px;
  21.                 height: 55px;
  22.                 background-color: #aaa;
  23.                 font-size: 12px;
  24.             }
  25.  
  26.             div.hide {
  27.                 display: none;
  28.             }
  29.         </style>
  30.         <script type="text/javascript" src="jquery-1.7.2.js"></script>
  31.         <script type="text/javascript">
  32.             $(document).ready(function(){
  33.  
  34.                 $("#btn1").click(function(){
  35.                     //选取子元素, 需要在选择器前添加一个空格.
  36.                     $("div.one :nth-child(2)").css("background", "#ffbbaa");
  37.                 });
  38.                 $("#btn2").click(function(){
  39.                     $("div.one :first-child").css("background", "#ffbbaa");
  40.                 });
  41.                 $("#btn3").click(function(){
  42.                     $("div.one :last-child").css("background", "#ffbbaa");
  43.                 });
  44.  
  45.                 $("#btn4").click(function(){
  46.                     $("div.one :only-child").css("background", "#ffbbaa");
  47.                 });
  48.  
  49.             });
  50.         </script>
  51.     </head>
  52.     <body>
  53.         <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
  54.         <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
  55.         <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
  56.         <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
  57.  
  58.         <br><br>
  59.         <div class="one" id="one">
  60.             id 为 one,class 为 one 的div
  61.             <div class="mini">class为mini</div>
  62.         </div>
  63.         <div class="one" id="two" title="test">
  64.             id为two,class为one,title为test的div
  65.             <div class="mini" title="other">class为mini,title为other</div>
  66.             <div class="mini" title="test">class为mini,title为test</div>
  67.         </div>
  68.         <div class="one">
  69.             <div class="mini">class为mini</div>
  70.             <div class="mini">class为mini</div>
  71.             <div class="mini">class为mini</div>
  72.             <div class="mini"></div>
  73.         </div>
  74.         <div class="one">
  75.             <div class="mini">class为mini</div>
  76.             <div class="mini">class为mini</div>
  77.             <div class="mini">class为mini</div>
  78.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  79.         </div>
  80.         <div style="display:none;" class="none">style的display为"none"的div</div>
  81.         <div class="hide">class为"hide"的div</div>
  82.         <div>
  83.             包含input的type为"hidden"的div<input type="hidden" value="123456789" size="8">
  84.         </div>
  85.         <div id="mover">正在执行动画的div元素.</div>
  86.     </body>
  87. </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. 关于如何更好地使用Github的一些建议

    关于如何更好地使用Github的一些建议 原文(Github repository形式): https://github.com/Wasdns/github-example-repo 本文记录了我对于 ...

  2. 【BZOJ】 2463 [中山市选2009]谁能赢呢？（博弈论）

    Description   小明和小红经常玩一个博弈游戏.给定一个n×n的棋盘,一个石头被放在棋盘的左上角.他们轮流移动石头.每一回合,选手只能把石头向上,下,左,右四个方向移动一格,并且要求移动到的 ...

  3. 705. New Distinct Substrings spoj（后缀数组求所有不同子串）

    705. New Distinct Substrings Problem code: SUBST1 Given a string, we need to find the total number o ...

  4. Python cPickle模块

    新博客地址:http://gorthon.sinaapp.com/ 持久性就是指保持对象,甚至在多次执行同一程序之间也保持对象.通过本文,您会对 Python对象的各种持久性机制(从关系数据库到 Py ...

  5. 简单Elixir游戏服设计- 游戏玩法介绍

    抄以前的,做了点修改. 到目前为止,我们完成了玩家的数据和进程建模,现在介绍游戏玩法. 为什么我们还不做客户端接入.协议指定呢?为什么还没有网关和数据存储呢.在我接手的游戏, 这些通常已经定下来了,我 ...

  6. Python自学笔记-字符串编码（来自廖雪峰的官网Python3）

    感觉廖雪峰的官网http://www.liaoxuefeng.com/里面的教程不错,所以学习一下,把需要复习的摘抄一下. 以下内容主要为了自己复习用,详细内容请登录廖雪峰的官网查看.   1.理解变 ...

  7. HDU5661 Claris and XOR

    我们求二进制是怎么求的呢:先看看二进制的每一位代表多大:.......32 16 8 4 2 1 假如n=10, ..... 32>n ,不要. 16>n,不要. 8<=n,要,然后 ...

  8. Java面向对象 IO （三）

     Java面向对象  IO  (三) 知识概要:                    (1)IO 流的操作规律                    (2)异常日志信息IO处理          ...

  9. Mybatis Sql片段的应用

    在一个查询里,针对各种不同数据库,有时候只是一部分 SQL 是不相同的,为避免相同的部分复制多次,所以将不相同的部分进行适当的隔离,再重用就可以了. 在 MyBatis 里声明两段 <sql d ...

  10. 解析 .Net Core 注入 (2) 创建容器

    在上一节的学习中,我们已经知道了通过 IServiceCollection 拓展方法创建 IServiceProvider 默认的是一个类型为 ServiceProvider 对象,并且实际提供创建对 ...