jquery有哪些取值方式
- 青灯夜游原創
- 2022-05-17 14:15:553290瀏覽
5種取值方式：1、用「元素物件.text()」取得指定元素的文字內容；2、用「元素物件.html()」取得元素中包含標籤的內容；3 、用「輸入框元素.val()」取得使用者輸入內容；4、用「元素物件.attr("屬性名稱")」取得指定屬性的值等。
本教學操作環境：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>
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>
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>
範例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影片教學、web前端影片】
以上是jquery有哪些取值方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn