jquery有哪些取值方式-前端問答-PHP中文網

首頁

web前端

前端問答

jquery有哪些取值方式

青灯夜游

May 17, 2022 pm 02:15 PM

jquery

5種取值方式：1、用「元素物件.text()」取得指定元素的文字內容；2、用「元素物件.html()」取得元素中包含標籤的內容；3 、用「輸入框元素.val()」取得使用者輸入內容；4、用「元素物件.attr("屬性名稱")」取得指定屬性的值等。

jquery有哪些取值方式

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

jquery中取值方式有多種方式，以下跟大家介紹一下。

1、取得元素的內容值的兩種方法：text()或html()

text() 方法可以回傳被選元素的文字內容。
html() 方法可以傳回被選取元素的內容（innerHTML）。

範例：使用text()取得文字內容，使用html()取得包含標籤的內容

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("p").text());
					console.log($("p").html());
				});
			});
		</script>
	</head>
	<body>
		<button>获取p元素的内容</button>
		<p>这是一个<b>段落</b>。</p>
	</body>
</html>

jquery有哪些取值方式

2.取得input輸入框的輸入值

input輸入框的輸入值由value 屬性控制。可以直接利用val() 方法來獲取，也可以attr("value") 方法來取得。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input[type=text]").val());
					console.log($("input[type=password]").attr("value"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取input元素的内容</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
		<p>密　码: <input type="password" name="password" value="123456" /></p>
	</body>
</html>

jquery有哪些取值方式

3、取得元素屬性值

#元素屬性值可以透過兩種方法取得：

attr() 方法
prop() 方法

區別：具有true 和false 這兩種取值的布林屬性，如checked、selected 和disabled 等，建議使用prop() 方法來操作，而其他的屬性都建議使用attr() 方法來操作。

範例1：使用attr()取得普通屬性的值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input").attr("name"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取name属性值</button>
		<p>用户名: <input type="text" name="user" value="李华" /></p>
	</body>
</html>

jquery有哪些取值方式

範例2：使用prop()取得布林屬性的值

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-3.2.1.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					console.log($("input").prop("disabled"));
				});
			});
		</script>
	</head>
	<body>

		<button>获取disabled属性值</button>
		<p>密　码: <input type="password" name="password" value="123456" disabled /></p>
	</body>
</html>

jquery有哪些取值方式