首頁 > web前端 > 前端問答 > jquery怎麼增加和刪除屬性

jquery怎麼增加和刪除屬性

青灯夜游
發布: 2022-06-07 17:16:35
原創
2566 人瀏覽過

在jquery中,可用attr()或prop()給元素增加屬性,語法「物件.attr("屬性名稱","值")」或「物件.prop("屬性名稱", "值")」;可用removeAttr()刪除屬性,語法「物件.removeAttr("屬性名稱")」。

jquery怎麼增加和刪除屬性

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

jquery增加和刪除屬性的方法

#1、使用attr()或prop()增加屬性

prop()和attr() 都可用來設定元素的HTML 屬性的。

範例1:使用attr()增加disabled屬性

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("textarea").attr("disabled", "disabled");
					// $("textarea").attr("disabled","true");
				});
			});
		</script>
	</head>

	<body>
		<textarea></textarea><br><br>
		<button>让textarea不可编辑</button>
	</body>

</html>
登入後複製

jquery怎麼增加和刪除屬性

#範例2:使用prop()增加readonly屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-3.2.1.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("button").click(function() {
					$("input").attr("readonly","readonly");
				});
			});
		</script>
		<style type="text/css">
			.intro {
				font-size: 120%;
				color: red;
			}
		</style>
	</head>

	<body>
		<input type="text" value="hello"/><br /><br />

		<button>给input添加只读属性</button>
	</body>
</html>
登入後複製

jquery怎麼增加和刪除屬性

2、使用removeAttr()刪除屬性

#removeAttr() 方法從被選元素中移除屬性。

範例:使用removeAttr()刪除hidden屬性

hidden 屬性規定對元素進行隱藏。隱藏的元素不會被顯示。

刪除該屬性,可讓元素顯示。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(function () {
            $("button").click(function () {
                $("p").removeAttr("hidden");
            })
        })
    </script>
	</head>
	<body>
		<p>这是一段可见的段落。</p>
		<p hidden="hidden">这是一段被隐藏的段落,现在显示出来了。</p>
		<p>这是一段可见的段落。</p>
		<button>删除hidden属性</button>
	</body>
</html>
登入後複製

jquery怎麼增加和刪除屬性

相關教學推薦:jQuery影片教學

以上是jquery怎麼增加和刪除屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板