jQuery DOM对象区别与联系

Posted 妮儿jk

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery DOM对象区别与联系相关的知识,希望对你有一定的参考价值。

对两种对象类型的定义,只要能理解并转换成自己的说法就可以,不用死板按照资料所写

jQuery对象(jq对象)其实就是通过jquery类库选择器获得的对象(或者说是通过$获取的对象或者说是通过jquery包装dom对象后产生的对象(可参照下面的对象转换理解));

  jquery对象是jquery独有,可以使用jquery里面的方法,但不能使用dom的方法;

示例:

  $("#img").attr("src", "test.jpg");其中$("#img")就是jquery对象;

DOM对象(js对象)就是通过传统方法(javascript)获得的对象或者说是javascript固有的一些对象操作或者说是通过document获得的对象;

  DOM对象能使用javascript固有的方法,但不能使用jquery里面的方法;

示例:

  document.getElementById("img").src = “test.jpg";其中document.getElementById("img")就是DOM对象;

需要注意的是:$("#img").attr("src", "test.jpg")和document.getElementById("img").src = “test.jpg"效果是一样的,

但是document.getElementById("img").attr("src", "test.jpg") 或者$("#img").src = “test.jpg"是错误的;不要混淆一点是,同一个javascript脚本里面可以同时出现jq对象或者js对象,只是没有转换对象是不能互相调用不是自己对象的方法;

还有一种情况,就是this的使用,很多人在写jquery时经常这样写:this.attr("src","test.jpg");可是就是出错,那是因为this是dom对象,而.attr("src","test.jpg")是jquery方法,当然出错;

如果要解决这个问题,只需将dom对象转成jquery对象,如:$(this).attr("src","test.jpg");

 

下面就谈谈jq对象、js对象的转换及使用

以前我一直认为jquery的$("#id")和document.getElementById("id")得到的结果是一样的,其实不然,可以做如下测试:

1、alert($("#div"))弹出[object Object]

2、alert(document.getElementById("div"))弹出[object htmlDivElement]

3、alert($("#div")[0])或者alert($("#div").get(0))弹出[object HTMLDivElement]

 

1、DOM对象转jquery对象

对于已经是一个dom对象,只需要用$()把dom对象包装起来即可,如:$(dom对象)

示例:

  var obj=document.getElementById("id");   //dom对象
  var 
$obj = $(obj);   //转换成jquery对象

2、jquery对象转dom对象

有两种方式(通过索引):[index] 和 .get(index);

1)jquery对象是一个数组对象,可以通过[index]方法得到相应dom对象

示例:

  var $obj=$("#id");   //jquery对象
  var obj = $obj[0];   //dom对象 也可写成 var obj=$obj.get(0);

2)jquery本身提供,通过.get(index)方法得到相应的dom对象

示例:

  var $obj=$("#id");   //jquery对象

  var obj = $obj.get(0);   //dom对象 也可写成 var obj=$obj[0];

再次强调一下:DOM对象只能能使用javascript固有的方法,但不能使用jquery里面的方法;同时,jquery对象智能使用jquery的方法,不能使用dom对象方法;

另外以下几种写法都是正确的:

$("#id").html();

$("#id").get(0).innerHTML;

$("#id")[0].innerHTML;

 

以上是关于jQuery DOM对象区别与联系的主要内容,如果未能解决你的问题,请参考以下文章

DOM和BOM的区别与联系

jQuery与DOM区别以及$的作用

jQuery与DOM区别以及$的作用

JavaScript和HTML DOM的区别与联系

JavaScript和HTML DOM的区别与联系

JS中innerHTMLouterHTMLinnerText outerTextvalue的区别与联系? jQuery中的text()html()和val()