快捷導(dǎo)航

jquery給元素設(shè)置屬性的簡單方法

更新時間：2023年06月09日 14:24:09 作者：cyndi_超努力

jquery是一個js插件庫,現(xiàn)在很多前端開發(fā)人員都是使用它來操作dom的,對于dom操作,jquery提供了很多方法,這篇文章主要給大家介紹了關(guān)于jquery給元素設(shè)置屬性的簡單方法,需要的朋友可以參考下

1、使用attr()方法

attr() 方法設(shè)置或返回被選元素的屬性值。根據(jù)該方法不同的參數(shù)，其工作方式也有所差異。

語法：

//單個屬性
$(selector).attr(屬性名,值)
//多個屬性
$(selector).attr({屬性名:值;屬性值:值...})

2、使用prop()方法

prop() 方法設(shè)置或返回被選元素的屬性和值。

當(dāng)該方法用于設(shè)置屬性值時，則為匹配元素集合設(shè)置一個或多個屬性/值對。

語法：

//單個屬性
$(selector).prop(屬性名,值)
//多個屬性
$(selector).prop({屬性名:值;屬性值:值...})

3、attr()和prop()方法的區(qū)別

prop() 方法和 attr() 方法相似，都是用來獲取或設(shè)置元素的 HTML 屬性的，不過兩者也有著本質(zhì)上的區(qū)別。

jQuery 官方建議：具有 true 和 false 這兩種取值的屬性，如 checked、selected 和 disabled 等，建議使用 prop() 方法來操作，而其他的屬性都建議使用 attr() 方法來操作。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script src="js/jquery-1.10.2.min.js"></script>
        <script>
            $(function () {
            $('input[type="radio"]').change(function(){
                var bool = $(this).attr("checked");
                if(bool){
                    $("p").text("你選擇的是：" + $(this).val());
                }
            })
        })
    </script>
    </head>
    <body>
        <div>
            <label><input type="radio" name="fruit" value="蘋果" />蘋果</label>
            <label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
            <label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
        </div>
        <p></p>
    </body>
</html>

預(yù)覽效果如圖 1 所示。

分析:

$().change(function(){
    ……
})

在這個例子中，我們其實(shí)是想通過$(this).attr("checked")判斷單選框是否被選中，如果被選中，就獲取該單選框的 value 值?？墒沁\(yùn)行代碼后發(fā)現(xiàn)：完全沒有效果！這是為什么呢？

實(shí)際上，對于表單元素的 checked、selected、disabled 這些屬性，我們使用 attr() 方法是沒法獲取的，而必須使用 prop() 方法來獲取。因此，我們把 attr() 方法替換成 prop() 方法就有效果了。

其實(shí)，prop()方法的出現(xiàn)就是為了彌補(bǔ) attr() 方法在表單屬性操作中的不足。記住一句話：如果某個屬性沒法使用 attr() 方法來獲取或設(shè)置，改換 prop() 方法就可以實(shí)現(xiàn)。

補(bǔ)充：jQuery給標(biāo)簽添加自定義屬性

jQuery給標(biāo)簽添加自定義屬性

下面代碼包含了添加和獲取自定義屬性。

添加的屬性值有數(shù)字，類數(shù)組，對象，詳細(xì)用法見備注。

<script type="text/javascript">
    // 設(shè)置屬性
    $('#box').css('width', '200px')
    $('#a1').attr('href',"http://www.baidu.com")
    // 設(shè)置多個屬性
    // 注意：屬性名不用加引號
    $('#a1').attr({ href: "http://t.tt", target: "_blank" })


    // *********** 添加和獲取自定義屬性 ************
    // ==========1.設(shè)置一個自定義值==========
    $('#a1').attr('myIndex',2)
    console.log($('#a1').attr('myIndex'))

    // ==========2.設(shè)置多個自定義值==========
    // 注意：屬性名要加引號，不能使用阿拉伯?dāng)?shù)字作為屬性名
    fruitsList = {'a':'蘋果', 'b':'香蕉', 'c':'西瓜'}

    // !!!!!!!!!!! 不正確的設(shè)置 !!!!!!!!!!!
    $('#a1').attr('fruit',fruitsList)
    console.log($('#a1').attr('fruit'))   // 打?。篬object Object]，沒有實(shí)際用處

    // 正確設(shè)置和獲取屬性
    $('#a1').attr(fruitsList)
    console.log($('#a1').attr('a'))         // 打印: 蘋果
    console.log($('#a1').attr('b'))         // 打印: 香蕉
    console.log($('#a1').attr('c'))         // 打印: 西瓜

    // ==========3.設(shè)置自定義值為對象===========
    // 創(chuàng)建對象
    function Person(name, age){
        this.name = name
        this.age = age
    }
    person1 = new Person('Lili', 20)

    // !!!!!!!!!!! 不正確的設(shè)置 !!!!!!!!!!!
    $('#a1').attr('myattar', person1)       
    console.log($('#a1').attr('myattar'))   // 打印：[object Object]，沒有實(shí)際用處

    // 正確設(shè)置和獲取屬性
    $('#a1').attr(person1)
    console.log($('#a1').attr('name'))
    console.log($('#a1').attr('age'))
</script>