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中操作选择器的方法有哪些的更多相关文章

  1. js进阶 11-4/5 jquery中css的类的操作有哪些

    js进阶 11-4/5  jquery中css的类的操作有哪些 一.总结 一句话总结:jquery中css的类的操作有增删切三种. 1.jquery中css的类的操作有哪些? 增删切三种 addCla ...

  2. jQuery中操作属性的方法attr与prop的区别

    attr 与 prop 都可以对某个属性进行获取和设置的操作,二者的用法相同: <script src = 'jQuery.js'></script> <script&g ...

  3. js进阶 10-4 jquery中基础选择器有哪些

    js进阶 10-4 jquery中基础选择器有哪些 一.总结 一句话总结: 1.群组选择器用的符号是什么? 群组选择器,中间是逗号 2.jquery中基础选择器有哪些? 5种,类,id,tag,群组, ...

  4. 如何在js或者jquery中操作EL表达式的一个List集合

    ------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 先说明此篇博客看明白了可以干嘛: 就是在js或者jquery中操作一个EL表达式的一个list集合或者复杂类型 ...

  5. 锋利的jQuery读书笔记---jQuery中操作DOM

    一般来说,DOM的操作分为3个方面,即DOM Core.HTML-DOM和CSS-DOM jQuery中的DOM操作主要包括以下种类: 查找节点 查找元素节点 查找属性节点 创建节点 创建元素节点 创 ...

  6. js进阶 10-7 简单的伪类选择器可以干什么

    js进阶 10-7 简单的伪类选择器可以干什么 一.总结 一句话总结:伪类选择器是冒号. 1.学而不用,有什么用? 多用啊,在项目中多用 2.简单的伪类选择器可以干什么? 除某元素以外,某元素的一切索 ...

  7. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  8. js进阶---12-10、jquery绑定事件和解绑事件是什么

    js进阶---12-10.jquery绑定事件和解绑事件是什么 一.总结 一句话总结:on和off. 1.jquery如何给元素绑定事件? on方法 22 $('#btn1').on('click', ...

  9. js进阶 13-11/12 jquery如何实现折叠导航

    js进阶 13-11/12 jquery如何实现折叠导航 一.总结 一句话总结:还是用的slideToggle滑动效果,并且这一个展开时,所有兄弟都关闭. 1.文字缩进怎么设置? 感觉设置margin ...

随机推荐

  1. hdu 1533 Going Home 最小费用最大流 入门题

    Going Home Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Tota ...

  2. js05---js实现Map

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. thinkphp图片处理

    thinkphp图片处理 一.总结 1.参考手册:参考手册上面啥都有,只是这样业务逻辑不明显,所以看视频会很好,但是如果用编程的灵性(设计),那么其实会更加高效,但是看视频更快而且没那么枯燥,更高效把 ...

  4. R 语言下常用第三方库的说明

    1. doBy 官方文档见 CRAN - Package doBy doBy 主要适用于以下操作: 1) Facilities for groupwise computations of summar ...

  5. Objective-C基础笔记(4)Category

    OC中提供了一种与众不同的方式--Category,可以动态的为已经存在的类添加新的行为(方法),这样可以保证类的原始设计规模较小,功能增加时再逐步扩展. 在使用Category对类进行扩展时,不需要 ...

  6. Android判断App是否在前台运行

    版权声明:本文为博主原创文章,未经博主允许不得转载. //当前应用是否处于前台 private boolean isForeground(Context context) { if (context ...

  7. RGB颜色转换为多种颜色工具、公式

    http://www.easyrgb.com/index.php?X=CALC#Result http://www.easyrgb.com/index.php?X=MATH  

  8. 一个Java8模型的batch队列

    有点小问题,cpu过高,但是思路不错: http://www.tuicool.com/articles/URz2i2q

  9. log4j配置文件及nutch中的日志配置 分类: B1_JAVA 2015-02-17 10:58 483人阅读 评论(0) 收藏

    吐槽几句,log4j的坑啊.... (1)CLASSPATH中不能有多个log4j的版本本,否则有有奇形怪状的NoSuchMethod, NoSuchFiled, NoClassDefineFound ...

  10. Python Tricks(二十)—— 阶乘的极简实现

    使用 reduce # 比如计算 9 的阶乘 >> reduce(lambda x, y: x*y, range(1, 9+1)) 362880 当然这里的 reduce 直接返回具体的数 ...