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. 33.Node.js 文件系统fs

    转自:http://www.runoob.com/nodejs/nodejs-module-system.html Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node ...

  2. Zabbix监控告警

    一 钉钉告警 1.1.1 添加钉钉机器人 发起群聊 创建完群聊选择,机器人管理 选择你要绑定的群聊 复制下面地址留用 1.1.2 编写钉钉告警脚本 安装requests库,HTTP客户端, # yum ...

  3. 一个小的考试系统 android 思路

    一个小的考试系统 android 思路 假如有 100 组,每组有4个单选钮,设置超时检测确认后去测结果估分视图去切换,如果还有,就再显示下一组 所有结束就给个总结显示 有超时结束过程加上 提示正确选 ...

  4. Chrome 好用的扩展程序

    1. 谷歌访问助手.见名知意. 2. ColorZilla.方便的拾色器和取色器. 3. Restlet Client.方便测试接口. 4. Vue Devtools.Vue项目开发利器. 5. Ta ...

  5. 关于使用toFixed()函数时报错"toFixed() is not a function"的问题

    toFixed()函数只有数字类型的参数才可使用,字符串类型的参数需用parseFloat或者parseInt转换后再使用

  6. 使用C#对XML进行增删改查操作

    xml文件格式 <?xml version="1.0" encoding="utf-8"?> <messageList> <mes ...

  7. 看好腾讯，鄙视百度（腾讯的核心竞争力，不是超过10亿的QQ的注册用户，也不是某一项产品、技术方面优势，而是“耐心”：懂得在合适的时间推出合适的产品。”）

    百度,自始至终只是一个低劣的模仿者,且一切向前看,完全违背了一个搜索引擎所应该遵循的基本原则.谁给的钱多就能搜着谁,这跟贩毒有什么区别? 腾讯也在模仿别人,但是,它是模仿然后超越.在中国互联网发展历史 ...

  8. Cocos2d-x学习笔记（三）CCNode分析

    原创文章.转载请注明出处:http://blog.csdn.net/sfh366958228/article/details/38706483 通过前两份学习笔记,我们不难发现CCScene.CCLa ...

  9. hello word-python 入门

    今天正式开始学习python,先写一个最今经典的例子 helloword #!/usr/bin/python3.2 print("hello work!") 知识点: #!usr/ ...

  10. android设置Activity背景色为透明的3种方

    方法一:这种方法比较简单,只有一个步骤,只需要在配置文件中把需要设置为透明的activity的样式设置为 Android:theme="@android:style/Theme.Transl ...