JQuery对象和DOM对象区别和转化

2016-08-09

JQuery对象和DOM对象的联系

DOM对象是JavaScript源生提供对HTML的DOM进行模型化的一个对象，JQuery对象是对该对象进行了封装，并且添加了JQuery方法等

DOM对象长什么样

DOM对象是一个及其复杂的对象，其详细描述了该HTML的状态，摘取一部分如下

accessKey:""
attributes:NamedNodeMap
autofocus:false
baseURI:"http://localhost:8080/psas/bug/submit"
childElementCount:0     <==== 内部的元素
childNodes:NodeList[1]  <==== 内部的节点
children:HTMLCollection[0]
classList:DOMTokenList[0]

......

firstChild:text         <==== 标签内部有文本
firstElementChild:null  <==== 该项为null表示标签内部不再有<>元素
form:null
hidden:false
id:"bug-level"
innerHTML:"↵       " <==== 内部的HTML文本，包括换行符
innerText:""         <==== 内部的字符串文本，不包括换行符

......

__proto__:HTMLSelectElement  <==== 所有的HTML方法都保存在里面

JQuery对象长什么样

JQuery对象是由一组DOM对象和若干JQuery信息和方法组成的，因为在使用JQuery选择器的时候可以选择出一组的DOM而不是一个

JQueryObject:init[2]
  0:div#id-1           <====第一个DOM对象
  1:div#id-2           <====第二个DOM对象
  context:document     <==== 当前的文档属性
  length:2             <==== 内部有几个DOM对象
  prevObject:init[1]   <==== 前一个JQuery对象！这里前一个也是JQuery对象注意
  selector:"div#JQueryObject"   <====选择器
  __proto__:Object[0]  <====JQuery方法

JQuery对象和DOM对象如何转换

JQuery ====> DOM

由于DOM对象被包在JQuery中，所以两种转换方式将一个JQuery对象转换成DOM对象：[index]和.get(index)

1 2	var DOM = $("div#id")[0] var DOM = $("div#id").get(0)

DOM ====> JQuery

一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个JQuery对象从而使用JQuery方法

相当于拿DOM对象初始化了一个JQuery对象

1	var JQuery = $(DOM)