JQuery对象和DOM对象

　　Javascript和JQuery的特点

　　　　　Javascript是Netscape公司开发的一种脚本语言，使得网页和用户之间实现一种实时的，动态的和交互的关系，使网页可以包含更多活跃的元素和更加精彩的内容，JS自身存在3个弊端：①复杂的文档对象模型（DOM），②不一致的浏览器实现和③便捷的开发，调试工具的缺乏。Google公司的一系列Web运用，AJAX（Asynchronous JavaScript And XML,异步的JavaScript和XML）进入人们的视野。

　　　　　JQuery强调的理念是写得少，做得多。JQuery独特的选择器，链式操作，事件处理机制和封装完善的Ajax都是其他JS库望尘莫及的。概括起来，JQuery有以下几大优势：（1）轻量级。（2）强大的选择器。（3）出色的DOM操作封装。（4）可靠的事件处理机制。（5）完善的Ajax。（6）不污染顶级变量。（7）出色的浏览器兼容性。（8）链式操作方式。（9）隐私迭代。（10）行为层与结构层的分离。（11）丰富的插件支持。（12）完善的文档。（13）开源。（注意一点：在JQ库中，若没有特别说明，$就是jQuery的一个简写形式,例如：$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的）

　　JQuery对象和DOM对象

　　　　　1. DOM对象

　　　　　　　DOM（Document Object Model,文档对象模型）,每一份DOM都可以表示成一棵树。先看一个简单例子：代码如下

1 // ...省略其他代码
2 <h3>例子</h3>
3 <p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
4 <ul>
5     <li>苹果</li>
6     <li>橘子</li>
7     <li>菠萝</li>
8 </ul>
9 // ...省略其他代码

　　　　　　　　将上面HTML结构描述为一棵DOM树：

　　　　　　在这棵DOM树中的节点都是DOM元素节点。可以通过JS中的getElementByTagName或者getElementById来获取元素节点。像这样得到的DOM元素就是DOM对象。

　　　　2. jQuery对象

　　　　　　jQuery对象就是通过jQuery包装DOM对象后产生的对象。

　　　　　　jQuery对象是jQuery独有的。如果一个对象是jQuery对象，那么就可以使用jQuery里的方法。在jQuery对象中无法使用DOM对象的任何方法，同样的DOM对象也不能使用jQuery里的方法。

　　jQuery对象和DOM对象的相互转换

　　　　1. jQuery对象转成DOM对象

　　　　　　jQuery对象不能使用DOM中的方法，但如果对jQuery对象提供的方法不熟悉，或者jQuery没有封装想要的方法，不得不使用DOM对象的时候，有两种处理方法。

　　　　　　（1）jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象。例如只有一个类名为“bind”的DIV，在控制台输出console.log($(".bind"))

　　　　　　如图，通过调试工具，我们可以清除的看到，jQuery对象是一个类数组对象，我们可以通过$(".bind")[0]获得DOM对象。

　　　　　　（2）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象。还是上面的.bind对象，我们可以通过 $(".bind").get(0)获得DOM对象。如图：

　　　　2. DOM对象转成jQuery对象

　　　　　　对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象), 转换后，就可以任意使用jQuery中的方法了。

　　　　　　注意：平时用的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。