JQuery操做元素的屬性和樣式

一、    區分DOM屬性和元素屬性

一個img標籤:

<img src="images/image.1.jpg" id="hibiscus" alt="Hibiscus" class="classA" />

一般開發人員習慣將id, src, alt等叫作這個元素的"屬性". 我將其稱爲"元素屬性". 可是在解析成DOM對象時, 實際瀏覽器最後會將標籤元素解析成"DOM對象", 而且將元素的"元素屬性"存儲爲"DOM屬性". 二者是有區別的.

雖然咱們設置了元素的src是相對路徑:images/image.1.jpg

可是在"DOM屬性"中都會轉換成絕對路徑:http://localhost/images/image.1.jpg.

甚至有些"元素屬性"和"DOM屬性"的名稱都不同,好比上面的元素屬性class, 轉換爲DOM屬性後對應className.

牢記, 在javascript中咱們能夠直接獲取或設置"DOM屬性":

<script type="text/javascript">

        $(function() {

            var img1 = document.getElementById("hibiscus");

            alert(img1.alt);

            img1.alt = "Change the alt element attribute";

            alert(img1.alt);

        })

    </script>

因此若是要設置元素的CSS樣式類, 要使用的是"DOM屬性"className"而不是"元素屬性"class:

img1.className = "classB"

二、    操做DOM屬性

在jQuery中沒有包裝操做"DOM屬性"的函數, 由於使用javascript獲取和設置"DOM屬性"都很簡單. 在jQuery提供了each()函數用於遍歷jQuery包裝集, 其中的this指針是一個DOM對象, 因此咱們能夠應用這一點配合原生javascript來操做元素的DOM屬性:

$("img").each(function(index) {

                alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);

                this.alt = "changed";

                alert("index:" + index + ", id:" + this.id + ", alt:" + this.alt);

            });

下面是each函數的說明:

each( callback )  Returns: jQuery包裝集

對包裝集中的每個元素執行callback方法. 其中callback方法接受一個參數, 表示當前遍歷的索引值,從0開始.

3.上面兩點是區別，下面是來分析下jquery的each()函數  

<div class="ad-thumbs">
 <ul class="ad-thumb-list" style="width: 142px;">
     <li>
        <a href="images_600/134127682891526firefox2.jpg" class="ad-thumb0 ad-active">
           <img class="image0" src="images_60/134127682891526firefox2.jpg" style="opacity: 1;">
        </a>
     </li>                       
     <li>
        <a href="images_600/134127682891526firefox1.jpg" class="ad-thumb1">
         <img class="image0" src="images_60/134127682891526firefox1.jpg" style="opacity: 0.7;">
        </a>
      </li>                           
  </ul>
</div>

上面的這段html，

$(".ad-thumb-list li a").each(function(){
            alert(this.innerHTML);
          });

會取到 img標籤的全部內容。

而若是這樣取的話：

$(".ad-thumb-list li a img").each(function(){
       alert(this.src);
       alert(this.className);
       alert(this.style.opacity);
   });

this.src 是會取到img標籤中的src屬性的值。

this.className是會取到img標籤中的class屬性的值。

this.style.opacity是會取到img標籤的樣式opacity屬性的值。

  不信的話你能夠作下試驗。