• 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. 第八次作业-非确定的自动机NFA确定化为DFA

    NFA 确定化为 DFA 子集法: f(q,a)={q1,q2,…,qn},状态集的子集 将{q1,q2,…,qn}看做一个状态A,去记录NFA读入输入符号之后可能达到的所有状态的集合. 步骤: 1. ...

  2. MongoDB 谨防索引seek的效率问题【华为云技术分享】

    目录 背景 初步分析 索引seeks的原因 优化思路 小结 声明:本文同步发表于 MongoDB 中文社区,传送门:http://www.mongoing.com/archives/27310 背景 ...

  3. mysql——中文数字排序的实现(FIELD)

    今天遇到一个需求,要求排序输出网格信息,但是数据是第三方对接插入的,并没有给我们排好顺序.所以只能自己动手了. 下图是原数据: 我们需要将其升序输出.使用mysql中的函数FIELD.语法如下: SE ...

  4. luogu P2824 [HEOI2016/TJOI2016]排序

    题目描述 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这个全排列序列进行 ...

  5. [TimLinux] JavaScript table的td内容超过宽度缩为三个点

    1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码: <!DOCTYPE html> <html> <head> ...

  6. Nginx的事件循环

    首先事件循环的起点就是监听端口获取连接,我们可以在ngx_event_core_module模块的ngx_event_process_init函数中看到如下的代码: /* for each liste ...

  7. 笔记||Python3之算法

    循环嵌套:先从外层循环里面取出一个元素,再执行内层的循环:当内层的循环都执行后,再执行外层循环. for循环嵌套语法: for  x  in  range(): for  y  in  range() ...

  8. CYPRESS最新的USB3.0控制器

    CYPRESS近日发布了其最新的USB3.0控制器,产品序号为CX3,主要是针对高像素摄像头方面的应用,接口支持MIPI的CSI-2,并不支持传统的基于并口的数据传输模式. MIPI(Mobile I ...

  9. 重排数列-Java实现（2018网易校招研发岗）

    题目: 链接:https://www.nowcoder.com/questionTerminal/6c184566ecff4d3baff3536449d4a3e2 来源:牛客网 小易有一个长度为N的正 ...

  10. 浅谈Java三大特性

    Java三大特性想必大家都不陌生:封装.继承以及多态.很多刚接触Java的小伙伴都会想,它们到底有什么了不得之处,又赋予Java这门编程语言什么魔力呢?今天我们来探讨一下吧~~ 首先,名词解释: 封装 ...