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;

时间: 2024-12-15 18:08:48

jQuery DOM对象区别与联系的相关文章

锋利的jQuery——DOM对象与jQuery对象的区别

DOM对象 <h3>例子</h3> <p title="选择你喜欢的水果">你最喜欢的水果是?</p> <ul> <li>苹果</li> <li>橘子</li> <li>菠萝</li> </ul> <h3><p><ul><li>都是DOM对象,在javascript中可以使用getElementB

jQuery对象和DOM对象区别及其转换

jQuery对象是通过jQuery包装DOM对象后产生的对象. DOM对象可以使用js中的方法 jQuery对象无法使用DOM对象中的方法: 举个例子: $("#foo").html();//这个就是jquery的方法 等同于下面 document.getElementById("foo").innerHTML;//这个就是js方法: 1.jQuery对象转换成DOM对象 (1)jQuery对象是一个类似数组的对象,可以通过[index]和get(index). v

锋利的jQuery(1)——DOM对象与jQuery对象的转换

1.认识jQuery DOM对象:即文档对象模型 jQuery对象:通过jQuery包装DOM对象后产生的对象.这是jQuery对象所特有的,在jQuery对象中无法使用DOM对象的任何方法,同时DOM对象也不能使用jQuery对象的方法.(这也是我自己在写代码的时候经常弄混的一条) DOM对象和jQuery对象的互换:一般的在jQuery对象前面加上$ jQuery对象转换成DOM对象: Jquery对象是一个类似数组的对象,可以通过[index]的方法得到相应的DOM对象 //代码如下 va

jquery中 dom对象与jQuery对象相互转换

var jq = $(dom对象);//额 再补充点吧好记. $是jquery的别名.这一句等价于 var jq = jQuery(dom对象); 反之. dom对象 = jq[0]; //不写那么长了,简单明了些.感觉dom对象和jquery对象大家应该能分清.话说好多时候还是jQuery对象好用的多.

[jQuery]jQuery和DOM对象互换(四)

DOM 和 jQuery 相互转换 DOM 转jQuery $(DOM对象) # (1)直接获取 $('video'); # (2)转换 $(DOM对象) var myVideo = document.querySelector('video'); $(myVideo).play(); #jQuery没有这个方法 jQuery 转 DOM # (1) $('div')[index] index索引 $('video')[0].play(); # (2) $('div').get(index) i

DOM对象和js对象以及jQuery对象的区别

一.DOM对象 文档对象模型简称DOM,是W3C组织推荐的处理可扩展置标语言的标准编程接口. DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的对象.这些对象的行为和属性以及这些对象之间的关系. 通过DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素. HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaScript 和 VBScript 使用. DOM对象,即是我们用

Jquery对象和DOM对象的区别

1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM,因此需要重点了解jQuery对象和DOM对象以及它们之间的关系.DOM对象,即是我们用传统的方法(javascript)获得的对象,jQuery对象即是用jQuery类库的选择器获得的对象;复制代码 代码如下: var domObj = document.getElementById("id"); //DOM对象var $obj = $("#id"); //j

jQuery - 01. jQuery特点、如何使用jQuery、jQuery入口函数、jQuery和DOM对象的区别、jQuery选择器、

this指的是原生js的DOM对象 .css(""):只写一个值是取值,写俩值是赋值 window.onload   ===   $(document).ready(); $(""):获取元素   标签名..类名.#id jQuery特点 链式编程 jq.shou(3000).html(内容) 相当于 jq.shou(3000) jq.gtml(内容) 隐式迭代 隐式实用for循环.迭代 如何使用jQuery 引包 一定要在使用之前 <script src =

关于jquery对象和DOM对象的区别

这个问题的出现是因为自己对jquery不够了解,只会获取简单的Demo,做简单的操作,将jquery的很多方法和js中的混淆,以为js中的很多方法,在jquery中也可以使用,这是完全错误的理解! 所以有空jquery也要好好学习!(列为工作时间之外的任务) 下面摘自某些作者的论述,感觉总结的很到位,分享如下,并作为一个记录! jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象