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

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

最近才开始学jQuery,它的代码简单，操作起来方便，jQuery库的功能特别强大。jQuery作为一种JavaScript库，继承并优化了JavaScript访问DOM对象的特征，使开发人员能更加方便的操作DOM对象。

1.创建元素

1）在JavaScript中DOM为document对象定义了一个createElement()方法，该方法能根据参数传递的标签字符串创建指定的元素对象，并返回新创建的元素对象。

<script type="text/javascript">
	window.οnlοad=function () {				//页面初始化函数
		var div=document.createElement("div");		//创建div元素
		document.body.appendChild(div);			//把创建的div元素添加到文档树中
	}
</script>

2）在jQuery中直接使用jQuery构造函数$()创建元素对象。具体方法如下：

<script type="text/javascript" src="jQuery/jquery-1.6.4.js"></script>
<script type="text/javascript">
	$(function(){						//页面初始化函数	
			var $div=$("<div></div>");		//创建div元素
			$("body").append($div);			//把创建的div元素添加到文档树中
		}
		)
</script>

2.输入文本

1）文本节点无法独立存在，必须包裹在元素节点内部，因此在创建文本之前，应确保新建或者选择元素节点。DOM在document对象中定义了createTextNode()方法，调用该方法可以创建文本节点。具体用法如下：

var text=document.createTextNode("text");

<script type="text/javascript">
	window.οnlοad=function () {				
		var div=document.createElement("div");
		var txt=document.createTextNode("DOM");
		div.appendChild(txt);		
		document.body.appendChild(div);			
	}

2)jQuery创建文本节点比较简单，直接把文本字符串添加到元素标记字符串中，具体方法如下：

<script type="text/javascript" src="jQuery/jquery-1.6.4.js"></script>
<script type="text/javascript">
	$(function(){						
			var $div=$("<div>DOM</div>");
			$("body").append($div);
		}
		)
</script>

从代码输入的角度分析，JavaScript实现相对麻烦。而jQuery创建元素节点操作相同，仅需要两步操作即可快速实现。

从执行效率角度分析，JavaScript直接实现要比jQuery实现快10到80倍以上，在执行最慢的IE浏览器中，两者差距也在10倍以上。