1.子元素过滤器介绍

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

2.代码实例

  1.  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3.  3 <head>
  4.  4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  5  <title>07-子元素过滤选择器.html</title>
  6.  6  <!--   引入jQuery -->
  7.  7  <script src="../js/jquery-1.8.3.js" type="text/javascript"></script>
  8.  8  <script src="./script/assist.js" type="text/javascript"></script>
  9.  9  <link rel="stylesheet" type="text/css" href="./css/style.css" />
  10. 10  <script type="text/javascript">
  11. 11      $(function(){
  12. 12 //         <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
  13. 13          $("#btn1").click(function(){
  14. 14              //子元素使用前提，表达式前面必须是元素
  15. 15              //如果元素上添加了条件，就必须使用空格
  16. 16 //             $("div[class='one'] :nth-child(2)").css("background-color","red");
  17. 17              $("div.one :nth-child(2)").css("background-color","red");
  18. 18              /*
  19. 19              $("div.one")       所有的div自己的样式为one
  20. 20              $("div .one")      所有div中后代元素的样式为one（中间多了个空格）
  21. 21               */
  22. 22          });
  23. 23 //             <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
  24. 24          $("#btn2").click(function(){
  25. 25 //             $("div[class='one']:parent :nth-child(1)").css("background-color","red");
  26. 26              $("div.one :first-child").css("background-color","red")
  27. 27          });
  28. 28 //             <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
  29. 29          $("#btn3").click(function(){
  30. 30              $("div.one :last-child").css("background-color","red");
  31. 31          });
  32. 32 //             <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
  33. 33          $("#btn4").click(function(){
  34. 34              $("div.one :only-child").css("background-color","red");
  35. 35          });
  36. 36      });
  37. 37   </script>
  38. 38 </head>
  39. 39 <body>
  40. 40   <button id="reset">手动重置页面元素</button>
  41. 41   <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  42. 42
  43. 43   <h3>子元素过滤选择器.</h3>
  44. 44   <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
  45. 45   <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
  46. 46   <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
  47. 47   <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52     <br /><br />
  53. 53    <div class="one" id="one" >
  54. 54  id为one,class为one的div
  55. 55       <div class="mini">class为mini</div>
  56. 56   </div>
  57. 57
  58. 58     <div class="one"  id="two" title="test" >
  59. 59      id为two,class为one,title为test的div.
  60. 60       <div class="mini"  title="other">class为mini,title为other</div>
  61. 61       <div class="mini"  title="test">class为mini,title为test</div>
  62. 62   </div>
  63. 63
  64. 64   <div class="one">
  65. 65       <div class="mini">class为mini</div>
  66. 66       <div class="mini">class为mini</div>
  67. 67       <div class="mini">class为mini</div>
  68. 68       <div class="mini"></div>
  69. 69   </div>
  70. 70
  71. 71
  72. 72
  73. 73   <div class="one">
  74. 74       <div class="mini">class为mini</div>
  75. 75       <div class="mini">class为mini</div>
  76. 76       <div class="mini">class为mini</div>
  77. 77       <div class="mini"  title="tesst">class为mini,title为tesst</div>
  78. 78   </div>
  79. 79
  80. 80
  81. 81   <div style="display:none;"  class="none">style的display为"none"的div</div>
  82. 82
  83. 83   <div class="hide">class为"hide"的div</div>
  84. 84
  85. 85   <div>
  86. 86   包含input的type为"hidden"的div<input type="hidden" size="8"/>
  87. 87   </div>
  88. 88
  89. 89
  90. 90   <span id="mover">正在执行动画的span元素.</span>
  91. 91 </body>
  92. 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. 使用stream流按时间段进行分组

    public Map<String, Object> blogClassify(Integer pageNo, Integer pageSize) { // 1.创建分页page对象 Pa ...

  2. Linux系列——常规基础操作

    ​ 1.配置IP a.若安装桌面版系统,直接GUI画面配置,操作直观.简单 ​ ​ b.若安装非桌面版系统,进行如下配置: 1).ifconfig命令(临时配置,重启后失效) ifconfig eth ...

  3. 用 UI 多线程处理 WPF 大量渲染的解决方案

    众所周知, WPF 的 UI 渲染是单线程的,所以如果我们异步或者新建线程去进行数据处理的时候,处理完,想要更新 UI 的时候,需要调用一下 Dispatcher.Invoke,将处理完的数据推入到 ...

  4. ansible复习笔记_role-从零到无

    --创建时间:2021年3月9日 --修改时间:2021年3月9日 --作者:飞翔的小胖猪 roles是各个单独功能性模块的集合,通过分别将变量.文件.任务.模板及处理器放置于单独的目录中,并可以便捷 ...

  5. 02_opencv_python_图像处理进阶

    1  灰度图 import cv2 # opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt # Matplotlib是 ...

  6. JZ-023-二叉搜索树的后序遍历序列

    二叉搜索树的后序遍历序列 题目描述 输入一个整数数组,判断该数组是不是某二叉搜索树的后序遍历的结果.如果是则返回true,否则返回false.假设输入的数组的任意两个数字都互不相同. 题目链接: 二叉 ...

  7. 目标检测常用库MMCV安装中遇到的问题总结

    我看很多教程说mmcv是只支持linux,支持windows版本较少,所以很难和torch.cuda匹配上,所以报错较多难安装.今天试了一下,遇到的和想到的报错问题基本如下: 一.首先是Microso ...

  8. 微信小程序 LIn UL的使用

    网址:https://doc.mini.talelin.com/component/form/rate.html 1:将文件解压拉至小程序项目下: 2:网站复制样式代码: 3:复制至需要展示的页面 4 ...

  9. tensorflow源码解析之common_runtime拾遗

    把common_runtime中剩余的内容,按照文件名排序进行了简单的解析,时间原因写的很仓促,算是占个坑,后续有了新的理解再来补充. allocator_retry 有时候内存分配不可能一次完成,为 ...

  10. MySQL 8.0安装以及初始化错误解决方法

    MySQL 8.0 安装配置及错误排查 官网下载 CentOS7环境下的具体安装步骤 初始化MySQL发生错误的解决方法 忘记数据库root密码 官网下载 mysql官网下载链接:https://de ...