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. JXL.jar简单封装Excel读写操作

    1.分析 一个excel文件能够有多页,每页excel中能够有多行,每行中能够有多列.用面向对象的思想能够把一行中的某列看作是一个String对象,一行看作是一个包括多个列的对象.一页是包括多行的对面 ...

  2. <meta-data>的使用

    在AndroidManifest.xml中,<meta-data>元素可以作为子元素,被包含在<activity>.<application> .<servi ...

  3. PHP和JSON

    PHP和JSON 一.总结 1.php中json的使用方法:php中json的使用超级简单啦,主要是两个函数json_encode(编码)和json_decode(解码),像md5加密 2.json的 ...

  4. http 500 Internal Server Error的错误 ajax请求SpringMVC后台中返回500 Internal Server Error

    使用httprequester接口测试能返回数据,但是用ajax返回json格式的时候返回报500Internal Server Error. The server encountered an in ...

  5. 洛谷 P1571 眼红的Medusa

    P1571 眼红的Medusa 题目描述 虽然Miss Medusa到了北京,领了科技创新奖,但是他还是觉得不满意.原因是,他发现很多人都和他一样获了科技创新奖,特别是其中的某些人,还获得了另一个奖项 ...

  6. [RxJS] Learn How To Use RxJS 5.5 Beta 2

    The main changes is about how you import rxjs opreators from now on. And introduce lettable opreator ...

  7. 如何从mysql数据库中取到随机的记录

    如何从mysql数据库中取到随机的记录 一.总结 一句话总结:用随机函数newID(),select top N * from table_name order by newid() ----N是一个 ...

  8. win7桌面有个无法删除的IE图标

    平台:win7 症状:安装软件时没仔细看,结果装上了一大堆,挨个卸载后桌面残留了一个IE无法删除.在该图标上点右键只有“打开”“属性”“创建快捷方式”三个选项,主页默认为www.2345.com. 解 ...

  9. kindle paperwhite 简单笔记按名称分类

    已更新python,见新博客  http://www.hrwhisper.me/archives/708 写作背景: 南京决赛比赛完那天晚上写的. 使用方法: 将My Clippings.txt 放在 ...

  10. [python]bug和debug

    bug:代码中存在的语法或者逻辑问题 debug:自查和解决代码中的问题 (coding五分钟,debug两小时) 一.出现bug原因的四大类型 1.粗心 1)错误案例 上面这个错误就是因为 if语句 ...