• 技术文章 >web前端 >前端问答

    jquery可以获取上一级元素吗

    青灯夜游青灯夜游2022-09-13 17:30:40原创188

    jquery可以获取上一级元素。获取步骤:1、利用jQuery选择器选取指定元素,语法“$("选择器")”,会返回一个包含指定元素的jQuery对象;2、使用parent()函数获取指定元素的直接父级元素(上一级元素)即可,语法“指定对象.parent(filter)”,参数“filter”用于缩小搜索范围。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

    获取上一级元素,就是获取父级元素。在jquery中,可以使用parent()函数来获取父级元素。

    实现步骤

    步骤1:利用jQuery 选择器选取指定元素

    1)jQuery 元素选择器基于元素名选取元素。

    $("标签名")

    2)jQuery id选择器基于id属性选取元素。

    $("#id属性值")
    <form id="属性值">
    //表单元素
    </form>

    会返回一个包含指定元素的jQuery对象。

    步骤2:使用parent()函数获取指定元素的父级元素

    parent()返回被选元素的直接父元素。该方法只沿着 DOM 树向上遍历单一层级。

    指定对象.parent(filter)
    参数描述
    filter可选。规定缩小搜索父元素范围的选择器表达式。

    示例1:返回 <span> 元素的上一级元素

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-3.6.1.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				 $("span").parent("li").css({"color":"red","border":"2px solid red"});
    			});
    		</script>
    		<style>
    			.ancestors * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style>
    	</head>
    
    	<body class="ancestors">body (曾曾祖父节点)
    		<div style="width:500px;">div (曾祖父节点)
    			<ul>ul (祖父节点)
    				<li>li (直接父节点,上一级元素)
    					<span>span</span>
    				</li>
    				<li>li (直接父节点,上一级元素)
    					<span>span</span>
    				</li>
    			</ul>
    		</div>
    	</body>
    
    </html>

    1.png

    示例2:使用 filter 参数缩小搜索范围

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<script src="js/jquery-3.6.1.min.js"></script>
    		<script>
    			$(document).ready(function() {
    				$("span").parent("li.1").css({"color":"red","border":"2px solid red"});
    			});
    		</script>
    		<style>
    			.ancestors * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    		</style>
    	</head>
    
    	<body class="ancestors">body (曾曾祖父节点)
    		<div style="width:500px;">div (曾祖父节点)
    			<ul>ul (祖父节点)  
    				<li class="1">li (直接父节点)
    					<span>span</span>
    				</li>
    				<li class="2">li (直接父节点)
    					<span>span</span>
    				</li>
    			</ul>   
    		</div>
    	</body>
    	
    	</html>

    2.png

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery可以获取上一级元素吗的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:css默认的font-size是什么意思 下一篇:jquery怎么点击其他元素隐藏div元素
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• jquery+swiper实现时间轴tab滑动切换显示效果• jquery怎么改变input的value属性• jquery怎么获取元素有几个子元素• jquery中on方法的优势是什么• jquery可以获取链接的内容吗• jquery怎么给元素增加类名
    1/1

    PHP中文网