1. 程式人生 > >Jquery獲取和修改dom元素的屬性值

Jquery獲取和修改dom元素的屬性值

獲取內容的方式: - text()、html() 以及 val()

三個簡單實用的用於 DOM 操作的 jQuery 方法:

  • text() - 設定或返回所選元素的文字內容
  • html() - 設定或返回所選元素的內容(包括 HTML 標記)
  • val() - 設定或返回表單欄位的值
程式碼:
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.1.js"></script>
	</head>

	<body>
		<script>
			function showInputVal() {
				value = $("#input").val();
				alert(value);
			}

			function changeInputVal() {
				value = $("#input").val("毛毛");
				alert(value);
			}

			function showtext() {
				value = $("#div1").text();
				alert(value);
			}

			function showhtml() {
				value = $("#div1").html();
				alert(value);
			}

			function getAttr() {
				value = $("#herf1").attr("href");
				alert(value);
			}
		</script>
		<div id="div1">第一個<strong>div</strong></div>
		<input type="button" value="showtext" onclick="showtext()" />
		<input type="button" value="showhtml" onclick="showhtml()" />
		<br />
		<input id="btn1" type="button" value="獲取屬性attr" onclick="getAttr()" />
		<a href="index.html" id="herf1">超連結</a>
		<p>Name:
			<input type="text" id="input" value="雷盼">
		</p>
		<input type="button" value="showInputValue" onclick="showInputVal()" />
		<input type="button" value="changeInputValue" onclick="changeInputVal()" />
	</body>

</html>