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. Maven和Ant的差别

    近期做的项目中一直是在使用maven.可是要知道最早出来的构建工具是Ant,如今Ant依旧有好多人再用.于是自己就抽出来时间.学习了一下Ant的主要的使用.这样也能跟好的理解Maven提供的新特性. ...

  2. ubuntu-虚拟机跟主机资源共享的实现方法

    之前自己的虚拟机跟主机资源共享的时候,使用的是非常笨的方法,就是通过创建两个飞鸽,然后在两个飞鸽之间进行文件的传输,今天工作相对轻松一些,就趁机完善一下自己的工作环境,在网上搜索了关于资源共享的方法, ...

  3. intent- 启动其他应用

    今天需要在图库中实现对相机的调用,代码如下 Intent intent = new Intent(Intent.ACTION_VIEW); ComponentName componetName = n ...

  4. 28.semaphore跨进程通信

    根据id创建Semaphore,并初始化有一个信号量可用 name类型是char *...; HANDLE hsem = CreateSemaphoreA(NULL, 1, , name); 关闭句柄 ...

  5. 《三》Java IO 字节输入输出流

    那么这篇博客我们讲的是字节输入输出流:InputStream.OutputSteam(下图红色长方形框内),红色椭圆框内是其典型实现(FileInputSteam.FileOutStream)     ...

  6. flex布局：

    他的布局主要有两个“二”,一个二:容器项,子项目项.另一个:有两条轴,主轴,副轴.它的使用时,必须先声明说明是flex布局:display:flex; 针对于容器项的属性6个: 1.flex-dire ...

  7. Express简介、安装

    Express 基于Node.js平台,快速.开放.极简的web开发框架,是目前最流行的基于Node.js的web开发框架,它提供一系列强大的功能,比如: 路由控制 参数获取 send和sendFil ...

  8. TC快速搜索在win10下不可用

    今天突然发现TC的快速搜索在win10下突然不可用,按Ctrl + s 呼出快速搜索栏后半天不响应也无法输入文字.论坛里给出来的建议是将 QuickSearch 2.2.3 升级到 2.2.6,目前插 ...

  9. linux创建新用户并给予root权限

    root比windows的系统管理员的能力更大,足以把整个系统的大部分文件删掉,导致系统完全毁坏,不能再次使用.所以,用root进行不当的操作是相当危险的,轻微的可以死机,严重的甚至不能开机.所以,在 ...

  10. unity-unet-同步各个player唯一标识

    Multiplayer Game 中所有 player 都有一个唯一标识.在unet中可以通过 Network Identity 组件获取到该 player 在整个网络整的 唯一 的连接 id 这里测 ...