您的位置:首页 - jQuery
区分DOM属性和元素属性
一、区分DOM属性和元素属性

对于下面这样一个标签元素:

<img id='img' src="images/image.1.jpg" alt='1' class="imgs"></img>
我们通常将id、src、alt、class称为属性,也即元素属性。但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性,两者是有区别的。

元素属性 和 Dom属性 只是在我们对其进行不同解析时的不同称呼。

值得注意的是:

1.元素被解析成Dom时,元素属性和Dom属性并不一定是原来的名称;

例如,img的class属性,在表现为元素属性时是class;在表现为Dom属性时,属性名为className。

2.虽然我们设置了元素的src是相对路径:images/image.1.jpg,但是在“DOM属性”中都会转换成绝对路径:

http://localhost/images/image.1.jpg。

3.在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开始。
本站导航
相关文章
柯乐义 Copyright© keleyi.com