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.  ...