文章目錄
什麼是屬性？
對象上保存的變量就是屬性。
例如下面這個栗子：
給person這個對象添加了一個age屬性
function Person() {
};
var person = new Person();
//age是屬性
person.age = 18;
如何操作屬性？
賦值操作：對象名.屬性名稱 = value 或者 對象名[“屬性名稱”] = value
獲取操作：對象名.屬性名稱 或者 對象名[“屬性名稱”]
什麼是屬性節點？
（1）在編寫HTML代碼時，在HTML標籤中添加的屬性
例如：<span name=“demo”></span> 這裏的 name 就是屬性節點
（2）在瀏覽器當中找到span這個DOM元素之後，展開看到的都是屬性在attributes屬性中保存的內容都是屬性節點。
請大噶關注金黃色背景部分
如何操作屬性節點？
(1)更改DOM元素屬性節點的Value： DOM元素.setAttribute(“屬性名稱”,“newValue”);
(2)獲取DOM元素某一屬性節點的Value： DOM元素.getAttribute(“屬性名稱”)
var span = document.getElementsByTagName("span")[0];
span.setAttribute("name","change");
span.getAttribute("name")
屬性和屬性節點有什麼區別？
任何對象都有屬性，只有DOM元素纔有屬性節點
jQuery的attr方法和removeAttr方法
attr()方法：
（1）作用： 獲取或設置屬性節點的值
（2）注意點一： 可以傳遞一個參數，也可以傳遞兩個參數。如果傳遞一個參數，代表獲取屬性節點的值；若傳遞兩個參數，代表設置屬性節點的值。
（3）注意點二： 無論找到多少個元素， 都只會返回第一個元素指定的屬性節點的值；如果是設置找到多少個元素就會設置該N個元素的屬性節點值；如果設置的屬性節點不存在，那麼系統會在所有找到的元素中 自動新增該屬性節點
（4）返回值： 返回屬性值的函數,第一個參數爲當前元素的索引值，第二個參數爲原先的屬性值
removeAttr()方法：
（1）作用： 刪除屬性節點
（2）注意點： 會刪除所有找到元素指定的屬性節點；也可以刪除多個屬性節點
（3）返回值： 返回屬性值的函數,第一個參數爲當前元素的索引值，第二個參數爲原先的屬性值
註釋部分爲特別關注
<body>
<p class="p1" name="name1"></p>
<p class="p2" name="name2"></p>
<script src="../jquery.js"></script>
<script>
$(function() {
//attr()
//作用：獲取或設置屬性節點的值
//可以傳遞一個參數，也可以傳遞兩個參數
//如果傳遞一個參數，代表獲取屬性節點的值；若傳遞兩個參數，代表設置屬性節點的值
//注意：1、無論找到多少個元素，都只會返回第一個元素指定的屬性節點的值
// 2、如果是設置找到多少個元素就會設置該N個元素的屬性節點值
// 3、如果設置的屬性節點不存在，那麼系統會在所有找到的元素中自動新增該屬性節點
console.log($('p').attr('class'));
console.log($('p').attr('class',"change"));
console.log($('p').attr('a',"a"));
/*removeAttr(name)
刪除屬性節點
注意：1、會刪除所有找到元素指定的屬性節點
2、可以刪除多個屬性節點
*/
console.log($('p').removeAttr("a"));
console.log($('p').removeAttr("class name"));
})
</script>
</body>
jQuery的prop方法和removeProp方法
注意：
（1）prop方法和removeProp方法是對屬性的操作
（2）eq(i)代表的是所有元素中的第（i+1）個元素。例如示例中 $(“p”).eq(0) 代表第一個 p元素
（3）prop方法和removeProp方法注意點和jQuery的attr方法和removeAttr方法相同
（4）prop方法和removeProp方法既可以操作屬性也可以操作屬性節點
（5）返回值： prop方法返回屬性值的函數,第一個參數爲當前元素的索引值，第二個參數爲原先的屬性值。
註釋部分爲特別關注
<body>
<p class="p1" name="name1"></p>
<p class="p2" name="name2"></p>
<script src="../jquery.js"></script>
<script>
$(function() {
/*prop方法
特點和attr方法一致
*/
$("p").eq(0).prop("demo","1");
$("p").eq(1).prop("demo","2");
console.log( $("p").prop("demo"));
/*removeProp方法
特點和removeAttr方法一致
*/
$("p").eq(0).removeProp("demo")
//還可以操作屬性節點
console.log( $("p").prop("class"));
console.log( $("p").prop("class","change"));
});
</script>
</body>
jQuery的prop方法和removeProp方法與jQuery的attr方法和removeAttr方法的不同點
（1）attr方法和removeAttr方法只能操作屬性節點；prop方法和removeProp方法既可以操作屬性也可以操作屬性節點
（2）官方推薦在操作屬性節點時，具有true和false的兩個屬性節點，如checkbox、selected、或者disabled使用prop方法和removeProp方法，其他使用attr方法和removeAttr方法
實例一：checkbox已選定
<body>
<input type="checkbox" checked>
<script src="../jquery.js"></script>
<script>
$(function() {
console.log($("input").prop("checked"));
console.log($("input").attr("checked"));
});
</script>
</body>
實例二：checkbox未選定
<body>
<input type="checkbox" >
<script src="../jquery.js"></script>
<script>
$(function() {
console.log($("input").prop("checked"));
console.log($("input").attr("checked"));
});
</script>
</body>
小案例
案例描述：點擊按鈕切換在瀏覽器中顯示的圖片
步驟：
（1）對按鈕進行點擊事件的監聽
（2）獲取 input 中輸入的圖片路徑，使用 attr方法或prop方法 對 img 的 src 作修改。（推薦使用attr方法）
註釋部分爲特別關注
<body>
<input type="text">
<button>點我切換圖片</button><br>
<img src="../program1/images/1.jpg" width="200px">
<script src="../jquery.js"></script>
<script>
$(function() {
//1、給按鈕組件添加點擊事件
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
//2、獲取輸入框輸入內容
var input = document.getElementsByTagName("input")[0];
var value = input.value;
//3、修改img的src屬性節點的值
$("img").attr("src",value); //推薦使用
// $("img").prop("src",value); 也可以實現，但不推薦使用， 因爲沒有涉及到true和false
}
});
</script>
</body>
jQuery類操作的相關方法
1、addClass(class|fn)
（1） 作用：添加一個或多個類
（2） 如果要添加多個類，則多個類名之間用空格隔開即可
2、removeClass([class|fn])
（1）作用：刪除一個或多個類
（2）如果要刪除多個類，則多個類名之間用空格隔即可
3、toggleClass(class|fn[,sw])
（1）作用：切換一個或多個類，既有類就刪除這個類，沒有這個類就添加這個類
（2）如果要刪除多個類，則多個類名之間用空格隔即可
樣式設置：
<style>
*{
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: blue;
}
.box2 {
border: 2px solid #000;
}
</style>
核心代碼：
<body>
<button>點我添加類</button>
<button>點我刪除類</button>
<button>點我切換類</button>
<div></div>
<script src="../jquery.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button");
btn[0].onclick = function() {
$("div").addClass("box1 box2");
};
btn[1].onclick = function() {
$("div").removeClass("box1 box2");
};
btn[2].onclick = function() {
$("div").toggleClass("box1");
};
})
</script>
</body>
jQuery文本值操作相關的方法
1、html([val|fn])： 和原生JS中的innerHTML相同
2、text([val|fn])： 和原生JS中的innerText相同
3、val([val|fn|arr])： 可以設置或者獲取value的值
樣式設置：
<style>
div {
width: 100px;
height: 100px;
border: 2px solid #000;
}
</style>
核心代碼：
<body>
<button>點我設置HTML</button>
<button>點我獲取HTML</button>
<button>點我設置text</button>
<button>點我獲取text</button>
<button>點我設置value</button>
<button>點我獲取value</button>
<div> </div>
<input type="text">
<script src="../jquery.js"></script>
<script>
$(function() {
var btn = document.getElementsByTagName("button");
btn[0].onclick = function() {
$("div").html("<p>我是添加的html段落</p>");
}
btn[1].onclick = function() {
console.log( $("div").html());
}
btn[2].onclick = function() {
$("div").text("<p>我是添加的html段落</p>");
}
btn[3].onclick = function() {
console.log( $("div").text());
}
btn[4].onclick = function() {
$("input").val("我使用了val方法");
}
btn[5].onclick = function() {
console.log( $("input").val());
}
});
</script>
</body>
