1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.         <title>Untitled Document</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.  
  18.             div.mini {
  19.                 width: 55px;
  20.                 height: 55px;
  21.                 background-color: #aaa;
  22.                 font-size: 12px;
  23.             }
  24.  
  25.             div.hide {
  26.                 display: none;
  27.             }
  28.         </style>
  29.         <script type="text/javascript" src="jquery-1.7.2.js"></script>
  30.         <script type="text/javascript">
  31.  
  32.             $(function(){
  33.  
  34.                 $("#btn1").click(function(){
  35.                     $("body div").css("background", "#ffbbaa");
  36.                 });
  37.                 $("#btn2").click(function(){
  38.                     $("body > div").css("background", "#ffbbaa");
  39.                 });
  40.                 $("#btn3").click(function(){
  41.                     $("#one + div").css("background", "#ffbbaa");
  42.                 });
  43.  
  44.                 $("#btn4").click(function(){
  45.                     $("#two ~ div").css("background", "#ffbbaa");
  46.                 });
  47.                 $("#btn5").click(function(){
  48.                     $("#two").siblings("div").css("background", "#ffbbaa");
  49.                 });
  50.                 $("#btn6").click(function(){
  51.                     //以下选择器选择的是近邻 #one 的 span 元素, 若该span
  52.                     //和 #one 不相邻, 选择器无效.
  53.                     //$("#one + span").css("background", "#ffbbaa");
  54.                     $("#one").nextAll("span:first").css("background", "#ffbbaa");
  55.                 });
  56.                 $("#btn7").click(function(){
  57.                     $("#two").prevAll("div").css("background", "#ffbbaa");
  58.                 });
  59.  
  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" />
  72.  
  73.         <br><br>
  74.         <div class="one" id="one">
  75.             id 为 one,class 为 one 的div
  76.             <div class="mini">class为mini</div>
  77.         </div>
  78.         <div class="one" id="two" title="test">
  79.             id为two,class为one,title为test的div
  80.             <div class="mini" title="other">class为mini,title为other</div>
  81.             <div class="mini" title="test">class为mini,title为test</div>
  82.         </div>
  83.         <div class="one">
  84.             <div class="mini">class为mini</div>
  85.             <div class="mini">class为mini</div>
  86.             <div class="mini">class为mini</div>
  87.             <div class="mini"></div>
  88.         </div>
  89.         <div class="one">
  90.             <div class="mini">class为mini</div>
  91.             <div class="mini">class为mini</div>
  92.             <div class="mini">class为mini</div>
  93.             <div class="mini" title="tesst">class为mini,title为tesst</div>
  94.         </div>
  95.         <div style="display:none;" class="none">style的display为"none"的div</div>
  96.         <div class="hide">class为"hide"的div</div>
  97.         <div>
  98.             包含input的type为"hidden"的div<input type="hidden" size="8">
  99.         </div>
  100.         <span id="span">^^span元素^^</span>
  101.         <span id="span">--span元素--</span>
  102.     </body>
  103. </html>

jQuery选择器(层级选择器)第二节的更多相关文章

  1. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  2. Jquery操作层级选择器

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. jQuery的层级选择器

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  4. jquery div层级选择器

    div id="modelName" class="modelName"> <!-- 车系的层 --> <div name=" ...

  5. JQuery学习笔记——层级选择器

    JQuery学习笔记--层级选择器 上一篇学习了基础的五种选择,分别是id选择器,class选择器,element选择器,*选择器 和 并列选择器.根据手册大纲,这篇学习的是层级选择器. 选择器: 1 ...

  6. Jquery 之 使用选择器

    jQuery选择器描述 jQuery选择器是jQuery框架的基础,jQuery对事件的处理.DOM操作.CSS动态控制.Ajax通信.动画设计都是在选择器基础上进行的.jQuery 选择器采用CSS ...

  7. 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器

    × 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...

  8. 什么是 jQuery 和jQuery的基本选择器，层级选择器，基本筛选器

    jQuery是什么? ［1］   jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入其team. ［2］   jQuery是继prototype ...

  9. Jquery | 基础 | 慕课网 | 层级选择器

    选择器中的层级选择器处理关系类型: 子元素 后代元素 兄弟元素 相邻元素 <!DOCTYPE html> <html> <head> <meta http-e ...

随机推荐

  1. Spring常用注解介绍【经典总结】

    Spring的一个核心功能是IOC,就是将Bean初始化加载到容器中,Bean是如何加载到容器的,可以使用Spring注解方式或者Spring XML配置方式. Spring注解方式减少了配置文件内容 ...

  2. TCHAR

    定义 TCHAR :通过define 定义的字符串宏 因为C++支持两种字符串:常规的ANSI编码 (使用""包裹).Unicode编码(使用L" "包裹).因 ...

  3. canvas，html2canvas等合成图片不清晰问题

    function  pxRa(cxt) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStor ...

  4. vue环境搭建

    1.Window 上安装Node.js 1.Windows 安装包(.msi) 32 位安装包下载地址 : https://nodejs.org/dist/v4.4.3/node-v4.4.3-x86 ...

  5. LCT学习笔记

    最近自学了一下LCT(Link-Cut-Tree),参考了Saramanda及Yang_Zhe等众多大神的论文博客,对LCT有了一个初步的认识,LCT是一种动态树,可以处理动态问题的算法.对于树分治中 ...

  6. js 防止变量冲突

    解决方法 sc1 和sc2 的a都是window.a 会指向一个变量 1:使用匿名函数将脚本包起来,全局变量用来通信 如window.x; 2:命名空间 代码: <script> (fun ...

  7. 从零开始配置TypeScript + React + React-Router + Redux + Webpack开发环境

    转载请注明出处! 说在前面的话: 1.为什么不使用现成的脚手架?脚手架配置的东西太多太重了,一股脑全塞给你,我只想先用一些我能懂的库和插件,然后慢慢的添加其他的.而且自己从零开始配置也能学到更多的东西 ...

  8. javascript bom 编程

     javascript bom  编程 BOM: 浏览器对象模型 DOM Window  :窗口Window Document 属性:     status :状态栏     self:自己    ...

  9. sqlserver游标使用和循环

    /*** 游标的使用 讲了这个多游标的优点,现在我们就亲自来揭开游标的神秘的面纱. 使用游标的顺序: 声名游标.打开游标.读取数据.关闭游标.删除游标. 1.3.1声明游标 最简单游标声明:DECLA ...

  10. intellij idea 插件开发--快速定位到mybatis mapper文件中的sql

    intellij idea 提供了openApi,通过openApi我们可以自己开发插件,提高工作效率.这边直接贴个链接,可以搭个入门的demo:http://www.jianshu.com/p/24 ...