您的位置：首页 > Web前端 > JQuery

jquery对象和 dom 对象及其转换

2012-03-13 11:32 429 查看

疑惑？？

什么是Jquery对象? 什么是Dom对象？下面我将一一给大家讲讲我的理解，如有不妥敬请指出

dom对象？

dom对象也就是dom文档里面的各种属性，选择符号,方法等

请看 DOM文档对象

jQuery对象？

---就是通过jQuery调用js库，包装DOM对象后产生的对象。jQuery对象是jQuery特有的，只能在jquery方法使用。

比如：

<div id="mytest">
test js and  dom
</div>

下面的是两种方法获取id 为"mytest"里面的内容，两种方法获取内容的是事一致的

$("#mytest").html();  //test js and dom

document.getElementById("mytest").innerHTML;  //test js and dom

虽然jQuery对象是包装DOM对象后产生的，但是jQuery无法使用DOM对象的任何方法，同理DOM对象也不能使用jQuery里的方法.乱使用会报错。比如：$("#mytest").innerHTML、document.getElementById("mytest").html()之类的写法都是错误的。

还有一个要注意的是：用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象，这两者并不等价。请参看如下说的两者间的转换。

既然jQuery有区别但也有联系，那么jQuery对象与DOM对象也可以相互转换。在再两者转换前首先我们给一个约定：如果一个获取的是 jQuery对象，那么我们在变量前面加上$，如：var $variab = jQuery对象；如果获取的是DOM对象，则与习惯普通一样：var variab = DOM对象；这么约定只是便于讲解与区别，实际使用中并不规定。

DOM对象转成jQuery对象:

对于已经是一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。$(DOM对象)

var test=document.getElementById("mytest"); //DOM对象

var $test1=$(test); // test1就是jQuery对象

转换后，就可以任意使用jQuery的方法了。

jQuery对象转成DOM对象

两种转换方式将一个jQuery对象转换成DOM对象：[index]和.get(index);

(1)jQuery对象是一个数据对象，可以通过[index]的方法，来得到相应的DOM对象。

如：var $test=$("#mytest") ; //jQuery对象

var test1=$test[0]; //DOM对象

alert(test1.checked) //检测这个checkbox是否被选中

(2)jQuery本身提供，通过.get(index)方法，得到相应的DOM对象

如：var $test=$("#mytest"); //jQuery对象

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

alert(test1.checked) //检测这个checkbox是否被选中

下面你的是我自己做的小例子仅供参考

<!Doctype html>
<head>
    <title>HelloWorld</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" language="javascript" src="../../style/jquery-1.7.1.js"></script>
    <script type="text/javascript">
      function test(){
        alert(document.getElementById("mytest").innerHTML);
      }
      $(function(){
        $("#btn2").click(function() {
          alert($("#mytest").html());
        });
      })
      $(function(){
        $("#btn3").click(function(){
         var btn3=document.getElementById("mytest");
         var $test1 = $(btn3);
         alert($test1.html());
        });
      });
      $(function(){
        $("#btn4").click(function(){
          var $test =$("#mytest");
          var mytest=$test.get(0);
          alert(mytest.innerHTML);
        });
      });
      $(function(){
        $("#btn5").click(function(){
          var $test = $("#mytest");
          var mytest = $test[0];
          alert(mytest.innerHTML);
        });
      });
    </script>
</head>
<body>
    <div id="mytest" style="font-size:24px;">test js and dom</div>
    <div class="divFrame" style="width:auto;height:260px;background:grey;align:center;">
      <input type="button" id="btn1" onclick="test();" value="通过Dom对象获取mytest内容"/>
      <input type="button" id="btn2" value="通过jquery对象获取mytest内容"/>
      <input type="button" id="btn3" value="dom 转换成 jquery对象">
      <input type="button" id="btn4" value="jquery对象转化成dom对象1">
      <input type="button" id="btn5" value="jquery对象转化成dom对象2">
    </div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function button input javascript div

相关文章推荐

新的分享

章节导航

jquery对象 和 dom 对象 及其 转换

疑惑？？

jquery对象和 dom 对象及其转换