<!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. jQuery5事件相关

    一.注册事件的方式 1.直接注册事件 $(this).事件名(动作函数)://$(this).click(fucntion(){//动作代码}); 2.bind同时给一个对象注册多个事件 $(this ...

  2. BZOJ 1933 [Shoi2007]Bookcase 书柜的尺寸

    神奇的dp优化. 考虑6维状态的dp,分别表示三行高和宽,显然MLE&&TLE. 把高排个序,从大到小往架上放,那么若不是重开一行便对高度没有影响. 然后求出宽度的sum,dp[i][ ...

  3. pycharm每次新建项目都要重新安装一些第三方库的解决办法（转载防删）

    目前有三个解决办法,也是亲测有用的: 第一个方法:因为之前有通过pycharm的project interpreter里的+号添加过一些库,但添加的库只是指定的项目用的,如果想要用,就必须用之前的项目 ...

  4. Python的几个高级编程技巧

    Python有一些技巧对你来说是新知识,但是还有一些技巧会让你的代码效率大幅提升. 本文总结了一下自己用到的一些Python高级编程技巧,希望对大家有帮助. 列表生成器 a=[1,2,3] [x*x ...

  5. python学习笔记2_二元运算符和比较运算

    一.二元操作符 a+b : a加b a-b :  a减b a*b :  a乘b a/b : a除以b a//b:a整除以b,表示的是返回a除以b的结果的整数部分,而不是证明了a能被b整除.要证明a能被 ...

  6. WPF DataGrid动态生成列的单元格背景色绑定

    <DataTrigger Binding="{Binding RelativeSource={RelativeSource Self}, Path=Column.DisplayInde ...

  7. matlab中disp函数的简单用法

    输出数组类型的数据,也可以把string类型的数据看做数组输出 输出数字 >> num = ; >> disp(num) 输出字符串 >> disp('this i ...

  8. Django项目：CRM(客户关系管理系统)--42--34PerfectCRM实现CRM自定义用户

    #models.py # ————————01PerfectCRM基本配置ADMIN———————— from django.db import models # Create your models ...

  9. js的模块化写法

    记得前两天自己写一个动画首页,动画很复杂,我用的fullpage虽然相对比较简单,但是每个页面的animation各有差异,需要相对控制,估计有上千行的js代码,写的心情乱糟糟的. 如何让代码量巨大, ...

  10. poj 2318 TOYS(计算几何 点与线段的关系)

    TOYS Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 12015   Accepted: 5792 Description ...