js与jQuery的DOM操作比较（二）

1、设置属性

1）在DOM中使用setAttribute()方法可以设置元素属性，具体用法如下：
   elementNode.setAttribute(name,value)其中elementNode表示元素节点，参数表示设置的属性名，value表示要设置的属ertyName性值。

2）jQuery定义了两个用来设置元素属性值的方法：prop()和attr(),下面是具体介绍：

prop方法：prop()能为匹配的元素设置一个或更多的属性。具体做法如下：
prop(propertyName,value)
prop(map)
prop(propertyName,function(index,oldPropertyValue))   function()是用来设置返回值的函数。

attr()方法：attr()也能为匹配的元素设置一个或更多的属性。具体做法如下：

attr(propertyName,value)
attr(map)
attr(propertyName,function(index,oldPropertyValue))   function()是用来设置返回值的函数。

下面是在DOM中和在jQuery中的代码区别：
（1）

<script type="text/javascript">
window.onload=function(){
var span=document.getElementsByTagName('span');
p.setAttribute("color","red");
}
</script>

（2）

<script type="text/javascript">
$(function(){
$input("[checked='checked']").prop({
disabled.true
});
})
</script>
<script type="text/javascript">
$(function(){
$("img").attr("src",function(index){
return "images/dex("+(index+1)+").png";
})
})
</script>

2、访问属性

1）使用DOM 定义的getAttribute()方法可以访问元素的属性，并获取属性的值。具体用法如下：
elementNode.getAttribute(name)

2)jQuery定义了两个用来访问元素属性值的方法：prop()和attr()。
两个方法都只获得jQuery对象中第一个匹配的属性值。如果一个元素的属性没有设置，或者如果没有匹配的元素，则该方法将返回undefined值。为了每个元素的单独值可以用循环结构的jQuery.each()或.map()方法来逐一读取。下面我将举个简单列子，帮助大家理解。

<script type="text/javascript" >
$(function(){
$("input").change(function(){
var $input = $(this);
$("p").html(".attr('checked') = <b>" + $input.attr('checked') + "</b><br>"
+ ".prop('checked') = <b>" + $input.prop('checked') + "</b><br>"
+ ".is(':checked') = <b>" + $input.is(':checked') );
}).change();

})
</script>

演示效果为：
.attr('checked') = checked
.prop('checked') = true
.is(':checked') = true

3、删除属性

1）使用DOM定义的removeAttribute()方法可以删除指定的元素属性，具体做法如下：
elementNode.removeAttribute(name)

2）jQuery定义了removeProp()方法和removeAttr()方法都可以删除指定的元素属性，具体做法如下：
removeProp(propertyName)、removeAttr(attributeName)

removeProp()方法主要用来删除有prop()方法设置的属性值。removeAttr()方法使用DOM原生的removeAttribute()方法 ，使用该方法的优点能够被jQuery对象访问调用，而且具有良好的浏览器兼容性。