jQuery对象与DOM对象的区别与联系

最新推荐文章于 2020-07-21 09:19:43 发布

Courage-lu

最新推荐文章于 2020-07-21 09:19:43 发布

阅读量199

点赞数

本文链接：https://blog.csdn.net/weixin_45846805/article/details/106178629

版权

jQuery对象

jQuery对象是通过jQuery封装后的DOM对象后产生的对象
jQuery对象是通过jQuery封装后的DOM对象后产生的对象
例如：(“#boximg”).attr(“src”,”01.png”) (“#boximg”)就是 jQuery 对象。

DOM对象

JavaScript固有的一些对象操作
DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法
例如：document.getElementById(“wapper”)
document.getElementById(“wapper”)就是DOM 对象

两者之间的关系

在这里插入图片描述

jQuery对象与DOM对象之间的相互转换

1.DOM对象转换为jQuery对象
只要用$()函数把DOM对象封装即可，注意返回值是jQuery对象。

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

2.jQuery对象转换为DOM对象
jQuery对象是个类似于数组的对象，可以通过数组下标或其get(index)方法得到对应DOM对象。
1.1通过下标：

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

1.2 jQuer对象的get(index)方法

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

通过上面方法可实现两种不同类型对象的随便互换，使用不同的体系下的方法和属性，非常方便。
DOM 对象才能使用DOM 中的方法，jQuery 对象才可以使用jQuery中的方法。其两者之间是互不相通的。
附上小案例：更清楚了解jQuery对象与DOM对象的转换，当然了,在开发过程中没必要这么麻烦
功能：如果用户没有阅读用户协议（checkbox没选定），提交按钮是被禁用的，选定后自然打开。

转换版：

<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.11.3.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>用户协议</label>
		<button>提交</button>
	</body>
</html>

简洁版：

<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.11.3.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>用户协议</label>
		<button>提交</button>
	</body>
</html>

效果：
在这里插入图片描述

Courage-lu

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery对象与DOM对象的区别与联系

jQuery对象jQuery对象是通过jQuery封装后的DOM对象后产生的对象jQuery对象是通过jQuery封装后的DOM对象后产生的对象例如：(“#boximg”).attr(“src”,”01.png”) (“#boximg”)就是 jQuery 对象。DOM对象JavaScript固有的一些对象操作DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法例如：document.getElementById(“wapper”)document.get
复制链接

扫一扫