元素属性和Dom属性简介

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

我们通常将id,src,alt,class称为属性,也即元素属性.但是,当浏览器对标签元素进行解析时,会将元素解析为Dom对象,相应的,元素属性也就解析为Dom属性。

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

值得注意的是:

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

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

2.在JavaScript中,我们可以直接获取或设置Dom属性

使用jQuery操作元素属性

attr

在jQuery中,提供了attr函数来操作元素属性,具体如下:

attr(name) 取得第一个匹配元素的属性值. $("input").attr("value") attr(property) 将一个"名/值"形式的对象设置为所有匹配元素的属性 $("input").attr({ value: "txt", title: "text" }); attr(key,value) 为所有匹配的元素设置一个属性值 $("input").attr("value","txt"); attr(key,fn) 为所有匹配的元素设置一个计算的属性值 $("input").attr("title", function () { returnthis.value }); removeAttr(name) 从所有匹配的元素中删除一个属性 $("input").removeAttr("value");

注意:

1.如果要设置对象的class属性时,必须使用className作为属性名。

2.我们可以使用removeAttr删除元素属性,但其对应的Dom属性是不会被删除掉的,只是被改变其值而已。

根据上面的几个函数,我们可以这样使用来获取dom的value值和innerHTML值:

$("#txt1").attr("value") $("#txt1").attr("value", "1234"); $("#dv1").attr("innerHTML", 'this is a div'); $("#dv1").attr("innerHTML");

val()，html()，text()

实际上,jQuery提供了更简单的方法来访问value,innerHTML,具体函数如下:

1 2 3 4 下一页