遇到的問(wèn)題
在給復(fù)選框設(shè)置被選中時(shí)出現(xiàn)的情況,用prop()設(shè)置是沒(méi)毛病,用attr()時(shí)只有一次效果,下面是代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./包/jquery-3.3.1.min.js"></script>
</head>
<body>
<input type="checkbox" name="ipt1" value="prop1" />prop測(cè)試
<input type="checkbox" name="ipt1" value="prop2" />prop測(cè)試
<input type="button" id="btn1" value="prop全選" />
<br> <br>
<input type="checkbox" name="ipt2" value="attr1" />attr測(cè)試
<input type="checkbox" name="ipt2" value="attr2" />attr測(cè)試
<input type="button" id="btn2" value="attr全選" />
<br>
<script>
點(diǎn)擊prop全選,兩個(gè)prop測(cè)試選框被選中,手動(dòng)取消它們,再點(diǎn)擊按鈕,仍然有效
$(function () {
$("#btn1").click(function () {
$("input[name='ipt1']").prop("checked", true);
})
});
點(diǎn)擊attr全選,兩個(gè)attr測(cè)試選框被選中,手動(dòng)取消它們,再點(diǎn)擊按鈕,無(wú)效
$(function () {
$("#btn2").click(function () {
$("input[name='ipt2']").attr("checked", true);
})
});
</script>
</body>
</html>
結(jié)果:prop()可以重復(fù)使用,attr()只有一次效果,審查元素:

審查.png
用attr()對(duì)應(yīng)html元素上多了checked="checked",這里就是不一樣的地方。這里有的同學(xué)已經(jīng)明白了,根據(jù)固有屬性和自定義屬性不同來(lái)確定用哪個(gè):
對(duì)于HTML元素自帶固有屬性,用prop()。
對(duì)于HTML元素自定義的DOM屬性,用attr()。
一個(gè)栗子:
<a target="baidu" class="baidu">百度</a>
<a>元素的DOM屬性有href,target,class,是本身就帶有的屬性,也是W3C標(biāo)準(zhǔn)里就包含有這幾個(gè)屬性,比如有的編輯器敲一個(gè)表單會(huì)帶出一堆的固有屬性,所以處理這些屬性時(shí),使用prop()。
<a href="#" id="box" action="go">GO</a>
這里后面一個(gè)action屬性是我們自己自定義上去的,<a>元素本身是沒(méi)有這個(gè)屬性的。這種就是自定義的DOM屬性,用attr()。如果使用prop()取值和設(shè)置屬性值時(shí),會(huì)返回undefined值。
last栗子:
<input id="chk1" type="checkbox" />chk1
<input id="chk2" type="checkbox" checked="checked" />chk2
var chk1 = $("#chk1").prop("checked");
console.log(chk1); --> false
var chk2 = $("#chk2").prop("checked");
console.log(chk2); --> true
checkbox,radio,select這樣的元素,選中屬性對(duì)應(yīng)checked,selected,屬于固有屬性,用prop()方法去獲得結(jié)果。
換成attr():
console.log(chk1); --> undefined
console.log(chk2); --> checked
干一行,愛(ài)一行,學(xué)到老,活到老~~