js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

一、总结

一句话总结：closest()方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。offsetParent()获得用于定位的第一个父元素。

1、closest()和parents()的主要区别是什么？

1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤。

2、jquery中如何取出jquery对象中的dom对象？

get()方法，参数可有可无，有的话为索引

67                 //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素

68                 // alert(arr.get())

69                 //alert(arr.get(1))

70                 //alert(arr.get().join('-'))

71                 alert(arr.get().reverse())

3、map()方法是干什么的？

map() 把当前匹配集合中的每个元素传递给函数，返回值是 jQuery 封装的数组。

59                 var arr=$('input').map(function(){

60                     return $(this).val()

61                 })

62

63                 //alert(arr.length)

4、jquery中用什么表示定位？

offset

比如：offsetParent()获得用于定位的第一个父元素。即：返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

77             $('#btn6').click(function(){

78                  $('span').offsetParent().css("border", "solid green 1px");

79             })

二、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  style="position: relative;">

         <li>列表项0</li>

         <li>列表项1</li>

         <li>列表项2</li>

         <li class="red">列表项3</li>

         <li>列表项4</li>

         <li>列表项5

             <ol>

                 <li>列表项1.1</li>

                 <li><span>列表项1.2</span></li>

             </ol>

         </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");

             })

             $('#btn4').click(function(){

                 var arr=$('input').map(function(){

                     return $(this).val()

                 })

                 //alert(arr.length)

                 // var arr2=[1,2,3,'A','B','C']

                 // alert(arr)

                 //map()函数的返回值为jQuery类型

                 //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素

                 // alert(arr.get())

                 //alert(arr.get(1))

                 //alert(arr.get().join('-'))

                 alert(arr.get().reverse())

             })

             $('#btn5').click(function(){

                 // $('span').parents('li').css("border", "solid green 1px");

                 $('span').closest('li').css("border", "solid green 1px");

             })

             $('#btn6').click(function(){

                  $('span').offsetParent().css("border", "solid green 1px");

             })

         })

     </script>

 </body>

 </html>
 

js进阶 11-19 jquery如何查找选择器的第一个父亲元素和第一个定位的父元素的更多相关文章

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

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

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

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

  3. js进阶课程 12-9 jquery的事件对象event的方法有哪些？

    js进阶课程 12-9 jquery的事件对象event的方法有哪些? 一.总结 一句话总结:三组六个,阻止默认事件一组,阻止冒泡一组,阻止冒泡和剩余事件一组. 1.事件的默认动作指什么? 比如点a标 ...

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

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

  5. js进阶---12-12、jquery事件委托怎么使用

    js进阶---12-12.jquery事件委托怎么使用 一.总结 一句话总结:通过on方法(事件委托),给要绑定事件的元素的祖先绑定事件,从而达到效果. 1.事件委托是什么? 通过事件冒泡,让子元素绑 ...

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

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

  7. js进阶 13-9/10 jquery如何实现三级列表

    js进阶 13-9/10 jquery如何实现三级列表 一.总结 一句话总结:用的是定位,父标签相对定位,子标签就可以绝对定位了,绝对定位的孩子还是可以设置绝对定位.用toggle设置子菜单显示和隐藏 ...

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

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

  9. js进阶 11-18 jquery中操作选择器的方法有哪些

    js进阶 11-18 jquery中操作选择器的方法有哪些 一.总结 一句话总结:add().addBack().end() 1.add()方法是干嘛的,举一例? 将add()方法后选择器选择的jqu ...

随机推荐

  1. HDOJ 5399 Too Simple

    每个函数都必须是一个排列,经过连续的一段确定函数后数字不能少. 满足上面的条件的话,仅仅要有一个-1函数特别的排列一下就能够满足要求,剩下的能够任意填 没有-1的话特判 Too Simple Time ...

  2. Flume的Storage&Master

    storage是存储系统,可以是一个普通file,也可以是HDFS,HIVE,HBase,分布式存储等. Master是管理协调Agent和Collector的配置等信息,是flume集群的控制器.

  3. 为RecyclerView添加item的点击事件

    RecyclerView侧重的是布局的灵活性,虽说可以替代ListView但是连基本的点击事件都没有,这篇文章就来详细讲解如何为RecyclerView的item添加点击事件,顺便复习一下观察者模式. ...

  4. InstallShield详细制作说明(一)

    虽然网上关于InstallShield的制作说明已经很多,但是看的时候还是会有些晕乎乎的,不得不说很复杂.前段时候做了一次,后面需要升级,在重新做的时候发现有些地方自己又忘了,所以有必须将自己看的教程 ...

  5. JavaScript--数据结构之栈

    4.1栈是一种高效的数据结构,是一种特殊的列表.栈内元素只能通过列表的一端访问,也就称为栈顶.后入的先出的操作.Last in First out.所以他的访问每次是访问到栈顶的元素,要想访问其余的元 ...

  6. 获取DOM元素到页面顶部的距离，亲测有效版本（转载）

    原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...

  7. PHP盛宴——经常使用函数集锦

    近期写了蛮多PHP,也接触到挺多经常使用的函数,大多都记了笔记,发个博客出来.共同学习.事实上感觉学习一门语言,语法逻辑是软素养.而对语言的熟悉程度仅仅能随着使用时间的增长而慢慢增长,当对一门语言的函 ...

  8. [bzoj1269]文本编辑器editor [bzoj1500]维修数列

    1269: [AHOI2006]文本编辑器editor Time Limit: 10 Sec Memory Limit: 162 MB Submit: 2540 Solved: 923 [Submit ...

  9. android-铃声的设置与播放

    在android系统中,不同铃声存放的铃声路径: /system/media/audio/ringtones 来电铃声 /system/media/audio/notifications 短信通知铃声 ...

  10. HTML基础-第一讲

    转自:https://blog.csdn.net/likaier/article/details/326639?utm_source=blogxgwz9 HTML是网页主要的组成部分,基本上一个网页都 ...