js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代

一、总结

一句话总结：过滤或者查找的方法里面可以带参数进行进一步的选择。

1、parent()和parents()方法的区别是什么（父亲和祖先）？

parent()找父亲，parents()找祖先

父亲只有一个，所以是单数，祖先就有很多个了，所以是复数

  • parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
  • parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
34                    // $('span').parent('.red').css('border','solid red 2px')

35                    // $('.sp').parents('li').css('border','solid red 2px')

2、parentsUntil()如何使用？

方法的参数里面可以是标签和选择器，和juqery其它方法里面的东西一样

parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。

36                    $('.sp').parentsUntil('.inner').css('border','solid red 2px')

3、children()方法和contents()方法的异同（子代）？

都是找所有子元素，contents()范围更广，包括文本和注释节点

39                    // $('.inner').children('.red').css('border','solid red 2px')

4、jquery中如何查找一个元素的后代（后代）？

find()方法

find() 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。

40                    $('.main').find('span').css('border','solid red 2px')

二、jquery如何查找元素的父亲、祖先和子代后代

1、相关知识

查找祖先元素

  • parent() 获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
  • parents() 获得当前匹配元素集合中每个元素的祖先元素，由选择器筛选（可选）。
  • parentsUntil() 获得当前匹配元素集合中每个元素的祖先元素，直到遇到匹配选择器的元素为止。

查找后代元素

  • children() 获得匹配元素集合中每个元素的所有子元素。
  • find() 获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
  • contents() 获得匹配元素集合中每个元素的子元素，包括文本和注释节点。

    不常用，了解即可

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: 25px;width: 150px;

         }

     </style>

 </style>

 </head>

 <body>

     <ol class="main">

         <li>1</li>

         <li class="li2">2

             <ul class="inner">

                 <li><span>1</span></li>

                 <li class="red"><span class="sp">2</span></li>

                 <li><span>3</span></li>

             </ul>

         </li>

         <li>3</li>

     </ol>

     <input id="btn1" type="button" value='查找祖先'>

     <input id="btn2" type="button" value='查找后代'>

     <script type="text/javascript">

         $(function(){

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

                    // $('.sp').parent().css('border','solid red 2px')

                    // $('span').parent('.red').css('border','solid red 2px')

                    // $('.sp').parents('li').css('border','solid red 2px')

                    $('.sp').parentsUntil('.inner').css('border','solid red 2px')

             })

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

                    // $('.inner').children('.red').css('border','solid red 2px')

                    $('.main').find('span').css('border','solid red 2px')

             })

         })

     </script>

 </body>

 </html>
 

js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代的更多相关文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. JavaWeb网上图书商城完整项目--11.项目所需jquery函数介绍

    1.下载jquery的函数包 2.强函数包添加到工程的web-root目录下 3.在jsp文件中加载js文件 <script type="text/javascript" s ...

  9. js进阶正则表达式方括号（方括号作用）（js正则是在双正斜杠之中：/[a-z]/g）

    js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g) 一.总结 方括号:范围 圆括号:选 大括号:数量 1.js正则是在双正斜杠之中: var reg2=/[a-z]/ ...

随机推荐

  1. 控制面板项 .cpl 文件说明

    控制面板项 .cpl 文件说明 appwiz.cpl               程序和功能.卸载或更改程序 bthprops.cpl             蓝牙控制面板 desk.cpl      ...

  2. elasticsearch transport 请求发送和处理

    前一篇分析对nettytransport的启动及连接,本篇主要分析transport请求的发送和处理过程.cluster中各个节点之间需要相互发送很多信息,如master检测其它节点是否存在,node ...

  3. ArcGIS小技巧——提取面要素的质心点

    如下图,现在要做这样一件事,提取面图层中每一个图斑的质心点,然后使用质心点提取图层中的一个属性值,并在此基础上进行克里金插值,生成该属性的空间插值图.当然,今天这段文字主要简单说一下怎样提取面图层的质 ...

  4. 小米开源文件管理器MiCodeFileExplorer-源码研究(0)-初步研究

    2011年对着书本Android应用开发揭秘,写了2个月的HelloWorld.   现在想复习并深入,我没有耐心再去一点点地敲代码了.   4年前自己是个学生,实习,现在有工作,只能业余时间研究. ...

  5. C#做完一个网站怎么发布？

    前段时间在局域网上发布了一个自己做的网站,发布过程中遇到了不少问题.下面就发布过程和发布过程中遇到的问题与(你)大家一起分享一下,希望对(你)大家有所帮助吧! 在将ASP.NET网站发布到服务器之前需 ...

  6. JQuery操作数组函数 push(),pop(),unshift(),shift()

    1.array.push() :在数组尾部添加新的元素,并返回新的数组长度. 2.array.unshift() :在数组头部添加新的元素,并返回新的数组长度.[听说IE浏览器不支持] 3.array ...

  7. Jszip的使用和打包下载图片

    因为canvas总结到后面又想到了jszip的一些事情,那就索性也回去看看吧.试过,至少谷歌和火狐都是支持jszip的. 1.  jszip的使用 官方文档说的很清楚了,而且也有读取zip文件.生成z ...

  8. php网站修改为https后curl报错301

    今日测试项目时需调用post模拟传参测试接口是否可用,但返回报错信息(301永久迁移),在网上搜寻解决办法无果,最后发现只要将跳转地址修改为https://+url的形式就可以了

  9. 解决Win8/8.1无法正确识别USB3.0的问题

    找一个USB3.0的移动硬盘到了手里竟然变成2.0的了!二了! 不能忍啊. 听说是快速启动的问题,但是开机速度快很诱人. 百度了其他解决方法,终于解决了. 下面摘录自: http://blog.csd ...

  10. Project Euler 363 Bézier Curves（几何+二分）

    题目链接: https://projecteuler.net/problem=363 题目: A cubic Bézier curve is defined by four points: \(P_0 ...