Home > Article > Web Front-end > What are the value methods in jquery?
What are the value methods in jquery?
- 青灯夜游Original
- 2022-05-17 14:15:553305browse
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.
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>
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>
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>
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>
[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!