<!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. C/C++ 信号量 CreateSemaphore 用法

    HANDLE CreateSemaphore( LPSECURITY_ATTRIBUTES lpSemaphoreAttributes, // SD LONG lInitialCount, // in ...

  2. 如何解决mysql服务器load高

    .登录主机 # ssh hostname .确定是否是mysql导致 # top .查看是哪些sql正在慢查询 # mysql -h hostname -P port -u username # sh ...

  3. pdftk

    功能介绍: 如果PDF是一张电子纸,Pdftk就是一个印戳涂抹器.打孔机.浆糊.显影液.和一个X光玻璃.Pdftk是一个简单的PDF万用工具,使用它,你可以:合并PDF文档分割PDF旋转PDF页面解密 ...

  4. anime.js 学习笔记

    官网演示/文档 anime.js 是一个简便的JS动画库,用法简单而且适用范围广,涵盖CSS,DOM,SVG还有JS的对象,各种带数值属性的东西都可以动起来. 实际演示和代码,官网写得很详细清楚了,这 ...

  5. (转)AngularJS中使用的表单验证

    原文  http://www.cnblogs.com/woshinidezhu/p/Form-validation-with-AngularJS.html 客户端表单验证是AngularJS里面最酷的 ...

  6. bootstrab table+表格 select可编辑完整实例

    先看下效果图: ============================================================================================ ...

  7. Python学习 备注

    python 3.x中urllib库和urilib2库合并成了urllib库..其中urllib2.urlopen()变成了urllib.request.urlopen() urllib2.Reque ...

  8. linux sed命令使用疑惑总结

    s 替换命令 [zhuhc@test111 ~]$ sed 's/ma/mass' test.txt , : unterminated `s' command 原因:替换命令s末尾的斜杠丢失了.正确命 ...

  9. bzoj 4241 历史研究——分块（区间加权众数）

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4241 套路:可以大力预处理,如果求区间加权众数,可以预处理i~j块(或 j 位置)的最大值, ...

  10. LTIME16小结(CodeChef)

    题目链接 最后一题是Splay...还没有学会..蒟蒻!!! A /****************************************************************** ...