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

最新推荐文章于 2021-10-31 18:32:03 发布

软件章

最新推荐文章于 2021-10-31 18:32:03 发布

阅读量1k

点赞数

分类专栏： jQuery 文章标签： jQuery dom

本文链接：https://blog.csdn.net/jacklearntech/article/details/17582005

版权

jQuery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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>