1.子元素过滤器介绍

  • :nth-child　　　　 获得指定索引的孩子，从1开始
  • :first-child　　　　 获得第一个孩子
  • :last-child　　　　 获得最后一个孩子
  • :only-child　　　　 获得独生子

2.代码实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 5  <title>07-子元素过滤选择器.html</title>

 6  <!--   引入jQuery -->

 7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>

 8  <script src="./script/assist.js" type="text/javascript"></script>

 9  <link rel="stylesheet" type="text/css" href="./css/style.css" />

10  <script type="text/javascript">

11      $(function(){

12 //         <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>

13          $("#btn1").click(function(){

14              //子元素使用前提，表达式前面必须是元素

15              //如果元素上添加了条件，就必须使用空格

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

17              $("div.one :nth-child(2)").css("background-color","red");

18              /*

19              $("div.one")       所有的div自己的样式为one

20              $("div .one")      所有div中后代元素的样式为one（中间多了个空格）

21               */

22          });

23 //             <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>

24          $("#btn2").click(function(){

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

26              $("div.one :first-child").css("background-color","red")

27          });

28 //             <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>

29          $("#btn3").click(function(){

30              $("div.one :last-child").css("background-color","red");

31          });

32 //             <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>

33          $("#btn4").click(function(){

34              $("div.one :only-child").css("background-color","red");

35          });

36      });

37   </script>

38 </head>

39 <body>

40   <button id="reset">手动重置页面元素</button>

41   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>

42

43   <h3>子元素过滤选择器.</h3>

44   <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>

45   <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>

46   <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>

47   <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>

48

49

50

51

52     <br /><br />

53    <div class="one" id="one" >

54  id为one,class为one的div

55       <div class="mini">class为mini</div>

56   </div>

57

58     <div class="one"  id="two" title="test" >

59      id为two,class为one,title为test的div.

60       <div class="mini"  title="other">class为mini,title为other</div>

61       <div class="mini"  title="test">class为mini,title为test</div>

62   </div>

63

64   <div class="one">

65       <div class="mini">class为mini</div>

66       <div class="mini">class为mini</div>

67       <div class="mini">class为mini</div>

68       <div class="mini"></div>

69   </div>

70

71

72

73   <div class="one">

74       <div class="mini">class为mini</div>

75       <div class="mini">class为mini</div>

76       <div class="mini">class为mini</div>

77       <div class="mini"  title="tesst">class为mini,title为tesst</div>

78   </div>

79

80

81   <div style="display:none;"  class="none">style的display为"none"的div</div>

82

83   <div class="hide">class为"hide"的div</div>

84

85   <div>

86   包含input的type为"hidden"的div<input type="hidden" size="8"/>

87   </div>

88

89

90   <span id="mover">正在执行动画的span元素.</span>

91 </body>

92 </html>

jQuery--子元素过滤的更多相关文章

  1. jquery子元素过滤选择器

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

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

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

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

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

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

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

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

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

  6. jQuery——子元素筛选器

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

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

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

  8. jquery 子元素筛选选择器

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

  9. jquery 子元素 后代元素 兄弟元素 相邻元素

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

  10. jquery子元素选择器

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

随机推荐

  1. 《手把手教你》系列技巧篇（六十九）-java+ selenium自动化测试 - 读取csv文件（详细教程）

    1.简介 在实际测试中,我们不仅需要读取Excle,而且有时候还需要读取CSV类的文件.如何去读取CSV的文件,宏哥今天就讲解和分享一下,希望对你能够有所帮助.前面介绍了如何读取excel文件,本篇介 ...

  2. [自动化]浅聊ansible的幂等

    描述   幂等性是在实际应用中经常需要考虑的概念,尤其是运维中.相较于将幂等性理解为各种异常情况的综合处理,将其理解为执行时需要考虑到在前次执行产生的影响的情况下能够正常执行则会更加容易接近业务需求. ...

  3. kali各工具使用介绍

    各工具kali官方简介(竖排):https://tools.kali.org/tools-listing 安装kali虚拟机可参考:https://www.cnblogs.com/lsdb/p/650 ...

  4. 轻松了解DNS劫持

    对于互联网,人们总是高谈阔论,却很少有人愿意去了解电脑.手机.电视这些设备到底是如何被"连接"起来的.本文通过"我",一个普通的网络请求的视角,给大家介绍下&q ...

  5. 路径修改后cmd命令行窗口仍然没有变化的原因

    修改环境变量后,要重启cmd再输入才有用

  6. Python：os

    1.os.walk 学习自:python中os.walk的用法详解 - 马里亚纳仰望星空 - 博客园 说明 遍历某个文件夹下的所有文件(包括子文件夹中) 用法 os.walk( top , topdo ...

  7. docker入门-docker应用场景和优势

    一.什么是docker Docker是一个使用 Go 语言开发的,并且开源的应用容器引擎,基于LXC(Linux Container)内核虚拟化技术实现,提供一系列更强的功能,比如镜像.Dockerf ...

  8. CentOS安装时，软件选择（Software Selection）项介绍

    要指定软件包将被安装,选择软件时选择安装摘要屏幕.包组分为基础环境.这些环境是预先定义的一组具有特定用途的软件包:例如,在虚拟化主机环境中包含的一组所需的系统上运行的虚拟机软件程序包.只有一个软件环境 ...

  9. 推动式&拉动式生产

    拉动式:订单发给最后一个单元 推动式:订单发给第一个单元

  10. winform中更新UI控件的方案介绍

    这是一个古老的话题...直入主题吧! 对winfrom的控件来说,多线程操作非常容易导致复杂且严重的bug,比如不同线程可能会因场景需要强制设置控件为不同的状态,进而引起并发.加锁.死锁.阻塞等问题. ...