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. jquery init 关系

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/st ...

  2. 矩阵乘法java代码实现

    矩阵只有当左边矩阵的列数等于右边矩阵的行数时,它们才可以相乘, 乘积矩阵的行数等于左边矩阵的行数,乘积矩阵的列数等于右边矩阵的列数 即A矩阵m*n,B矩阵n*p,C矩阵m*p: package exa ...

  3. 关于Promise详解

    异步回调 回调地狱 在需要多个操作的时候,会导致多个回调函数嵌套,导致代码不够直观,就是常说的回调地狱 并行结果 如果几个异步操作之间并没有前后顺序之分,但需要等多个异步操作都完成后才能执行后续的任务 ...

  4. JavaScript的字符串、数组以及DOM操作总结

    (一)JavaScript字符串操作 JavaScript的字符串就是用' '或" "括起来的字符表示,日常的学习中有时候需要对字符串进行相关的操作.例如要获取字符串某个指定位置的 ...

  5. 03002_MySQL数据库的安装和配置

    1.MySQL的安装 (1)下载mysql-5.5.49-win32.msi, 链接:MySQL安装包下载 密码:geqh : (2)打开下载的MySQL安装文件mysql-5.5.27-win32. ...

  6. hdu 2795 Billboard（线段树单点更新）

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total ...

  7. django 简单会议室预约（2）

    --我们先打开settings.py 配置文件: import os #指明django APP目录路径 BASE_DIR = os.path.dirname(os.path.dirname(os.p ...

  8. Docker---(2)为什么要用Docker

    原文:Docker---(2)为什么要用Docker 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_ ...

  9. 洛谷 P1143 进制转换

    P1143 进制转换 题目描述 请你编一程序实现两种不同进制之间的数据转换. 输入输出格式 输入格式: 输入数据共有三行,第一行是一个正整数,表示需要转换的数的进制n(2≤n≤16),第二行是一个n进 ...

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

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