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属性的值。

  不信的话你能够作下试验。