jQuery的屬性與樣式之.attr()與.removeAttr()


每個元素都有一個或者多個特性,這些特性的用途就是給出相應元素或者其內容的附加信息。如:在img元素中,src就是元素的特性,用來標記圖片的地址。


操作特性的DOM方法主要有3個,getAttribute方法、setAttribute方法和removeAttribute方法,就算如此在實際操作中還是會存在很多問題,這裡先不說。而在jQuery中用一個attr()與removeAttr()就可以全部搞定瞭,包括兼容問題


jQuery中用attr()方法來獲取和設置元素屬性,attr是attribute(屬性)的縮寫,在jQuery DOM操作中會經常用到attr()


attr()有4個表達式



  1. attr(傳入屬性名):獲取屬性的值

  2. attr(屬性名, 屬性值):設置屬性的值

  3. attr(屬性名,函數值):設置屬性的函數值

  4. attr(attributes):給指定元素設置多個屬性值,即:{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }


removeAttr()刪除方法


.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性(attribute)


優點:


attr、removeAttr都是jQuery為瞭屬性操作封裝的,直接在一個 jQuery 對象上調用該方法,很容易對屬性進行操作,也不需要去特意的理解瀏覽器的屬性名不同的問題


註意的問題:


dom中有個概念的區分:Attribute和Property翻譯出來都是“屬性”,《js高級程序設計》書中翻譯為“特性”和“屬性”。簡單理解,Attribute就是dom節點自帶的屬性


例如:html中常用的id、class、title、align等:


<div id="immooc" title="慕課網"></div>

而Property是這個DOM元素作為對象,其附加的內容,例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進行取值或賦值等


獲取Attribute就需要用attr,獲取Property就需要用prop


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    input {
    display    : block;
margin     : 10px;
padding    : 10px;
background : #bbffaa;
border     : 1px solid #ccc;
    }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>.attr()與.removeAttr()</h2>
    <h3>.attr</h3>
    <form>
        <input type="text" value="設置value" />
        <input type="text" value="獲取value"/>
        <input type="text" value="回調拼接value" />
        <input type="text" value="刪除value" />
    </form>

    <script type="text/javascript">
    //找到第一個input,通過attr設置屬性value的值
    $("input :first").attr('value','.attr( attributeName, value )')
    </script>

    <script type="text/javascript">
    //找到第二個input,通過attr獲取屬性value的值
    $("input :eq(1)").attr('value')
    </script>

    <script type="text/javascript">
    //找到第三個input,通過使用一個函數來設置屬性
    //可以根據該元素上的其它屬性值返回最終所需的屬性值
    //例如,我們可以把新的值與現有的值聯系在一起:
    $("input :eq(2)").attr('value',function(i, val){
    return '通過function設置' + val
    })
    </script>

    <script type="text/javascript">
    //找到第四個input,通過使用removeAttr刪除屬性
    $("input :eq(3)").removeAttr('value')
    </script>

</body>

</html>

0 個評論

要回覆文章請先登錄註冊