黑马程序员_Jquery对象和Dom对象及其相互转化

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

1.JQuery对象和Dom对象

Dom对象，即是我们用传统的方法(Javascript)获得的对象。Dom对象使用getElementById、getElementByName或者getElementByTagName方法获得对象，如下：
var txt = document.getElementById("txt1"); //txt为Dom对象
JQuery对象是对Dom对象的封装，是JQuery独有的，实际上是一个Dom对象的数组，有点像类和属性之间的关系。JQuery对象使用JQuery类库的选择器获得的对象;，其中JQuery的操作则是对该数组对象的操作，这样就可以实现隐式迭代了（将方法应用于每一个Dom对象），如下：

var $txt1 = $("#txt1"); //txt1为JQuery对象;

如果一个对象是JQuery对象，那么就可以使用JQuery里的方法，例:

$("#div1").HTML(); //获取id为div1的元素内的HTML代码，HTML()是JQuery特有的方法。上面的那段代码等同于:

document.getElementById("div1").innerHTML;//innerHTML为Dom对象方法

注意：在JQuery对象无法使用Dom对象方法，同样Dom对象也不能使用JQuery对象方法。

例如$("#id").innerHTML 和document.getElementById("div1").HTML()之类的写法都是错误的.学习JQuery开始就应当树立正确的观念，分清JQuery对象和Dom对象之间的区别，之后学习 JQuery就会轻松很多的。

2.JQuery对象和Dom对象的互相转换

在上面第一点说了，JQuery对象和Dom对象是不一样的！比如JQuery对象不能使用Dom的方法，Dom对象不能使用JQuery方法，那假如我 JQuery没有封装我要的方法，那能怎么办呢？这时我们可以将JQuery对象转换成Dom对象。

JQuery对象转换成 Dom对象：

JQuery提供了两种方法将一个JQuery对象转换成一个Dom对象，即[index]和get(index)。可能有人会觉得奇怪，怎么是用下标呢，没错，JQuery对象就是一个数组对象。下面代码将演示一个JQuery对象转换成Dom对象，再使用Dom对象的方法，如下：

var $cr=$("#cr"); //JQuery对象

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

alert(cr.checked); //检测这个checkbox是否给选中

Dom对象转换成JQuery对象：

对于一个Dom对象，只需要用$()把Dom对象包装起来，就可以获得一个JQuery对象了，方法为：$(Dom对象)，代码如下：

var cr=document.getElementById("cr"); //Dom对象

var $cr = $(cr); //转换成JQuery对象

转换后可以任意使用JQuery中的方法了.

通过以上的方法，可以任意的相互转换JQuery对象和Dom对象。

最后再次强调，Dom对象才能使用Dom中的方法，JQuery对象不可以使用Dom中的方法，但 JQuery对象提供了一套更加完善的工具用于操作Dom。

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------