首頁  >  文章  >  web前端  >  jquery有哪些取值方式

jquery有哪些取值方式

青灯夜游
青灯夜游原創
2022-05-17 14:15:553270瀏覽

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有哪些取值方式

【推薦學習:jQuery影片教學web前端影片

以上是jquery有哪些取值方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn