jquery 屬性與樣式(一)

每個元素都有一個或多個特性,這些特性的用途就是給出對應元素或其內容的附加資訊。如:在img元素中,sr​​c就是元素的特性,用來標示圖片的位址。

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

jQuery中用attr()方法來取得和設定元素屬性,attr是attribute(屬性)的縮寫,在jQuery DOM運算中會常用到attr()

attr()有4個表達式

    attr(傳入屬性名稱):取得屬性的值

    attr(屬性名稱, 屬性值):設定屬性的值

    attr(屬性名稱,函數值):設定屬性的函數值

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

removeAttr()刪除方法

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

優點:

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

注意的問題

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

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

<div id="phpcn" title="php中文网"></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>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
   <img src="1.jpg" width="200" height="200" id="img">

    <script type="text/javascript">
        $("#img").attr('width','400');
    </script>
</body>

</html>

注意:首先你要有這張圖片1 .jpg  大家可以自己找一張圖片試試一下,然後去運行結果

如何使用attr()方法來取得屬性值,請看下面的例子

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
   <input type="text" value="php 中文网" id="ipt">

    <script type="text/javascript">
        alert($("#ipt").attr('value'));
    </script>
</body>

</html>

大家可以看到彈出方塊顯示的內容是  php 中文網


下面我們來看以下如何刪除元素的內容 removeAttr()

程式碼如下:

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
   <input type="text" value="php 中文网" id="ipt">

    <script type="text/javascript">
       $("#ipt").removeAttr("value");
    </script>
</body>

</html>

註:本來我們文字方塊是有內容的,當執行到腳本語言時,會把文字的內容刪除

繼續學習
||
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <input type="text" value="php 中文网" id="ipt"> <script type="text/javascript"> alert($("#ipt").attr('value')); </script> </body> </html>