【jQuery】DOM对象和jQuery对象

DOM对象和jQuery对象

DOM对象是指页面上的标签节点等，必须是页面文档树中的节点。DOM对象可以通过传统的js方法获得，代码如下：

var domObj=document.getElementById("id");

jQuery对象是指通过jQuery包装DOM对象后产生的对象，是jQuery独有的。代码如下：

var $obj=$("#id");

两者的区别：

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法，乱使用会报错。比如，下面的这些写法就是错误的。

$("#id").innerHTML;
document.getElementById("id").html();//html()方法是jQuery中的方法，意为获取对应id元素内的html代码

用#id作为选择符取得的是jQuery对象与document.getElementById(“id”)得到的DOM对象，这两者并不等价。

两者之间的转换

jQuery对象转换成DOM对象

jQuery提供了两种方式将jq对象转换为DOM对象：

1.[index]方法.因为jQuery对象是一个数据集。

var $obj =$("#lt") ; //jQuery对象

var domObj=$obj[0]; //DOM对象

alert(domObj.innerHTML) //获得dom对象的html代码

2.通过 .get(index)方法

var $obj=$("#lt"); //jQuery对象

var domObj=$obj.get(0); //DOM对象

alert(domObj.innerHTML) //获得dom对象的html代码

DOM对象转换为jQuery对象

用$()把dom对象包装起来，就可以获得一个jquery对象。

var domObj=document.getElementById("lt"); //DOM对象

var $obj=$(domObj); //jQuery对象

最后，附上一个通过jQuery对dom元素添加和移除样式的例子。

<script src="jquery-1.7.1.js"></script>
<script>
	$(function(){
		$("#btn").click(function(){
			var  className=$("#txtClass").val();
			$("#p").addClass(className);
		});
		$("#btn2").click(function(){
			var className=$("#txtClass").val();
			$("#p").removeClass(className);
		});
	});
</script>