1.介绍

  

2.程序

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Insert title here</title>
  6. <style type="text/css">
  7. div, span, p {
  8. width: 140px;
  9. height: 140px;
  10. margin: 5px;
  11. background: #aaa;
  12. border: #000 1px solid;
  13. float: left;
  14. font-size: 17px;
  15. font-family: Verdana;
  16. }
  17. div.mini {
  18. width: 55px;
  19. height: 55px;
  20. background-color: #aaa;
  21. font-size: 12px;
  22. }
  23. div.hide {
  24. display: none;
  25. }
  26. </style>
  27. <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
  28. <script type="text/javascript">
  29. $(function(){
  30. //选择 body 内的所有 div 元素
  31. $("#btn1").click(function(){
  32. $("body div").css("background", "#ffbbaa");
  33. });
  34. //在 body 内, 选择子元素是 div 的.
  35. $("#btn2").click(function(){
  36. $("body > div").css("background", "#ffbbaa");
  37. });
  38. //选择 id 为 one 的下一个 div 元素
  39. $("#btn3").click(function(){
  40. $("#one + div").css("background", "#ffbbaa");
  41. });
  42. //选择 id 为 two 的元素后面的所有 div 兄弟元素
  43. $("#btn4").click(function(){
  44. $("#two ~ div").css("background", "#ffbbaa");
  45. });
  46. //选择 id 为 two 的元素所有 div 兄弟元素
  47. $("#btn5").click(function(){
  48. $("#two").siblings("div").css("background", "#ffbbaa");
  49. });
  50. //选择 id 为 one 的下一个 span 元素
  51. $("#btn6").click(function(){
  52. //以下选择器选择的是近邻 #one 的 span 元素, 若该span
  53. //和 #one 不相邻, 选择器无效.
  54. //$("#one + span").css("background", "#ffbbaa");
  55. $("#one").nextAll("span:first").css("background", "#ffbbaa");
  56. });
  57. //选择 id 为 two 的元素前边的所有的 div 兄弟元素
  58. $("#btn7").click(function(){
  59. $("#two").prevAll("div").css("background", "#ffbbaa");
  60. });
  61. })
  62. </script>
  63. </head>
  64. <body>
  65. <input type="button" value="选择 body 内的所有 div 元素" id="btn1" />
  66. <input type="button" value="在 body 内, 选择子元素是 div 的." id="btn2" />
  67. <input type="button" value="选择 id 为 one 的下一个 div 元素" id="btn3" />
  68. <input type="button" value="选择 id 为 two 的元素后面的所有 div 兄弟元素" id="btn4" />
  69. <input type="button" value="选择 id 为 two 的元素所有 div 兄弟元素" id="btn5" />
  70. <input type="button" value="选择 id 为 one 的下一个 span 元素" id="btn6" />
  71. <input type="button" value="选择 id 为 two 的元素前边的所有的 div 兄弟元素" id="btn7" /><br><br>
  72.  
  73. <div class="one" id="one">
  74. id 为 one,class 为 one 的div
  75. <div class="mini">class为mini</div>
  76. </div>
  77. <div class="one" id="two" title="test">
  78. id为two,class为one,title为test的div
  79. <div class="mini" title="other">class为mini,title为other</div>
  80. <div class="mini" title="test">class为mini,title为test</div>
  81. </div>
  82. <div class="one">
  83. <div class="mini">class为mini</div>
  84. <div class="mini">class为mini</div>
  85. <div class="mini">class为mini</div>
  86. <div class="mini"></div>
  87. </div>
  88. <div class="one">
  89. <div class="mini">class为mini</div>
  90. <div class="mini">class为mini</div>
  91. <div class="mini">class为mini</div>
  92. <div class="mini" title="tesst">class为mini,title为tesst</div>
  93. </div>
  94. <div style="display: none;" class="none">style的display为"none"的div</div>
  95. <div class="hide">class为"hide"的div</div>
  96. <div>
  97. 包含input的type为"hidden"的div<input type="hidden" size="8">
  98. </div>
  99. <span id="span">^^span元素^^</span>
  100. <span id="span">--span元素--</span>
  101. </body>
  102. </html>

003 jquery层次选择器的更多相关文章

  1. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  2. jquery层次选择器:空格 > next + nextAll ~ siblings

    全栈工程师开发手册 (作者:栾鹏) jquery系列教程1-选择器全解 jquery层次选择器 jquery层次选择器,包括空格.>.next.+.nextAll.~.siblings等函数或表 ...

  3. jQuery层次选择器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  4. jQuery层次选择器再探究(原创)

    关于层次选择器的详解: 1)可以选取某一个元素的所有的后代元素,得到一个jQuery对象的集合--->$('prev descendant') 2)可以选取某一个元素的子辈的所有的元素,得到一个 ...

  5. 温故知新-------jQuery层次选择器

    <html xmlns="http://www.w3.org/1999/xhtml">  <head>     <title></titl ...

  6. jQuery选择器---层次选择器总结

    今天要分享的是jQuery层次选择器,层次选择器的分类如图: 接下来就开始了 要不先养养眼精神一下: 开始1.祖先选择器: 案例: <form> <label>Name:< ...

  7. jquery 常用选择器和方法以及遍历(超详细)

    jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...

  8. Jquery基本、层次选择器

    基本选择器: $("#none").css("background","#bbffaa"); 改变id为none的所有元素的背景色 $(&q ...

  9. jQuery选择器介绍:基本选择器、层次选择器、过滤选择器、表单选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.因此,如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果.jQuery选择器完全继承了 ...

随机推荐

  1. BZOJ 4380 [POI2015]Myjnie | DP

    链接 BZOJ 4380 题面 有n家洗车店从左往右排成一排,每家店都有一个正整数价格p[i]. 有m个人要来消费,第i个人会驶过第a[i]个开始一直到第b[i]个洗车店,且会选择这些店中最便宜的一个 ...

  2. 结合NTLM中继和Kerberos委派攻击AD

    0x00 前言 在上个月我深入演讲了无约束委派之后,本文将讨论一种不同类型的Kerberos委派:基于资源的约束委派.本文的内容基于Elad Shamir的Kerberos研究,并结合我自己的NTLM ...

  3. Python multiprocessing模块的Pool类来代表进程池对象

    #-*-coding:utf-8-*- '''multiprocessing模块提供了一个Pool类来代表进程池对象 1.Pool可以提供指定数量的进程供用户调用,默认大小是CPU的核心数: 2.当有 ...

  4. Qtree4——动态点分治

    题目描述 给出一棵边带权的节点数量为n的树,初始树上所有节点都是白色.有两种操作: C x,改变节点x的颜色,即白变黑,黑变白 A,询问树中最远的两个白色节点的距离,这两个白色节点可以重合(此时距离为 ...

  5. Andrew Ng机器学习课程,第一周作业,python版本

    Liner Regression 1.梯度下降算法 Cost Function 对其求导: theta更新函数: 代码如下: from numpy import * import numpy as n ...

  6. python的WSGI接口

    WSGI:Web Server Gateway Interface. WSGI是为python语言定义的web服务器和web应用程序或框架之间的一种简单而实用的接口.wsgi是一个web组件的接口规范 ...

  7. C#访问和操作MYSQL数据库

    这里介绍下比较简单的方式,引用MySql.Data.dll然后添加一个MySqlHelper类来对MySql数据库进行访问和操作. 1.将MySql.Data.dll引用到你的项目中 下载地址:MyS ...

  8. Tomcat权威指南-读书摘要系列9

    从源代码组建Tomcat 安装Apache Ant ant是make的开放源代码的替代品,而且是专门为java程序语言设计. Ant的最初用途是作为Tomcat的组建工具: 之后,Ant成为Java软 ...

  9. Hadoop上传文件时报错: could only be replicated to 0 nodes instead of minReplication (=1)....

    问题 上传文件到Hadoop异常,报错信息如下: org.apache.hadoop.ipc.RemoteException(java.io.IOException): File /home/inpu ...

  10. iOS11有哪些新功能?旧iPhone是否真的变慢了

    1. [iOS 11] iOS 11十大实用新功能简介 2.[iOS 11] iPhone二维码扫描,通过内建相机就可以完成! 3. iOS 11内建屏幕录制功能!再也不需要通过第三方应用录屏 4.  ...