js进阶 11-16 jquery如何查找元素的父亲、祖先和子代、后代
2024-10-01 21:45:21
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>
最新文章
- ios 学习线路(图片)(摘录)
- java的getClass()函数
- javascript版Ajax请求
- new trip
- 修改eclipse中web项目的server部署路径
- web一点小结
- Silverlight Visifire控件应用去水印
- C# Dictionary.Add(key,value) 与 Dictionary[key]=value的区别
- java-list-remove()用法浅析 解决java list remove() 数据不对的问题
- ABP 学习汇总
- 闭包中this指向window的原因
- 在Docker Hub上查找可用的Image映像
- pycharm安装pip报错的处理办法
- OpenStack实践系列③镜像服务Glance
- [UFLDL] *Train and Optimize
- cxf简单例子
- taskkill命令应用
- jQuery事件绑定汇总(包括一些无法获取事件的问题)
- 关于String str =new String(";abc";)和 String str = ";abc";的比较--转
- jQuery EasyUI教程之datagrid应用-1
热门文章
- 代码生成器实现的Entity,Dao,Service,Controller,JSP神器(含代码附件)
- [Javascript AST] 3. Continue: Write ESLint rule
- [Node.js] Serve Static Files with Express
- cocos2d-x认识之旅
- Gmail 收信的一些规则
- hdu5389
- amazeui学习笔记--js插件(UI增强)--警告框Alert
- 百度2019校招Web前端工程师笔试卷(9月14日)
- uva 10710 - Chinese Shuffle(完美洗牌)
- 去哪网实习总结:用到的easyui组件总结(JavaWeb)