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

一、总结

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

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

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

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

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

  1. 67                 //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素
  2. 68                 // alert(arr.get())
  3. 69                 //alert(arr.get(1))
  4. 70                 //alert(arr.get().join('-'))
  5. 71                 alert(arr.get().reverse())

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

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

  1. 59                 var arr=$('input').map(function(){
  2. 60                     return $(this).val()
  3. 61                 })
  4. 62
  5. 63                 //alert(arr.length)

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

offset

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

  1. 77             $('#btn6').click(function(){
  2. 78                  $('span').offsetParent().css("border", "solid green 1px");
  3. 79             })

二、jquery如何查找选择器的第一个父亲元素和第一个定位的父元素

1、相关知识

  • add() 方法将元素添加到匹配元素的集合中。
  • addBack()添加堆栈中元素集合到当前集合，一个选择性的过滤选择器。
  • end() 结束当前链中最近的一次筛选操作，并将匹配元素集合返回到前一次的状态。
  • map() 把当前匹配集合中的每个元素传递给函数，返回值是 jQuery 封装的数组。
  • closest()方法获得匹配选择器的第一个祖先元素，从当前元素开始沿 DOM 树向上。

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

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

2、代码

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <style>
  4.  </style>
  5.  <head>
  6.      <meta charset="UTF-8">
  7.      <title>演示文档</title>
  8.      <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  9.      <style>
  10.          li{
  11.              margin-top: 5px;width: 150px;
  12.          }
  13.      </style>
  14.  </style>
  15.  </head>
  16.  <body>
  17.      <div>
  18.          <p>段落1</p>
  19.          <p>段落2</p>
  20.          <p>段落3</p>
  21.      </div>
  22.      <ol  style="position: relative;">
  23.          <li>列表项0</li>
  24.          <li>列表项1</li>
  25.          <li>列表项2</li>
  26.          <li class="red">列表项3</li>
  27.          <li>列表项4</li>
  28.          <li>列表项5
  29.              <ol>
  30.                  <li>列表项1.1</li>
  31.                  <li><span>列表项1.2</span></li>
  32.              </ol>
  33.          </li>
  34.      </ol>
  35.      <input id="btn1" type="button" value='add'>
  36.      <input id="btn2" type="button" value='addBack'>
  37.      <input id="btn3" type="button" value='end'>
  38.      <input id="btn4" type="button" value='map'>
  39.      <input id="btn5" type="button" value='closest'>
  40.      <input id="btn6" type="button" value='offsetParent'>
  41.      <script type="text/javascript">
  42.          $(function(){
  43.              $('#btn1').click(function(){
  44.                  //这里的add()相当于和的意思
  45.                  // $("p").css("color","red")
  46.                  // $("li").css("color","red")
  47.                  // $("p,li").css("color","red")
  48.                  $("p").css("background","#ccc").add('li').css("color","red")
  49.              })
  50.              $('#btn2').click(function(){
  51.                  $(".red").nextAll().addBack().css("background-color", "red");
  52.              })
  53.              $('#btn3').click(function(){
  54.                  // $('li').filter(':even').css("background-color", "red");
  55.                  // $('li').filter(':odd').css("background-color", "orange");
  56.                  $('li').filter(':even').css("background-color", "red").end().filter(':odd').css("background-color", "orange");
  57.              })
  58.              $('#btn4').click(function(){
  59.                  var arr=$('input').map(function(){
  60.                      return $(this).val()
  61.                  })
  62.  
  63.                  //alert(arr.length)
  64.                  // var arr2=[1,2,3,'A','B','C']
  65.                  // alert(arr)
  66.                  //map()函数的返回值为jQuery类型
  67.                  //通过get()方法来获取jQuery对象中封装的整个数组或数组的某个元素
  68.                  // alert(arr.get())
  69.                  //alert(arr.get(1))
  70.                  //alert(arr.get().join('-'))
  71.                  alert(arr.get().reverse())
  72.              })
  73.              $('#btn5').click(function(){
  74.                  // $('span').parents('li').css("border", "solid green 1px");
  75.                  $('span').closest('li').css("border", "solid green 1px");
  76.              })
  77.              $('#btn6').click(function(){
  78.                   $('span').offsetParent().css("border", "solid green 1px");
  79.              })
  80.          })
  81.      </script>
  82.  </body>
  83.  </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. 动态库dll使用module.def文件导出函数（像静态库一样使用）

    1.新建文件module.def. 2.动态库工程上右键->属性->链接器->输入->模块定义文件编辑它写入module.def 3.下面为module.def实例(smart ...

  2. 38..Node.js工具模块---底层的网络通信--Net模块

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js Net 模块提供了一些用于底层的网络通信的小工具,包含了创建服务器/ ...

  3. 116.C语言异常抛错

    #include <stdlib.h> #include <stdio.h> #include <setjmp.h> //异常抛错检测 jmp_buf buf1; ...

  4. 1.2 Use Cases中 Metrics官网剖析（博主推荐）

    不多说,直接上干货! 一切来源于官网 http://kafka.apache.org/documentation/ Metrics 指标 Kafka is often used for operati ...

  5. Android 继承framelayout，实现ScrollView 和 HorizontalScrollView 的效果

    有些项目,需要让控件或者布局进行水平和垂直同时能拖拽,当然,ScrollView 和 HorizontalScrollView 的结合写法是一种写法.但是,这么写用户体验效果不佳,会有迟钝感,因此推荐 ...

  6. seaJS注意点：

    1.require 是同步往下执行,require.async 则是异步回调执行.require.async 一般用来加载可延迟异步加载的模块.

  7. 前端面试题（JavaScript）

    (前端面试题大全,持续更新) 箭头函数特点?箭头函数和普通函数的区别 手写懒加载(考虑防抖和重复加载问题) 手写bind(为什么要加预参数,为什么要加new) apply, call, bind ne ...

  8. amazeui-datatables（登录注册界面用到）

    amazeui-datatables(登录注册界面用到) 一.总结 amazeui-datatables:DataTables 插件 Amaze UI 集成,只修改了样式和默认显示语言,其他参数同官方 ...

  9. 关于YUM错误，Error: rpmdb open failed

    错误如题: rpmdb: Thread/process / failed: Thread died in Berkeley DB library error: db3 error(-) from db ...

  10. 微信支付v2开发(4) 交易通知

    本文介绍如何使用JS API支付时如何获得交易通知. 一.交易通知 用户在成功完成支付后,微信后台通知(POST)商户服务器(notify_url)支付结果.商户可以使用notify_url的通知结果 ...