Jquery學習4-2---jquery用法之訪問dom對象屬性。

 

第一：attr(name);

       此方法獲取jquery對象中第一個元素的對應屬性名的屬性值。

       例子：

              <a href="www.google.com" id="a1" class="a1">

<a href="www.baidu.com" id="href" class="lll" ></a>

<script language="javascript" type="text/javascript">

       var href = $("a").attr("href");

       alert(href);

</script>

       測試結果就是彈出提示，內容爲www.google.com

第二：attr(key,value);

       此方法用來設置dom元素的屬性的屬性值。比如設置圖片1.jpg的寬度爲200px

       <img src="imgage/1.jpg" />

<script language="javascript" type="text/javascript">

       var img = $("img");

       img.attr("width","200px");

</script>

此時圖片就會以寬度200像素的大小顯示在頁面中。

 

第三：attr(key,fn);

       此函數可以用來設置dom元素的屬性的屬性值，但屬性值不是一個值，而是一個函數，此函數返回的值作爲該屬性的屬性值。

       <img src="imgage/1.jpg" name="test" />

      <script language="javascript" type="text/javascript">

       var img = $("img");

       img.attr("title",function(){

              return this.name;

       });

    </script>

當將鼠標放到圖片上時，顯示title的屬性值test

第四：attr(properties);爲jquery對象同時定義多個屬性，多個屬性間以名/值對的形式組成一個對象進行傳遞。

              例子：同時設置圖片的寬、高、提示文本等。

      <img src="imgage/1.jpg" name="test" alt="sdf" />

     <script language="javascript" type="text/javascript">

       var img = $("img");

       img.attr({width:"300",height:"200",title:"這是一個圖片",alt:"更改了圖像的title"});

     </script>

第五：removeAttr(name);

       此方法作用是移除jquery對象內的屬性以及屬性值。

   

    <img src="imgage/1.jpg" width="375" height="245" border="1" />

    <script language="javascript" type="text/javascript">

       var img = $("img");

       img.removeAttr("border");

    </script>

這樣圖片的邊框就沒有了。