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. HBase-scan API 通过scan读取表中数据

    直接贴代码啦 /** * * @param zkIp * @param zkPort * @param tablename * @param startRow 传null扫全表 * @param st ...

  2. 高性能计算机传奇（vamei）

    高性能计算机是用网络将多台计算机连接在一起.并构成一个统一的系统,从而拥有远超个人电脑的计算能力.这样利用网络,让计算机合作工作的并行系统又称为集群(cluster).server.分布式计算机.超级 ...

  3. QTemporaryDir及QTemporaryFile建立临时目录及文件夹（创建一个随机名称的目录或文件，两者均能保证不会覆盖已有文件）

    版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址:本文标题:QTemporaryDir及QTemporaryFile建立临时目录及文件夹     本文地址: ...

  4. js03 数组

    变量的自动转换=== 等同符:不会发生类型的自动转化! == 等值符:会发生类型自动转化.自动匹配!判断相等没有equals()方法,只有2个等号3个等号. <!DOCTYPE HTML PUB ...

  5. ubuntu-date命令的使用

    date命令是关于时间的命令.它可以用来查看.更改系统时间 它的基本格式为 date "+ %H" 注意 "+"是不可以省略的.结果如下 zhangshuli@ ...

  6. 73.fseek与宽字符读取文件

    fseek //文件路径 ] = "1.txt"; //FILE *pf = fopen(path, "a+");//尾部添加,文件指针在尾部 //FILE * ...

  7. php 生成文件txt到指定目录

    // 向文件追加写入内容 $site = PHP_EOL.date("Y-m-d H:i:s")."world"; //PHP_EOL换行 // 使用 FILE ...

  8. 学习笔记（二）：javascript之dom操作

    一.document.getElementById()    根据Id获取元素节点 <div id="div1"> <p id="p1"> ...

  9. Python图片的横坐标汉字

    给一个例子 : # -*- coding: utf-8 -*-import matplotlib.pyplot as plt  import py_hanzi as ch         #关键在于这 ...

  10. StringBuilder和String的区别

      使用   StringBuilder 语言 C# String   对象是不可改变的.每次使用   System.String   类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为 ...