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

    jquery怎么修改子元素的属性值

    青灯夜游青灯夜游2023-01-17 16:13:26原创73

    修改方法:1、用选择器获取指定元素对象,语法“$(selector)”,会返回一个包含指定元素的jquery对象;2、用children()获取指定元素对象下的子元素,语法“元素对象.children(filter)”;3、用attr()修改子元素的属性值,语法“子元素.attr("属性名","新值")”或“子元素.attr({属性1:"新值",属性2:"新值"...})”。

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

    在jquery中,可以使用children()和attr()函数来修改子元素的属性值。

    实现步骤:

    步骤1:使用jquery选择器获取指定元素对象

    $(selector)

    步骤2:使用children()函数获取指定元素对象下的直接子元素

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

    步骤3:使用attr()函数修改子元素的属性值

    //单个属性
    子元素对象.attr("属性名","新属性值");
    
    //多个个属性
    子元素对象.attr({属性1:"新值",属性2:"新值"....});

    实现示例:

    修改ul的子元素li的class属性值

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<script src="js/jquery-3.6.0.min.js"></script>
    		<style>
    			div * {
    				display: block;
    				border: 2px solid lightgrey;
    				color: lightgrey;
    				padding: 5px;
    				margin: 15px;
    			}
    			li{
    				color:red;
    				border:2px solid red;
    			}
    			.li{
    				color:green;
    				border:2px solid green;
    			}
    		</style>
    
    		<script>
    			$(document).ready(function() {
    				$("button").on("click", function() {
    					$("ul").children("li").attr("class","li");
    				});
    			});
    		</script>
    	</head>
    
    	<body class="ancestors">
    		<div style="width:500px;">div (父节点)
    			<ul>ul (指定元素)
    				<li>li (子节点1)
    					<span>span (孙节点1)</span>
    				</li>
    				<li>li (子节点2)
    					<span>span (孙节点2)</span>
    				</li>
    				<li>li (子节点3)
    					<span>span (孙节点3)</span>
    				</li>
    			</ul>
    		</div>
    		<button>修改ul的子元素li的class属性值</button>
    	</body>
    
    </html>

    1.gif

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

    以上就是jquery怎么修改子元素的属性值的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:ie6能不能兼容es6 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • jquery ready事件的四种方法是什么• jquery怎么占位置隐藏div元素• jquery怎么判断是否包含某属性• jquery怎么替换标签属性值• jquery中常用的事件有哪些• jquery可以为按钮绑定点击事件吗
    1/1

    PHP中文网