思洋互动网站建设学前班

jQuery对象和DOM对象的相互转换

jQuery对象和DOM对象是可以相互转换的，因为它们所操作的对象都是DOM元素，只不过jQuery对象包含了多个DOM元素，而DOM对象本身就是一个DOM元素。简单地说，jQuery对象是DOM元素的数组，也称为类数组，而DOM对象就是单个的DOM元素。

1. 把jQuery对象转换为DOM对象

jQuery对象不能够直接使用DOM对象的方法，但是如果用户需要时，就应该先把jQuery对象转换为DOM对象。转换的方法有以下两种。

第一，借助数组下标来读取jQuery对象集合中的某个DOM元素对象。例如，在下面的示例中，先使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第一个DOM元素，此时再返回的是DOM对象。这时就可以调用DOM属性innerHTML了。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script src="images/jquery-1.3.2.js" type="text/javascript"></script> 
2. <script type="text/javascript" > 
3. $(function(){  
4.     var $li = $("li");   //返回jQuery对象  
5.     var li =$li[0];    //返回DOM对象  
6.     alert(li.innerHTML);  
7. })  
8. </script> 
9.  
10. <ul> 
11.     <li>列表1</li> 
12.     <li>列表2</li> 
13.     <li>列表3</li> 
14. </ul> 

第二，借助jQuery对象的get()方法。为get()方法传递一个下标值，即可从jQuery对象中取出一个DOM对象元素。例如，上面示例可以改写为下面的方法。

1. <script src="images/jquery-1.3.2.js" type="text/javascript"></script> 
2. <script type="text/javascript" > 
3. $(function(){  
4.     var $li = $("li");   //返回jQuery对象  
5.     var li =$li.get(0);   //返回DOM对象  
6.     alert(li.innerHTML);  
7. })  
8. </script> 

2. 把DOM对象转换为jQuery对象

对于DOM对象来说，直接把它传递给$()函数即可，jQuery对象会自动把它包装为jQuery对象，然后它就可以自由调用jQuery定义的方法。例如，针对上面的示例，我们可以这样来设计：首先使用DOM的方法获取所有li元素。其代码如下。

1. <script src="images/jquery-1.3.2.js"  type="text/javascript"></script> 
2. <script type="text/javascript" > 
3. $(function(){  
4.     var li = document.getElementsByTagName("li");  //获取所有li元素  
5.     var $li = $(li[0]);    //把第一个li元素封装为jQuery对象  
6.     alert($li.html());    //调用jQuery对象的方法  
7. })  
8. </script> 
9.  
10. <ul> 
11.     <li>列表1</li> 
12.     <li>列表2</li> 
13.     <li>列表3</li> 
14. </ul> 

实际上，也可以把DOM元素数组传递给$()函数，jQuery对象会自动把所有DOM元素包装在一个jQuery对象中。例如，上面示例还可以设计成下面的代码。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. <script src="images/jquery-1.3.2.js" type=" text/javascript"></script> 
2. <script type="text/javascript" > 
3. $(function(){  
4.     var li = document.getElementsByTagName("li");  //获取所有li元素  
5.     var $li = $(li);  //把所有li元素封装为jQuery对象  
6.     alert($li.html());   //调用jQuery对象的方法  
7. })  
8. </script> 

注意：使用document.getElementsByTagName()方法获取的DOM元素集合是一个真正的数组类型数据，而jQuery对象仅是一个类数组，不是真正意义上的数组类型数据。关于类数组和数组之间的区分，我们将在第2章中进行详细讲解。