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. lightSlider 好图片轮播插件 支持移动端

    http://jquery-plugins.net/jquery-lightslider-lightweight-responsive-content-slider https://github.co ...

  2. 3.SOAP和WSDL的一些必要知识

    转自:https://www.cnblogs.com/JeffreySun/archive/2009/12/14/1623766.html SOAP和WSDL对Web Service.WCF进行深入了 ...

  3. 暴力破解FTP服务器技术探讨与防范措施

    暴力破解FTP服务器技术探讨与防范措施 随着Internet的发展出现了由于大量傻瓜化黑客工具任何一种黑客攻击手段的门槛都降低了很多但是暴力破解法的工具制作都已经非常容易大家通常会认为暴力破解攻击只是 ...

  4. 让人难过的 openssl_pkcs7_encrypt

    让人难过的 openssl_pkcs7_encrypt 用PHP.NET的范例,没有加密结果,也没有报错信息,而openssl_pkcs7_sign()函数则返回 error opening inpu ...

  5. 新版本的AutoCAD2018 怎样删除 A360 Drive盘符

    通常的做法,如下: (1)点击开始菜单的“运行”(Win+R或者Win+X快捷选择运行),在弹出的对话框输入“regedit”,回车,进入注册表编辑器. (2)找到HKEY_LOCAL_MACHINE ...

  6. php-wamp环境搭建

    wamp(Windows,Apache,Mysql,PHP) win8.1下搭建apache2.4(64位)  php5.6.11(64位)  mysql5.6.24(32位) d盘创建文件结构为: ...

  7. [Angular] Using the Argon 2 Hashing Function In Our Sign Up Backend Service

    Which hash algorithom to choose for new application: https://www.owasp.org/index.php/Password_Storag ...

  8. 位数（digits）的处理

    主要针对:二进制表示法,以及十进制表示法: 1. 获取位数 已知该数 n 采用十进制进行表示 二进制形式的位数:⌊log2n⌋+1 十进制形式的位数:⌊log10n⌋+1 2. 截断(保留前/后 m ...

  9. t_user is not mapped [from t_user as u where u.loginname = :loginname and u.password =:password]

    转自:https://blog.csdn.net/u010876380/article/details/52714539 错误: Struts Problem Report Struts has de ...

  10. JQ的核心原理以及扩展等

    jQuery核心原理 定义原型扩展和工具包扩展的方法 JQ的API中文速查: http://jquery.cuishifeng.cn/ JQ的原理:http://www.cnblogs.com/Sca ...