<!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. Windows API 第二篇 SHGetSpecialFolderPath

    BOOL SHGetSpecialFolderPath( HWND hwndOwner,                                  LPTSTR lpszPath,       ...

  2. 长按触发（PC端和移动端）

    $.fn.longPress = function(fn) { var timeout = undefined; var $this = this; for(var i = 0;i<$this. ...

  3. day45作业

    利用 html + css 写一个最基本的页面 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  4. C语言作用域、链接属性和存储类型

    C/C++中作用域详解 作用域 编译器可以确认的4种作用域-代码块作用域.文件作用域.函数作用域和原型作用域,一般来说,标识符(包括变量名和函数名)声明的位置决定它的作用域. (1)代码块作用域 一对 ...

  5. 简单易学的机器学习算法—SVD奇异值分解

    简单易学的机器学习算法-SVD奇异值分解 一.SVD奇异值分解的定义     假设M是一个的矩阵,如果存在一个分解: 其中的酉矩阵,的半正定对角矩阵,的共轭转置矩阵,且为的酉矩阵.这样的分解称为M的奇 ...

  6. qml获取实际渲染的字体

    当设置qml的Text元素的字体时,如果系统中不存在设置的字体,qml会根据匹配算法自动选取系统中存在的一种字体.比如:设置font.family: "微软雅黑",但系统中根本没有 ...

  7. PHP 缓存详解

    为什么要使用缓存 一个网站或者一个应用的标准流程是浏览器向应用服务器发出请求,应用服务器做一些计算和逻辑判断之后再请求数据库,数据库收到请求后在经过计算将数据返回给应用服务器,应用服务器再次计算后把数 ...

  8. 901. Online Stock Span [短于线性的时间统计单个元素的Span ]

    Span 指这个元素之前连续的小于这个元素的值有多少个 原理: 维护递减栈 这个栈内的元素是递减的序列 新到一个元素x 依次出栈比x小的(也就是这个元素的Span) 这种问题的关键在于 新来的元素如果 ...

  9. 用sqoop抽取oracle 表到hbase的例子

    sqoop import \-Doraoop.disabled=true \--connect jdbc:oracle:thin:@"(DESCRIPTION=(ADDRESS=(PROTO ...

  10. 洛谷P5071 此时此刻的光辉

    2s512M. 解:先分解质因数.考虑按照质因数大小是否大于√分类. 大于的就是一个数颜色个数,莫队即可n√m. 小于的直接枚举质因数做前缀和然后O(1)查询.总时间复杂度n(√m + σ(√V)). ...