当前位置:Web前端 > jquery> 正文

jQuery对象和DOM的相互转换

时间:2013-10-19类别:Web前端

jQuery对象和DOM的相互转换

jQuery对象和DOM的相互转换

什么是jQuery对象?

---就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。

比如:

$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码:

document.getElementByIdx_x("id").innerHTML;

虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法.乱使用会报错。

比如:$("#test").innerHTML、document.getElementByIdx_x("id").html()之类的写法都是错误的。

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

 

jQuery对象转成DOM对象

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

 

转换的方法有以下两种。

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

例如:

 

  •  
  • JScript 代码   复制
  • 
    <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对象元素。例如,上面示例可以改写为下面的方法。

     

  •  
  • JScript 代码   复制
  • 
    <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对象)。

    例如

     

  •  
  • JScript 代码   复制
  • 
    <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> 
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐