dom对象和jquery对象的区别及相互转换

姓蔡小朋友

已于 2022-10-12 20:59:03 修改

阅读量443

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-09-02 21:00:14 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126670385

版权

jQuery 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

一、dom对象和jquery对象区别：

使用JavaScript语法创建的对象叫dom对象。
例如：var obj = document.getElementById("txt1");
使用jquery语法表示的对象叫jquery对象，注意：jquery对象都是数组。
例如：var jobj = $("#txt1");

二、dom对象和jquery对象互相转换：

为什么要进行转换：
为了使用不同对象的方法，如果希望使用dom对象的方法需要转dom对象，如果想使用jquery库的内容，需要转jquery对象。
转换方式：

dom对象转jquery对象：$(dom对象)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js">	</script>
		<script type="text/javascript" >
			function btnClick(){
				//dom对象
				var obj = document.getElementById("btn");
				alert("使用dom对象的属性"+obj.value);
				//dom对象转jquery对象，使用jquery库中的函数,获取value值
				var $jobj = $(obj);
				alert($jobj.val());
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="单击按钮" id="btn" onclick="btnClick()" />
	</body>
</html>

jquery对象转dom对象：jquery对象是数组，从数组中获取的第一个对象就是dom对象：jquery对象[0]或jquery对象.get(0)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.js">	</script>
		<script type="text/javascript" >
			function btnClick(){
				//$("#text")这个jquery对象转dom对象，因为我们需要dom对象的value属性
				var obj = $("#text")[0];
				//或使用$("#text").get(0);
				alert(obj.value);
			}
			
		</script>
	</head>
	<body>
		<input type="button" value="获取文本框内容" id="btn" onclick="btnClick()" />
		<input type="text" id="text"  />
	</body>
</html>