• siblings方法的常用应用场景：选中高亮

实现代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>一步实现多个同级div，只改变点击的当前div样式</title>

</head>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<body>

<div id="little_light">

    <div class="light_greycolor">首页</div>

    <div>珠江0度</div>

    <div>百威陪酒</div>

    <div>美味烧烤</div>

    <div>烧汁鸡扒</div>

    <div>扬州炒饭</div>

    <div>就知道吃</div>

</div>

</body>

<style>

    .light_greycolor {

        background-color:#FF8400;

    }

    #little_light>div{

        /*width: 140px;*/

        padding:3px 10px;

        height: 30px;

        border:1px solid red;

        float:left;

        margin-right:30px;

    }

</style>

<script>

    $(function(){

        $("#little_light div").click(function(){

            $(this).siblings('div').removeClass('light_greycolor');  // 删除其他兄弟元素的样式//jQuery siblings() 方法返回被选元素的所有同胞元素，并且可以使用可选参数来过滤对同胞元素的搜索。

            $(this).addClass('light_greycolor');

        });

    });

</script>

</html>
  •  知识点

1.过滤器filter（有xxx类的，或id=xxx的元素）与not（没有XXX类，或不是id=xxx的元素）。filter和find不同之处在于，filter是从头开始的。find只会查自己的子集下的。

2.父代选择器parent与parents()，parent是选则直接父类，parents是选择父类，父类的父类。

所以很重要的一点是：parent()是只返回一个元素的，而祖先选择器parents("ul")他返回多个祖先元素。他里面是可以过滤元素的。parents("ul")表示获取所有祖先元素，并且是ul的。这是比较常用的配合过滤使用。

最常的做法是配合元素过滤。

3.有父代选择器，那么就有子代选择器children和后代选择器find。

直接子代跟后代元素有什么不同?直接子代就是它的儿子，后代元素，可以是他的儿子，他的孙子...只要是它里面的元素即可。

跟上面类似，有点不同的是无论是直接子代，还是后代元素都可以有多个。

即children("p")返回p标签的所有子代元素。

find("p")返回所有p标签的后代元素。

5.接下来，还有一个就是获取兄弟元素（同胞，同一个层级）siblings("p")。常见的应用场景就是导航栏tab栏切换时的高亮效果。

还有就是next和prev方法，上一个和下一个同胞。

nextAll()和prevAll ()可以配合eq(2)使用，eq是获得数组中下标为2的元素。例如$(this).nextAll().eq(2).attr("href").attr是获得该元素的href属性的值。

学完之后，可以去找个购物车页面的模板，研究一下他的js代码是怎么写的。总结下来，发现只有获取直接父代的方法parent()是里面是没有过滤效果的（全文重点），以前还有点迷惑，现在总结出来，方便记忆。

jquery 常用选择器基础语法学习的更多相关文章

  1. jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法

    jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...

  2. jQuery常用选择器总结

    jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...

  3. Java基础语法学习

    Java基础语法学习 1. 注释 单行注释: //单行注释 多行注释: /*多行注释 多行注释 多行注释 多行注释 */ 2. 关键字与标识符 关键字: Java所有的组成部分都需要名字.类名.变量名 ...

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

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

  5. Swift基础语法学习总结(转)

    Swift基础语法学习总结 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...

  6. Swift基础语法学习总结

    Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础  1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...

  7. Python 基础语法学习（第一讲）---类的使用

    [写在前面]:其实自学python有一段时间了,但是一直没想起来要写博客来记录自己的学习,今天才感觉要写点什么让自己学的更扎实一点,所以从今天开始更新python自学系列,希望看见文章的大佬们可以指点 ...

  8. js和jQuery常用选择器

    笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...

  9. jQuery安装和基础语法

    1.安装 从 jquery.com 下载 jQuery 库 <script src="jquery-1.10.2.min.js"></script> 从 C ...

随机推荐

  1. 请问1^x+2^x+3^x+\cdots +n^x的算式是什么呢？

    目录 总结 请问\(1^x+2^x+3^x+\cdots +n^x\)的算式是什么呢? 一.求和式\(\sum\limits_{i=1}^n{i}\)的算式 如何证明求和简式\(\sum_{i=1}^ ...

  2. 使用IDEA开发Spring入门程序

    使用IDEA开发Spring入门程序 前言 本文通过一个简单的入门程序向读者演示Spring框架的使用过程,具体如下: 一.使用IDEA创建Maven应用项目并导入相应模块 使用IDEA创建一个名为n ...

  3. Tensorflow Serving Docker compose 部署服务细节(Ubuntu)

    [摘要] Tensorflow Serving 是tf模型持久化的重要工具,本篇介绍如何通过Docker compose搭建并调试TensorFlow Serving TensorFlow Servi ...

  4. git 使用详解（8）—— 分支HEAD、branch/checkout

    有人把 Git 的分支模型称为"必杀技特性",而正是因为它,将 Git 从版本控制系统家族里区分出来.Git 有何特别之处呢?Git 的分支可谓是难以置信的轻量级,它的新建操作几乎 ...

  5. bug小结

    在不同的文件下面可以创建同一个包,但是不能创建同一个class文件!!!   ParameterType:需要写实体类的类型,最好不要写实体的别名 这是因为我们在配置mybatis的配置文件时已经说明 ...

  6. python3导入子模块

    基础知识 参考资料1上有一句话Regular packages are traditional packages as they existed in Python 3.2 and earlier. ...

  7. postman接口测试工具的常规使用

    目录 postman接口测试工具简介与安装 postman发送get请求 JSON数据详解 postman发送post请求 postman中post请求传参说明 postman设置请求的header ...

  8. JS-scrollTop、scrollHeight、clientTop、clientHeight、offsetTop、offsetHeight的理解

    scrollTop, 可写(这些属性中唯一一个可写的元素) Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数. 一个元素的 scrollTop 值是这个元素的顶部到 ...

  9. Redis主从复制架构和Sentinel哨兵机制

    一.redis主从复制原理 redis主从同步策略:slave刚加入集群会触发一次全量同步(全量复制).全量同步之后,进行增量复制.slave优先是增量同步,如果增量同步失败会尝试从master节点进 ...

  10. CCF-CSP题解 201812-3 CIDR合并

    题目想求与给定前缀列表等价的包含IP前缀数目最少的前缀列表. 首先是怎么存储前缀列表.用一个long long存储IP地址,再存一个前缀长度,封装在一个结构体里\(<ipNum, len> ...