您的位置：首页 > Web前端 > JQuery

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

2015-09-03 09:40 661 查看 
<body>
<h3>例子</h3>
<p title="选择你最喜欢的水果." >你最喜欢的水果是?</p>
<ul>
<li id="apple">苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
</body>


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

var domObj = document.getElementsByTagName("h3")[0]; // 获得Dom对象

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代码如下：

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


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

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


is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航