<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .color{

             background-color: pink;

         }

         .bdcolor{

             border: 1px solid #f00;

         }

     </style>

     <script src="lib/jquery-1.12.2.js"></script>

     <script>

         $(function () {

         /**

          *  父 parent()

          *      祖先parents()

          *  子 children()

          *      后代  find()

          *  兄弟  siblings()

          *

          *  后面的一个兄弟

          *  .next()

          *  后面的所有兄弟

          *  .nextAll()

          *

          *  前面的兄弟

          *  .prev()

          *  前面的所有的兄弟

          *  .prevAll()

          *

          * */

 //        $('.item').parent().addClass('bdcolor');

 //        $('.father').children().addClass('bdcolor');

 //

 //        // 同样效果的两行代码

 //        $('.father').children('.item').addClass('bdcolor');

 //        $('.father > .item').addClass('bdcolor');

 //

 //        //只选中兄弟不选择自己

 //        $('.item').sibling().addClass('bdcolor');

 //

 //        $('.item').next().addClass('bdcolor');

 //        $('.item').nextAll().addClass('bdcolor');

 //        $('.item').prev().addClass('bdcolor');

 //        $('.item').prevAll().addClass('bdcolor');

 //        子代： .children()

 //        后代:  .find()

           $('.content').find('.son').addClass('bdcolor');

           $('.content .son2').addClass('color');

 //        父级：.parent()

 //        祖先: .parents()

           $('.son').parents('.content').addClass('bdcolor');

         });

     </script>

 </head>

 <body>

 <div class="content">

     <ul class="father">

         <li>0001</li>

         <li>0002</li>

         <li class="item">0003</li>

         <li>0004</li>

         <li>0005

             <ul class="son">

                 <li>儿子001</li>

                 <li>儿子002</li>

                 <li>儿子003</li>

             </ul>

             <ul class="son2">

                 <li>儿子001</li>

                 <li>儿子002</li>

                 <li>儿子003</li>

             </ul>

         </li>

         <li>0006</li>

         <li>0007</li>

         <li>0008</li>

         <li>0009</li>

         <li>0010</li>

         <li>0011</li>

         <li>0012</li>

         <li>0013</li>

         <li>0014</li>

         <li>0015</li>

         <li>0016</li>

         <li>0017</li>

         <li>0018</li>

         <li>0019</li>

         <li>0020</li>

     </ul>

 </div>

 </body>

 </html>

JQuery--关系选择器的更多相关文章

  1. 演示-JQuery关系选择器

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

  2. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  3. jQuery的选择器小总结

      这一节详细的总结jQuery选择器. 一.基础选择器 $('#info'); // 选择id为info的元素,id为document中是唯一的,因此可以通过该选择器获取唯一的指定元素 $('.in ...

  4. python 全栈开发，Day53(jQuery的介绍,jQuery的选择器,jQuery动画效果)

    js总结 js: 1.ECMAScript5 ES5语法 2.DOM CRUD 获取 3种方式 id tag className //面向对象 对象 : 属性和方法 某个对象中 function $( ...

  5. jquery-5 jQuery筛选选择器

    jquery-5  jQuery筛选选择器 一.总结 一句话总结:选择器加动态添加方法可以不用想方法名,这个简单方便. 1.筛选选择器有哪三种? 过滤 查找 串联 1.过滤 eq();first(); ...

  6. JQuery之选择器篇(一)

      今天回顾了之前学习的JQuery选择器,现在简单的总结一下. JQuery选择器类型   主要分为四类 基本选择器 层级选择器 过滤选择器 表单选择器 基本选择器   基本选择器是jQuery中最 ...

  7. jQuery学习笔记——jQuery常规选择器

    一．简单选择器在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则.而CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery ...

  8. jquery 常用选择器和方法以及遍历（超详细）

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

  9. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  10. HTML 学习笔记 JQuery（选择器）

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

随机推荐

  1. Css if hack条件语法

    Css if hack条件语法  <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> ...

  2. C#可扩展编程之MEF（一）：MEF简介及简单的Demo

      在文章开始之前,首先简单介绍一下什么是MEF,MEF,全称Managed Extensibility Framework(托管可扩展框架).单从名字我们不难发现:MEF是专门致力于解决扩展性问题的 ...

  3. 升级gitk后，Error in startup script: unknown color name "lime"

    $ gitkError in startup script: unknown color name "greeen" (processing "-fore" o ...

  4. 深入浅出 Java Concurrency - 目录 [转]

    这是一份完整的Java 并发整理笔记,记录了我最近几年学习Java并发的一些心得和体会. J.U.C 整体认识 原子操作 part 1 从AtomicInteger开始 原子操作 part 2 数组. ...

  5. opencv4 java投影

    工程下载 https://download.csdn.net/download/qq_16596909/11505994 比较适合与验证码的处理,毕竟八邻域降噪不能消除比较大的噪点,为了尽量减少噪点对 ...

  6. iOS学习笔记-084.粒子效果——路径移动

    https://blog.csdn.net/qiwenmingshiwo/article/details/75806637 粒子效果路径移动一说明1 效果2 步骤分析二代码1 VCViewh2 VCV ...

  7. 文件内容操作命令 cat、more、less、head、tail、wc、grep 命令详情

      文件内容操作命令 cat.more.less.head.tail.wc.grep 命令详情 1)        cat命令   用途:显示出文件的全部内容   格式:cat 目标文件   例:   ...

  8. Leetcode543.Diameter of Binary Tree二叉树的直径

    给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点. 示例 : 给定二叉树 1 / \ 2    3 / \ 4  5 返回 3, 它 ...

  9. 未加星标 Linux磁盘下查看I/O磁盘的性能

    iostat查看linux硬盘IO性能 rrqm/s:每秒进行merge的读操作数目.即delta(rmerge)/s wrqm/s:每秒进行merge的写操作数目.即delta(wmerge)/s ...

  10. 用JetBrains PyCharm 2017.2创建运行Django程序

    在JetBrains PyCharm 2017.2里选择 文件(F) 新项目 点击  三角形  运行 修改Urls.py """S14Djngo URL Configur ...