jQuery对象和DOM之间的转换-优快云博客

本文介绍了如何在jQuery中实现jQuery对象与DOM对象之间的相互转换。包括两种将jQuery对象转换为DOM对象的方法：使用数组下标读取和get()方法；以及如何将DOM对象转换为jQuery对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery对象转成DOM对象

jQuery对象不能使用DOM中的方法，但是如果对jQuery对象所提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不实用DOM对象的时候，就需要将jQuery对象转换为DOM对象。

转换的方法有以下两种。

第一，借助数组下标来读取jQuery对象集合中的某个DOM元素对象。

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

例如：

<script type="text/javascript" >
 $(function(){
      var $li = $("li");   //返回jQuery对象
       var li =$li[0];    //返回DOM对象
       alert(li.innerHTML);
  })
</script>

<ul>
     <li>列表1</li>
     <li>列表2</li>
     <li>列表3</li>
</ul>

第二，借助jQuery对象的get()方法。

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

例如：

<script type="text/javascript" >
 $(function(){
      var $li = $("li");   //返回jQuery对象
       var li =$li.get(0);   //返回DOM对象
       alert(li.innerHTML); 
 })
</script>

把DOM对象转换为jQuery对象

对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了，然后它就可以自由调用jQuery定义的方法，方式为$(DOM对象)。

例如：

<script type="text/javascript" >
 $(function(){
      var li = document.getElementsByTagName("li"); //获取所有li元素
       var $li = $(li[0]);    //把第一个li元素封装为jQuery对象      
       alert($li.html());    //调用jQuery对象的方法
  })
</script>

<ul>
     <li>列表1</li>
     <li>列表2</li>
     <li>列表3</li> 
</ul>

文章转载自： jQuery对象和DOM的相互转换 http://www.studyofnet.com/news/169.html