What are the value methods in jquery?-Front-end Q&A-php.cn

What are the value methods in jquery?

青灯夜游

Release： 2022-06-07 17:36:32

Original

3337 people have browsed it

5 ways to get the value: 1. Use "element object.text()" to get the text content of the specified element; 2. Use "element object.html()" to get the content containing tags in the element; 3. , use "input box element.val()" to obtain the user input content; 4. Use "element object.attr("attribute name")" to obtain the value of the specified attribute, etc.

What are the value methods in jquery?

The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.

There are many ways to get values in jquery. Let me introduce them to you below.

1. Two methods to obtain the content value of an element: text() or html()

The text() method can return the The text content of the selected element.
html() method can return the content of the selected element (innerHTML).

Example: use text() to get text content, use html() to get content containing tags

<!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>

Copy after login

What are the value methods in jquery?

2. Get the input value of the input input box

The input value of the input input box is controlled by the value attribute. It can be obtained directly using the val() method, or it can be obtained using the attr("value") method.

<!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>

Copy after login

What are the value methods in jquery?

3. Get element attribute value

Element attribute value can be obtained by two methods:

attr() method
prop() method

Difference: has two values: true and false It is recommended to use the prop() method to operate Boolean attributes, such as checked, selected and disabled, while other attributes are recommended to use the attr() method to operate.

Example 1: Use attr() to get the value of a common attribute

<!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>

Copy after login

What are the value methods in jquery?

Example 2: Use prop() Get the value of the Boolean attribute

<!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>

Copy after login

What are the value methods in jquery?

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of What are the value methods in jquery?. For more information, please follow other related articles on the PHP Chinese website!