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. 亚马逊AWS的route53的收费，月费最低 0.9 USD

    亚马逊AWS的route53的收费Amazon Route 53 定价 https://aws.amazon.com/cn/route53/pricing/ 一文中,对于一些术语的解释第一项收费--域 ...

  2. matlab 构建数据集实用 api

    我们当前有如下目录结构的图像数据集(用于图像分类): 1. imageDatastore imageDatastore:imds = imageDatastore('./images', 'Inclu ...

  3. Shelled-out Commands In Golang

    http://nathanleclaire.com/blog/2014/12/29/shelled-out-commands-in-golang/ Shelled-out Commands In Go ...

  4. NOIP2016 天天爱跑步（线段树/桶）

    题目描述 小c同学认为跑步非常有趣,于是决定制作一款叫做<天天爱跑步>的游戏.天天爱跑步是一个养成类游戏,需要 玩家每天按时上线,完成打卡任务. 这个游戏的地图可以看作一一棵包含 N个结点 ...

  5. Maven学习总结（14）——Maven 多模块项目如何分工？

    一.开场白 使用Maven有段时间了,只能感慨真是个好东西,让我从传统模式体会到了严谨.规范.敏捷.方便的特性. 如果你懂Maven或许看过Juven翻译的<Maven权威指南>: 发个牢 ...

  6. 看好腾讯，鄙视百度（腾讯的核心竞争力，不是超过10亿的QQ的注册用户，也不是某一项产品、技术方面优势，而是“耐心”：懂得在合适的时间推出合适的产品。”）

    百度,自始至终只是一个低劣的模仿者,且一切向前看,完全违背了一个搜索引擎所应该遵循的基本原则.谁给的钱多就能搜着谁,这跟贩毒有什么区别? 腾讯也在模仿别人,但是,它是模仿然后超越.在中国互联网发展历史 ...

  7. Docker---(7)Docker安装启动RabbitMQ

    原文:Docker---(7)Docker安装启动RabbitMQ 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/ ...

  8. Linux 从core信息中找到TLS信息

    背景 我们在查core问题时,有时候须要查看某个TLS变量的值.可是GDB没有提供直接的命令,或者我不知道.这篇文字的目的.就是想办法从core文件里找出某个线程存放TLS变量的内容. 依据 Linu ...

  9. css中hack是什么

    css中hack是什么 一.总结 1.CSS hack:由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览 ...

  10. C Tricks（十九）—— 求以任意数为底的对数

    本文仅求对数的整数部分: int log(int n, int base){ int i = 1, cnt = 0; while (i*base < n){ i *= base; ++cnt; ...