Jquery对象和DOM对象之间的转换

在JS中，DOM对象只能操作DOM中的方法，Jquery对象只能操作Jquery中的方法，但有时候相应的对象中没有封装想要的方法或者不得不使用其他对象中的方法，就需要将两个对进行互相转换了。

 

Jquery转换成DOM对象：

Jquery中提供了两种方法将一个Jquery对象转换成DOM，即：[index]和get(index)。

1）[indx]方法：Jquery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。

var $obj = $(this);//Jquery对象

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

alert($obj+”\n”+obj);//alert出对象类型，如果是Jquery对象，则是”Object”，如果是DOM对象，则是“HTMLObject”

 

2）、另一种方法是Jquery本身提供的，通过get(index)方法得到相应的DOM对象。

var $obj = $(this);//Jquery对象

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

alert($obj+”\n”+obj);

 

两个实例：

1、  判断对象是否存在：

有时候定了一个Jquery之后，譬如说var $obj=$(“#cs”);可能这个ID为cs的对象并不存在，但是alert($obje);却依然会提示说是个”Object”，在用的时候又会报错说“不支持该对象或方法”了，此时就需要判断该对象是否存在了。可以将Jquery对象转换成DOM对象，然后alert(obj)，如果当前对象不存在，则会弹出”undefined”而不是”HTMLObject”。因为$(obj)本身就不存在，取其第一个对象必然也不存在了，就好比Java中“空指针”，对象本身就为空，再取其属性值，必然也是个空。

当然判断对象是否存在，还可以用$obj.length();Jquery对象本来就是个数组对象，必然存在length，若length=0，那么当前对象必然不存在。

 

2、判断复选框是否选中：

在Jquery对象中，可以通过attr(“checked”)来判断当前复选框是否选中(当然也可以使用$obj.is(“:checked”)来判断，这个返回的是boolean值)，但这个方法返回的值跟使用的Jquery库和浏览器的类型是有关系的，可能因为库或浏览器的不同，返回不同的值，如true/false、checked、undefined、或者是空，如果判断不到位就获取不到当前复选框的状态。此时可以用DOM对象的checked属性。这个跟Jquery没有关系，浏览器解析的结果不是true就是false，很容易判断。

var $obj=$(“#cs”);

var obj = $obj[0];

alert($obj.attr(“checked”));

alert(obj.checked);

 

DOM对象转换成Jquery对象：

在平常使用中，用到的Jquery对象都是通过$()函数制造出来的，$()函数就是一个Jquery对象的制造工厂，所以，DOM对象要转换成Jquery对象，只需要用$()把DOM对象包装起来，就可以得到一个Jquery对象。

var obj = document.getElementById(“id”);

var $obj = $(obj);

alert(obj+” \n” +$(obj));