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

系统学习jQuery.核心知识.FAQ.jQuery对象与DOM对象区别与联系

2013-12-26 14:59 706 查看

1.全局关系

学前端的DOM技术与jQuery技术时，经常分不清jQuery对象与DOM对象以及它们的联系与区别，其实两者关系可用下图表示，下面所有的说明也围绕此图展开。

2.DOM对象

DOM对象可以看成是DOM树中的结点（关于DOM的详细内容看我其它的博文）。

获取方法为getElementById()和getElementsByTagName（）两种。

var obj=document.getElementById("id");//获得DOM对象
var txt=obj.innerHTML;//获得DOM对象的innerHTML属性值

3.jQuery对象

jQuery对象是通过jQuery对象工厂函数（即$()）包装DOM对象产生的对象，比DOM对象好的地方是可以使用jQuery中非常丰富的属性和方法。

$("#hi").html();//通过id为hi的DOM对象获得对应的jQuery对象，调用jQuery对象的方法获得其内容
document.getElementById("hi").innerHTML;

4.注意事项

jQuery对象不能使用DOM对象的方法，当然反过来也成立。如，$("#hi").innerHTML和$("#hi").checked等写法是错误的，因为这是DOM对象才拥有的方法，可以使用$("#hi").html()和$("#hi").attr("checked")等jQuery方法代替，当然也不能用document.getElementById("id").html()，应用document.getElementById("id").innerHTML代替。

5.jQuery对象与DOM对象相互转换

①DOM对象转换为jQuery对象

只要用$()函数把DOM对象封装即可，注意返回值是jQuery对象，注意此时接收返回值变量的命名方式为var $varName；

var domObj=document.getElementById("id");//获得DOM对象
var $jObj=$(domObj);//获得对应jQuery对象，现在就可以使用此对象各种牛叉的jQuery方法了。。。。

②jQuery对象转换为DOM对象

当jQuery对象的方法属性不熟悉，或者没有想要的方法时，就要把jQuery对象转为DOM对象，jQuery对象是个类似于数组的对象，可以通过数组下标或其get(index)方法得到对应DOM对象。具体如下：

（1）通过下标

var $jObj=$("#hi");//获得jQuery对象
var domObj=$jObj[0];

（2）jQuer对象的get(index)方法

var $jObj=$("#hi");//获得jQuery对象
var domObj=$jObj.get(0);

通过以上方法可实现两种不同类型对象的随便互换，使用不同的体系下的方法和属性，是不是非常的爽。。。

6.jQuery对象与DOM对象小实例

说明：下面小案例，不断地进行jQuery对象与DOM对象的转换，只是想表明是否真得明白DOM对象与jQuery对象，如果真的在项目中，是不用这个啰嗦的。

功能：如果没有阅读用户协议（checkbox没选定），提交按钮是被禁用的，选定后自然打开。

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var $jObjBtn=$("Button");//获取jQuery对象。
$jObjBtn.attr("disabled",true);//利用jQuery对象方法对按钮进行禁用。

var domObjCB=document.getElementById("cb");//获取DOM对象
var $jObjCB=$(domObjCB);//DOM对象->jQuery对象

$jObjCB.click(function(){
if($jObjCB.is(":checked"))//is()是jQuery中的方法，判断此对象是否被选中，返回boolean值
{
var domObjBtn=$jObjBtn[0];//下标法把jQuery对象转换为DOM对象
domObjBtn.disabled=false;//DOM对象的属性
}
else
{
var domObjBtn=$jObjBtn.get(0);//jQuery对象get()方法把其转换为DOM对象
domObjBtn.disabled=true;
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="cb"/><label>I've read the note.</label>
<button>提交</button>
</body>
</html>

附简洁版

<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("Button").attr("disabled",true);
$("#cb").click(function(){
if($("#cb").is(":checked"))
{
$("Button").attr("disabled",false);
}
else
{
$("Button").attr("disabled",true);
}
});
});
</script>
</head>
<body>
<input type="checkbox" id="cb"/><label>I've read the note.</label>
<button>提交</button>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jQuery dom

相关文章推荐

新的分享

章节导航