jQuery基础学习2——DOM和jQuery对象

1 <body>
2         <h3>例子</h3>
3         <p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
4         <ul>
5             <li id="apple">苹果</li>
6             <li>橘子</li>
7             <li>菠萝</li>
8         </ul>
9     </body>

可以通过JavaScript中的getElementsByTagName或者getElementById来获取元素节点，这样得到的DOM元素就是DOM对象，DOM对象可以使用JavaScript中的方法，如下：

1 var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象
2 
3 var objHTML = domObj.innerHTML;　　//　　使用JavaScript中的属性——innerHTML

jQuery对象就是通过jQuery包装DOM对象后产生的对象，jQuery对象是jQuery独有的，如果一个对象是jQuery对象，那么可以使用jQuery里的方法。

alert($('#apple').html());

这段代码等同于：

alert(document.getElementById('apple').innerHTML);

1.在jQuery对象中无法使用DOM对象的任何方法，例如$('#id').innerHTML和$('#id').checked之类的写法都是错误的，可以用$('#id').html()和$('#id').attr("checked")之类的jQuery方法来代替。

2.DOM对象也不能使用jQuery里的方法，例如document.getElementById('apple').html()也会报错，只能用document.getElementById('apple').innerHTML语句。

3.用#id作为选择符取得的是jQuery对象而并非document.getElementById('id')所得到的DOM对象，两者并不等价。

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

jQuery提供了两种方法将jQuery对象转换为DOM对象，即[index]和get（index）。

jQuery对象是一个类似数组的对象，可以通过[index]的方法得到相应的DOM对象，jQuery代码如下：

var $cr = $("#cr");    //jQuery对象
var cr =$cr[0];    //DOM对象
alert(cr.checked)    //检测这个checkbox是否被选中

另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象，jQuery代码如下：

1 var $cr = $("#cr");    //jQuery对象
2 var cr =$cr.get(0);    //DOM对象
3 alert(cr.checked)    //检测这个checkbox是否被选中

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

1 var cr = document.getElementById("cr");    //DOM对象
2 var $cr = $(cr);    //jQuery对象
3 alert($cr.is(":checked"));    //jQuery方式判断

is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。