一. 屬性和屬性節點的區別
1.什麼是屬性?
對象身上保存的變量就是屬性
2.如何操作屬性?
設置屬性的值:
方式一: 對象.屬性名稱 = 值;
方式二: 對象[“屬性名稱”] = 值;
獲取屬性的值:
方式一: 對象.屬性名稱;
方式二: 對象[“屬性名稱”]
代碼如下所示:
// 屬性
function Student() {
}var s= new Student();
// 設置屬性
s.name = "xyr";
s["age"] = 18;
// 獲取屬性
console.log(s.name);
console.log(s["age"]);3.什麼是屬性節點?
<span class= "sp"></span>在編寫HTML代碼時,在HTML標籤中添加的屬性就是屬性節點
在瀏覽器中找到span這個DOM元素之後, 展開看到的都是屬性
在attributes屬性中保存的所有內容都是屬性節點,如下圖所示:
4.如何操作屬性節點?
DOM元素.setAttribute(“屬性名稱”, “值”);
DOM元素.getAttribute(“屬性名稱”);
5.屬性和屬性節點有什麼區別?
任何對象都有屬性, 但是只有DOM對象才有屬性節點
二. JQuery操作屬性節點
1.attr(name|pro|key,val|fn)
作用: 獲取或者設置屬性節點的值,不能夠操作屬性
可以傳遞一個參數, 也可以傳遞兩個參數
如果傳遞一個參數, 代表獲取屬性節點的值
如果傳遞兩個參數, 代表設置屬性節點的值,如果傳遞的是2個以上的屬性,可以使用json格式的數據,代表修改或者新增多個屬性節點的值
注意點:
獲取:無論找到多少個元素,都只會返回第一個元素指定的屬性節點的值
增加:如果設置的屬性節點不存在,那麼系統會自動新增
修改:如果設置的屬性節點存在,找到多少個元素就會修改多少個元素
2.removeAttr(name)
刪除屬性節點
注意點:
會刪除所有找到元素指定的屬性節點
刪除多個屬性節點的時候,每個屬性名稱使用空格隔開
代碼示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery操作屬性節點</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function() {
// 如果傳遞一個參數, 代表獲取屬性節點的值 [注意: 這裡不能夠獲取屬性的值]
console.log($("span").attr("name"));
// console.log($("span").prop("innerHTML"));
// 如果傳遞兩個參數, 代表設置屬性節點的值
$(".span1").attr("class","box1");
// 如果傳遞的是
2個以上的屬性,可以使用json格式的數據,代表修改或者新增多個屬性節點的值
$(".span2").attr({ "class": "box2", "name": "zs", "age": 18 });
// removeAttr(name)
$("span").removeAttr("name age");
});
</script>
</head>
<body>
<span class="span1" name="xyr">老肖</span>
<span class="span2" name="hk">老何</span>
</body>
</html>1.prop(n|p|k,v|f)
作用: 獲取或者設置屬性的值,但是它也能夠操作屬性節點
特點和attr方法一致
注意: 雖然prop方法能夠操作屬性節點,但是只能夠操作系統屬性節點,不能夠操作自定義屬性節點
2.removeProp(name)
刪除屬性
注意: 刪除系統屬性節點只能夠將值改為undefined
官方推薦在操作屬性節點時,具有 true 和 false 兩個屬性的屬性節點，
如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
總結: 實際開發中如果操作屬性使用prop,操作屬性節點使用attr,如果屬性節點包含true 和 false 兩個屬性的屬性節點使用prop.
代碼示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery操作屬性</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
$(function () {
// 獲取屬性
console.log($(".span1").prop("innerHTML"));
// 設置屬性
$(".span1").prop("demo", 111);
// 獲取屬性節點
console.log($(".span1").prop("class"));
// 設置屬性節點
// $(".span1").prop("class", "box1");
// 移除屬性
$(".span1").removeProp("demo");
console.log($("input").prop("checked")); // true / false
console.log($("input").attr("checked")); // checked / undefined
});
</script>
</head>
<body>
<span class="span1" name="xyr">老肖</span>
<span class="span2" name="hk">老何</span>
<input type="checkbox" checked>
<p></p>
</body>
</html>3. JQuery操作屬性實現圖片的切換
需求: 在輸入框中輸入圖片地址,點擊切換圖片按鈕即可切換圖片
代碼示例如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery操作屬性實現圖片切換</title>
<script src="../js/jquery-1.12.4.js"></script>
<script>
function changeImage() {
// 獲取用戶輸入的圖片地址
var imgAddress = $(":text").val();
// 設置img圖片標籤的src屬性的值為用戶輸入的值
$("img").attr("src","https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1767036438,651853094&fm=26&gp=0.jpg");
}
</script>
</head>
<body>
請輸入圖片地址: <input type="text"> <button onclick="changeImage();">切換圖片</button> <br>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2014670149,2543710475&fm=26&gp=0.jpg">
</body>
</html>原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/256058.html
微信掃一掃 
支付寶掃一掃 