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>