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对象访问调用，而且具有良好的浏览器兼容性。