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()是里面是没有过滤效果的(全文重点),以前还有点迷惑,现在总结出来,方便记忆。
最新文章
- 工作总结_JS_1
- JavaScript实现存储HTML字符串
- ByteBuffer
- 【C#学习笔记】读SQL Server2008
- 关于main函数的定义
- knockout computed实例
- 老李推荐:第6章4节《MonkeyRunner源码剖析》Monkey原理分析-事件源-事件源概览-翻译命令字串
- springMVC注解方式+easyUI+MYSQL配置实例
- J2EE进阶(十八)基于留言板分析SSH工作流程
- Android图表库MPAndroidChart(十二)——来点不一样的,正负堆叠条形图
- Basic 001 Bob
- ivew ui
- 【原创】大叔问题定位分享(7)Spark任务中Job进度卡住不动
- FuzzScanner 信息收集小工具
- 洛谷 p1092 虫食算
- 安卓和java开发环境的安装
- 从app上传图片到php,再上传到java后端服务器的方法一条龙服务
- AAD Service Principal获取azure user list (Microsoft Graph API)
- Codeforces Round #429 (Div. 2) - D	 Leha and another game about graph
- CentOS 安装 Gitlab
热门文章
- 【立即报名】解码AI大杀器:华为云GPU+Tensorflow 容器实战
- 八分音符(频率)卷积算子 Octave Convolution
- 《一张图看懂华为云BigData Pro鲲鹏大数据解决方案》
- mysql——中文数字排序的实现(FIELD)
- KETTLE单表同步,写入EXCEL和TXT
- Python列表中的字典按照该字典下的键值进行排序
- centos使用yum存储快速安装MySQL
- RocketMQ 主题扩分片后遇到的坑
- Xcode编译引用Framework
- Link Binary With Libraries中添加的时候 也找不到libz.dylib 库