测试代码:

07-子元素过滤选择器.html

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>07-子元素过滤选择器.html</title>
  <!--   引入jQuery -->
  <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script src="./script/assist.js" type="text/javascript"></script>
  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  <script type="text/javascript">
       $(document).ready(function(){
           //<input type="button" value="选取每个class为one的div的第2个子元素." id="btn1"/>
           $("#btn1").click(function(){
               /*
                *    子元素过滤选择器的特殊用法:
                *     * 必须要在其前面,增加空格
                *     * 子元素过滤选择器是从"1"开始
                */

             $("div[class='one'] :nth-child(2)").css("background","red");

           });

           //<input type="button" value="选取每个class为one的div, 父元素下的第一个子元素." id="btn2"/>
           $("#btn2").click(function(){

                 //$("div[class='one'] :nth-child(1)").css("background","red");

                 $("div[class='one'] :first-child").css("background","red");
           });

           //<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
           $("#btn3").click(function(){
                   $("div[class='one'] :last-child").css("background","red");
           });

           //<input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
           $("#btn4").click(function(){
                   $("div[class='one'] :only-child").css("background","red");
           });

     });
   </script>
 </head>
 <body>
   <button id="reset">手动重置页面元素</button>
   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>    

   <h3>子元素过滤选择器.</h3>
   <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" size="8"/>
   </div>

    <span id="mover">正在执行动画的span元素.</span>
     <!-- Resources from http://down.liehuo.net -->
 </body>
 </html>

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

  1. jQuery选择器之子元素选择器

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

  2. jquery选择器之子元素

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

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

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

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

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

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

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

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

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

  7. css 选择器之子元素

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

  8. jquery子元素过滤选择器

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

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

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

随机推荐

  1. Quartz.NET 2.0 学习笔记(1) ：Quartz.NET简介

    http://www.cnblogs.com/lzrabbit/archive/2012/04/13/2447609.html

  2. visual studio 设计器上出现蓝色的点和箭头

    visual studio 设计器上出现蓝色的点和箭头: 突然发现打开visual studio 的时候出现了很多蓝色的点和箭头,解决办法是:按组合快捷键 Ctrl+R,Ctrl+W 或 Ctrl+E ...

  3. 利用FlashPaper实现类似百度文库功能

    最近需要实现一个类似百度文库的功能,在Google上淘了一段时间,发现FlashPaper还算能够不错的实现此需求. 首先讲下思路: 1>安装FlashPaper: 2>利用java代码将 ...

  4. 用ICSharpCode.SharpZipLib进行压缩

    今天过中秋节,当地时间(2013-09-08),公司也放假了,正好也闲着没事,就在网上学习学习,找找资料什么的.最近项目上可能会用到压缩的功能,所以自己就先在网上学习了,发现一个不错的用于压缩的DLL ...

  5. jQuery Mobile 手动显示ajax加载器，提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  6. HttpRequest类

    一.HttpRequest的作用 HttpRequest的作用是令到Asp.net能够读取客户端发送HTTP值.比如表单.URL.Cookie传递过来的参数. 返回字符串的那些值就不说了,那些基本上都 ...

  7. PP常见数据表

    Table表    Short text短文本 AFFL    Work order sequence加工单顺序 AFFT    Order process instructions订单-流程指令 A ...

  8. ORACLE AUTOMATIC STORAGE MANAGEMENT翻译-第二章ASM Instance（4）完

    ASM安全 这个小节主要描写叙述与ASM相关的各种安全配置话题,像 配置ASM须要的userids.groupids:ASM权限如 SYSOPER,SYSDBA和新的SYSASM权限,最后还有ASM ...

  9. 0c-41-ARC下循环引用问题

    1.ARC下循环引入问题 一个人拥有一只狗,一只狗拥有一个主人. 当增加d.owner = p;时形成循环引用. 解决方法:一端用strong,一端用weak. 2.ARC下@property参数 A ...

  10. Dapper链接查询扩展

    一对多映射关系 /// <summary> /// 一对多连接查询 /// </summary> /// <typeparam name="FirstT&quo ...