js进阶 11-18 jquery中操作选择器的方法有哪些
js进阶 11-18 jquery中操作选择器的方法有哪些
一、总结
一句话总结:add()、addBack()、end()
1、add()方法是干嘛的,举一例?
将add()方法后选择器选择的jquery对象加到add()方法之前选择器之中
43 $("p").css("background","#ccc").add('li').css("color","red")
2、addBack()方法是干嘛的,举一例?
将上一个选择器选择的jquery对象插入到当前选择器中
46 $(".red").nextAll().addBack().css("background-color", "red");
3、end()方法是干嘛的,举一例?
结束当前选择器,返回到上一个选择器
51 $('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange");
二、jquery中操作选择器的方法有哪些
1、相关知识
- add() 方法将元素添加到匹配元素的集合中。
- addBack()添加堆栈中元素集合到当前集合,一个选择性的过滤选择器。
- end() 结束当前链中最近的一次筛选操作,并将匹配元素集合返回到前一次的状态。
- map() 把当前匹配集合中的每个元素传递给函数,返回值是 jQuery 封装的数组。
- closest()方法获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤。
- offsetParent()获得用于定位的第一个父元素。即:返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。
2、代码
<!DOCTYPE html>
<html lang="en">
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style>
li{
margin-top: 5px;width: 150px;
}
</style>
</style>
</head>
<body>
<div>
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
</div>
<ol>
<li>列表项0</li>
<li>列表项1</li>
<li>列表项2</li>
<li class="red">列表项3</li>
<li>列表项4</li>
<li>列表项5</li>
</ol>
<input id="btn1" type="button" value='add'>
<input id="btn2" type="button" value='addBack'>
<input id="btn3" type="button" value='end'>
<input id="btn4" type="button" value='map'>
<input id="btn5" type="button" value='closest'>
<input id="btn6" type="button" value='offsetParent'>
<script type="text/javascript">
$(function(){
$('#btn1').click(function(){
//这里的add()相当于和的意思
// $("p").css("color","red")
// $("li").css("color","red")
// $("p,li").css("color","red")
$("p").css("background","#ccc").add('li').css("color","red")
})
$('#btn2').click(function(){
$(".red").nextAll().addBack().css("background-color", "red");
})
$('#btn3').click(function(){
// $('li').filter(':even').css("background-color", "red");
// $('li').filter(':odd').css("background-color", "orange");
$('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange");
})
})
</script>
</body>
</html>
js进阶 11-18 jquery中操作选择器的方法有哪些的更多相关文章
- js进阶 11-4/5 jquery中css的类的操作有哪些
js进阶 11-4/5 jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...
- jQuery中操作属性的方法attr与prop的区别
attr 与 prop 都可以对某个属性进行获取和设置的操作,二者的用法相同: <script src = 'jQuery.js'></script> <script&g ...
- js进阶 10-4 jquery中基础选择器有哪些
js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...
- 如何在js或者jquery中操作EL表达式的一个List集合
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...
- 锋利的jQuery读书笔记---jQuery中操作DOM
一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...
- js进阶 10-7 简单的伪类选择器可以干什么
js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
- js进阶---12-10、jquery绑定事件和解绑事件是什么
js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...
- js进阶 13-11/12 jquery如何实现折叠导航
js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...
随机推荐
- hdu 1533 Going Home 最小费用最大流 入门题
Going Home Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...
- js05---js实现Map
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- thinkphp图片处理
thinkphp图片处理 一.总结 1.参考手册:参考手册上面啥都有,只是这样业务逻辑不明显,所以看视频会很好,但是如果用编程的灵性(设计),那么其实会更加高效,但是看视频更快而且没那么枯燥,更高效把 ...
- R 语言下常用第三方库的说明
1. doBy 官方文档见 CRAN - Package doBy doBy 主要适用于以下操作: 1) Facilities for groupwise computations of summar ...
- Objective-C基础笔记(4)Category
OC中提供了一种与众不同的方式--Category,可以动态的为已经存在的类添加新的行为(方法),这样可以保证类的原始设计规模较小,功能增加时再逐步扩展. 在使用Category对类进行扩展时,不需要 ...
- Android判断App是否在前台运行
版权声明:本文为博主原创文章,未经博主允许不得转载. //当前应用是否处于前台 private boolean isForeground(Context context) { if (context ...
- RGB颜色转换为多种颜色工具、公式
http://www.easyrgb.com/index.php?X=CALC#Result http://www.easyrgb.com/index.php?X=MATH
- 一个Java8模型的batch队列
有点小问题,cpu过高,但是思路不错: http://www.tuicool.com/articles/URz2i2q
- log4j配置文件及nutch中的日志配置 分类: B1_JAVA 2015-02-17 10:58 483人阅读 评论(0) 收藏
吐槽几句,log4j的坑啊.... (1)CLASSPATH中不能有多个log4j的版本本,否则有有奇形怪状的NoSuchMethod, NoSuchFiled, NoClassDefineFound ...
- Python Tricks(二十)—— 阶乘的极简实现
使用 reduce # 比如计算 9 的阶乘 >> reduce(lambda x, y: x*y, range(1, 9+1)) 362880 当然这里的 reduce 直接返回具体的数 ...