jquery 常用选择器基础语法学习
- 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 常用选择器基础语法学习的更多相关文章
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- jQuery常用选择器总结
jQuery常用选择器总结: 我们都知道jQuery是JavaScript(JS)的框架,它的语法简单使用方便,被广大开发人员青睐.现在我就它常用的并且十分强大的选择器的方式,做一个总结.鉴于它的选择 ...
- Java基础语法学习
Java基础语法学习 1. 注释 单行注释: //单行注释 多行注释: /*多行注释 多行注释 多行注释 多行注释 */ 2. 关键字与标识符 关键字: Java所有的组成部分都需要名字.类名.变量名 ...
- jquery 常用选择器和方法以及遍历（超详细）
jQuery 常用选择器和和方法 学习总结 一.JQuery 介绍 1. 什么是 jQuery 2. jQuery 版本介绍 3. jQuery 文件介绍 二.jQuery 对象 1. jQuery ...
- Swift基础语法学习总结(转)
Swift基础语法学习总结 1.基础 1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift使用print和println打印,它的传参是一个泛型 ...
- Swift基础语法学习总结
Swift基础语法学习总结Swift高级语法学习总结Swift语法总结补充(一) 1.基础 1.1) swift还是使用// 和/* */ 来注释,并且/* */允许多行注释. 1.2) swift ...
- Python 基础语法学习（第一讲）---类的使用
[写在前面]:其实自学python有一段时间了,但是一直没想起来要写博客来记录自己的学习,今天才感觉要写点什么让自己学的更扎实一点,所以从今天开始更新python自学系列,希望看见文章的大佬们可以指点 ...
- js和jQuery常用选择器
笔者觉得js是前台基础中的基础,而其选择器则是js基础中的基础,因长期使用框架导致js生疏,所有查资料,回顾一下js的常用选择器: 1.document.getElementById("id ...
- jQuery安装和基础语法
1.安装 从 jquery.com 下载 jQuery 库 <script src="jquery-1.10.2.min.js"></script> 从 C ...
随机推荐
- AI：为你写诗，为你做不可能的事
最近,一档全程高能的神仙节目,高调地杀入了我们的视野: 没错,就是撒贝宁主持,董卿.康辉等央视名嘴作为评审嘉宾,同时集齐央视"三大名嘴"同台的央视<主持人大赛>,这够不 ...
- Python爬虫实战之爬取糗事百科段子
首先,糗事百科大家都听说过吧?糗友们发的搞笑的段子一抓一大把,这次我们尝试一下用爬虫把他们抓取下来. 友情提示 糗事百科在前一段时间进行了改版,导致之前的代码没法用了,会导致无法输出和CPU占用过高的 ...
- luogu P2947 [USACO09MAR]向右看齐Look Up |单调队列
题目描述 Farmer John's N (1 <= N <= 100,000) cows, conveniently numbered 1..N, are once again stan ...
- Flink 中LatencyMarks延迟监控（源码分析）
流式计算中处理延迟是一个非常重要的监控metric flink中通过开启配置 metrics.latency.interval 来开启latency后就可以在metric中看到askManage ...
- UESTC-1963咸鱼咕咕咕(二分图匹配)
咸鱼咕咕咕 Time Limit: 1000 MS Memory Limit: 64 MB Submit Status 咸鱼有个咕咕笼. 咕咕笼可以划分成m×nm×n个格子,每个小格子可以放下 ...
- 学好linux必须精通用户管理的章节知识
第12章 Linux中用户知识管理 12.1 系统开机启动流程 12.1.1 centos6系统开机启动流程 12.1.1.1 开机系统流程语言描述 服务器电源开关打开 bios自检 目的:检查硬件是 ...
- Appium之环境搭建
Appium:是开源.跨平台.多语言支持的移动应用自动化工具 测试对象主要有:① 原生app ② 混合app(h5 + web前端基础) ③ 移动web app 测试对象APPy运行平台: ① io ...
- 【CuteJavaScript】Angular6入门项目（2.构建项目页面和组件）
本文目录 一.项目起步 二.编写路由组件 三.编写页面组件 1.编写单一组件 2.模拟数据 3.编写主从组件 四.编写服务 1.为什么需要服务 2.编写服务 五.引入RxJS 1.关于RxJS 2.引 ...
- win10配置git SSH
1.安装的过程就不说了,直接去官网下载git for windows 安装便可 安装完了,无非就是像用它,就想从github上clone项目下来,仅仅是安装了git还不能直接从远程下载项目下来哦,还需 ...
- Redis实战 | 5种Redis数据类型详解
我们知道Redis是目前非常主流的KV数据库,它因高性能的读写能力而著称,其实还有另外一个优势,就是Redis提供了更加丰富的数据类型,这使得Redis有着更加广泛的使用场景.那Redis提供给用户的 ...