dom对象和jquery对象有什么区别

一、JavaScript 对象JavaScript 提供多个内建对象，比如 String、Date、Array 等等。

对象只是带有属性和方法的特殊数据类型。

访问对象的属性:

[javascript] 

var message="Hello World!";  

var x=messagelength;  

 

创建 JavaScript 对象:

[javascript] 

person=new Object();  

personfirstname="Bill";  

personlastname="Gates";  

personage=56;  

personeyecolor="blue";  

 

使用对象构造器:

[javascript] view plaincopy

function person(firstname,lastname,age,eyecolor)  

{  

thisfirstname=firstname;  

thislastname=lastname;  

thisage=age;  

thiseyecolor=eyecolor;  

}  

[javascript] 

var myFather=new person("Bill","Gates",56,"blue");  

var myMother=new person("Steve","Jobs",48,"green");  

 

二、DOM对象

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。

根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API）。

通过 DOM，可以访问所有的 HTML 元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。

HTML DOM 独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript 和 VBScript 使用。

DOM对象，即是我们用传统的方法(javascript)获得的对象。

 

三、jQuery对象

jquery对象其实是一个javascript的数组

这个数组对象包含125个方法和4个属性

4个属性分别是

jquery     当前的jquery框架版本号

length     指示该数组对象的元素个数

context    一般情况下都是指向HtmlDocument对象   

selector   传递进来的选择器内容  如：#yourId或yourClass等

 

如果你通过$("#yourId")方法获取jquery对象，

并且你的页面中只有一个id为yourId的元素

那么$("#yourId")[0]就是HtmlElement元素

与documentgetElementById("yourId")获取的元素是一样的

 

简单理解，就是jQuery创建的对象

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

 

四、DOM对象和jquery对象的区别

[javascript] 

var domObj = documentgetElementById("id"); //DOM对象  

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

[javascript]  

$(“#img”)attr(“src”,”testjpg”); //这里的$(“#img”)就是获取jQuery对象；  

[javascript]  

documentgetElementById(“img”)src=”testjpg”;//这里的documentgetElementById(“img”)就是DOM对象；  

再说一个例子：就是this，我在写jQuery的时候经常这样写：

thisattr(“src”,”testjpg”);

可是就是出错。其实this是DOM对象，而

attr(“src”,”testjpg”)

是jQuery方法，所以出错了。要解决这个问题就要将DOM对象转换成jQuery对象，例如：

$(this)attr(“src”,”testjpg”);

 

五、DOM对象和jquery对象的转换

DOM对象转成jQuery对象:

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

方法：$(DOM对象)

[javascript] 

var v=documentgetElementById(“v”);  //DOM对象  

var $v=$(v);    //jQuery对象  

 

jQuery对象转成DOM对象:

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

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

[javascript]  

var $v =$(“#v”) ; //jQuery对象  

var v=$v[0];    //DOM对象  

alert(vchecked)   //检测这个checkbox是否被选中  

 

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

[javascript] 

var $v=$(“#v”);  //jQuery对象  

var v=$vget(0);   //DOM对象  

alert(vchecked)  //检测这个checkbox是否被选中

jQuery中用$()方法获取的DOM元素都会返回数组 并且jQuery中有隐形迭代，有些 *** 作你无须去刻意循环它们，例如：$("div")text("hello");那么就会在所有的DIV中都加上hello 若果硬要循环它们以进行某些处理 你可以使用jQuery提供的$each()方法，或者这样写：

$("div")each(function(){

//这里干你想干的事情

//用$(this)可以访问正在循环的元素

});

祝学习愉快！

如果你的获取节点的js是在head标签里面引入的并且没有添加onload事件

获取不到节点是正常的

废话不多说解决方法:

在节点加载完成过后引入js(即footer部分的标签引入js)

在head的js添加onload事件如果是jq只需要添加 $(document)read(function(){})这样也可以

可以添加的事件

windowonload=function(){//你的js代码}

$(document)read(function(){//你的js代码})

$(window)on("load",function(){//你的js代码})

jQ对象转DOM对象-->

$(elem)[0]，或

$(elem)get(0)注：jQ对象保存的是一个数组，每个元素都是Dom对象的引用，访问该元素索引值即可获取该Dom元素DOM对象转jQ对象-->

$(domElem)如果domElem是dom元素，直接用$()包裹起来即可转为jQ对象。

什么是outerHTML

outerHTML，中文意为图例分析，用于获取元素内的html内容和文本。

与JQ的$()html()所不同的是，jQueryhtml() 是获取当前节点下的html代码，并不包含当前节点本身的代码。而outerHTML则包含本身的代码

例HTML：

<p id="testid"><span>这是一段Html代码</span></p>

它的html()为：

<span>这是一段Html代码</span>

而有时候回需要包含当前节点的代码，所以就用到了outerHTML，也就是

<p id="testid"><span>这是一段Html代码</span></p>

如何使用jQuery获取outerHTML

原生的JS Dom中有一个内置属性叫做：outerHTML (注意大小写敏感)获取包含当前节点的HTML代码。所以可以用JQ中的prop()获取，以上文代码为例

$('#testid')prop("outerHTML")

完整代码示例

<script src="

<p id="testid"><span>这是一段Html代码</span></p>

<script type="text/javascript">

consolelog("节点内的HTML代码\n"+$('#testid')html());

consolelog("包含节点的HTML代码\n"+$('#testid')prop("outerHTML"));

</script>

以上就是关于dom对象和jquery对象有什么区别全部的内容，包括:dom对象和jquery对象有什么区别、jquery如何遍历dom对象、jquery获取不到动态加载的dom元素是一种什么样的体验等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！