attr()和prop()的區(qū)別

遇到的問(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é)到老,活到老~~

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀(guān)點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容