<!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. tp5.1 swoole 实现异步处理

    客户端请求:<?phpnamespace app\index\controller; class Index{ public function index() { $client = new \ ...

  2. iftop实时监控网络流量

    需要安装,linux自身不自带该命令 中间的<= =>这两个左右箭头,表示的是流量的方向. TX:发送流量 RX:接收流量 TOTAL:总流量 Cumm:运行iftop到目前时间的总流量 ...

  3. Java实现对日期上旬中旬下旬格式化

    PS:我数据库表定义的日期是String类型,要求对读取的日期进行格式化为xx年xx月上\中\下旬 测试代码如下 package day1; import java.text.ParseExcepti ...

  4. Django项目：CRM(客户关系管理系统)--80--70PerfectCRM实现CRM业务流程(bpm)课程排行分页

    # coursetop_views.py # ————————64PerfectCRM实现CRM课程排名详情———————— #————班级学生详情——#计算#{学员ID:分数}——#计算 #{学员I ...

  5. IT外包概要

    IT外包 前两天和朋友聊起这个外包的问题,就顺便给他说了一下,自己也整理了一下,发出来,方便更多的人. 如果有说的不准确的地方欢迎大家补充分享. 大致分两种: 项目外包, 人力外包. 简而言之:项目外 ...

  6. JS对象和数组深浅拷贝总结②

    在实际开发中遇到过太多次深拷贝浅拷贝的问题.总结一下~ JS数据存储和深浅拷贝实际运用① 这是之前写过的一篇文章,解决浅拷贝深拷贝的问题只说了一种方法,今天来补充一下. 介绍深拷贝和浅拷贝都在上一篇文 ...

  7. spring cloud深入学习(七)-----配置中心git示例

    随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的更新和重启,运维苦不堪言也容易出错.配置 ...

  8. Webpack下创建vue项目-非vue-cli

    开始准备 初始化工程目录 shell npm init -y 安装vue npm install vue 安装 webpack npm install webpack --save-dev webpa ...

  9. request.getSession().getServletContext().getRealPath("upload/" ); 获取不到 tomcat 服务器目录

    上传一个文件,找不到该文件的位置 设置上传的文件是在项目中的话 可以通过查找项目的路径锁定上传的文件路径 解决步骤: 可以通过jsp页面 打印获取项目的物理路径 控制台即可输出项目路径 这只是找了了上 ...

  10. Scrapy框架Crawler模板爬虫

    1.创建一个CrawlerSpider scrapy genspider -t crawl wx_spider 'wxapp-union.com' #导入规则 from scrapy.spiders ...