站長資訊網
最全最豐富的資訊網站

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

修改方法:1、用選擇器獲取指定元素對象,語法“$(selector)”,會返回一個包含指定元素的jquery對象;2、用children()獲取指定元素對象下的子元素,語法“元素對象.children(filter)”;3、用attr()修改子元素的屬性值,語法“子元素.attr("屬性名","新值")”或“子元素.attr({屬性1:"新值",屬性2:"新值"…})”。

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

本教程操作環境:windows7系統、jquery3.6版本、Dell G3電腦。

在jquery中,可以使用children()和attr()函數來修改子元素的屬性值。

實現步驟:

步驟1:使用jquery選擇器獲取指定元素對象

$(selector)
登錄后復制

  • 會返回一個包含指定元素的jquery對象

步驟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>
登錄后復制

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

【推薦學習:jQuery視頻教程、web前端視頻】

贊(0)
分享到: 更多 (0)
網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
国产成人综合日韩精品无码| 2022国产精品自产拍在线观看 | 国产区精品福利在线观看精品| 日韩土豪美女在线视频观看| 亚洲av午夜国产精品无码中文字| 91午夜精品亚洲一区二区三区| 久久亚洲精品AB无码播放| 日韩精品无码免费专区午夜| 国产999精品久久久久久| 日韩精品一区二区三区在线观看l| 国产在线无码精品无码| 国内精品久久久久久久久蜜桃| 亚洲啪AV永久无码精品放毛片| 国产精品大bbwbbwbbw| 久视频精品免费观看99| 精品无码AV一区二区三区不卡| 久久久久久影院久久久久免费精品国产小说| 亚洲精品美女久久久久99| 思思久久99热只有频精品66| 久久亚洲国产精品123区| 久久精品人妻一区二区三区| 精品久久久久久久久久久久久久久| 中日韩精品视频在线观看| 日韩精品无码久久一区二区三 | 久久精品aⅴ无码中文字字幕不卡| 久久精品2020| 亚洲av日韩av天堂影片精品| 亚洲国产精品特色大片观看完整版 | 国产成人精品综合久久久久 | 久久精品亚洲综合一品| 国产精品涩涩涩视频网站| 国产精品毛片无遮挡| 久久精品国产一区二区三| 久久精品视频一区| 久久国产精品国产精品| 亚洲AV日韩精品久久久久久久| 亚洲综合一区二区国产精品| 99久久久国产精品免费牛牛| 精品视频无码一区二区三区 | 日韩福利在线视频| 拍国产乱人伦偷精品视频|