jquery-210811-03---dom对象和jquery对象转换

白光一

于 2021-08-11 22:32:53 发布

阅读量133

点赞数

分类专栏： jquery 文章标签： jquery

白光一

本文链接：https://blog.csdn.net/FlyUp__/article/details/119618884

版权

jquery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

jquery-210811-03—dom对象和jquery对象相互转换

dom对象和jquery介绍
jqurey-test-04-01.html（dom对象转为jquery对象）
jqurey-test-04-02.html（jquery对象转为dom对象）

dom对象和jquery介绍

用 JavaScript 语法创建的对象叫做 JavaScript 对象，也叫做dom对象，js对象，
**JavaScript对象只能调用JavaScript 对象的 API。**
	var obj = document.getElementById("txt01"); ---> obj就是dom对象，也叫js对象。

用 JQuery 语法创建的对象叫做 JQuery 对象, 
**jQuery 对象只能调用 jQuery 对象的 API。**
jQuery 对象是一个数组。在数组中存放本次定位的 DOM 对象。
	var obj = ${"#txt01"};  --->  obj就是jquery对象，
							    它是一个数组，现在数组中就一个值。


JQuery对象与 JavaScript对象是可以互相转化的，
由于 Jquery 用起来更加方便，
我们都是将 JavaScript 对象转化成 Jquery 对象。
	dom对象转为jquery对象语法：
		${dom对象}
		
	jquery对象转为dom对象语法：
		从数组中获取第一个对象，第一个对象就是dom对象，
		使用[0] 或者 get{0} （下标的方法）

jqurey-test-04-01.html（dom对象转为jquery对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>dom对象转为jquery对象</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function btnClick(){
				// 获取dom对象
				var dom_obj = document.getElementById("btn");
				// alert(object.value);
				
				// 把dom对象转为jquery对象，使用jquery库中的函数
				var $jquery_obj = $(dom_obj);
				// val() ---> 调用jquery中的函数，获取value的值。
				alert($jquery_obj.val());
			}
			
		</script>
	</head>
	<body>
		<input type="button" id="btn" value="btn" onclick="btnClick()" />
	</body>
</html>

jqurey-test-04-02.html（jquery对象转为dom对象）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery对象转为dom对象</title>
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			function btnClick(){
				// 使用jquery语法获取dom对象，并转为dom对象，从数组中获取下标为0的dom对象。
				// var dom_obj = $("#txt")[0];
				var dom_obj = $("#txt").get(0);
				// alert(dom_obj.value);
				
				var count = dom_obj.value;
				dom_obj.value = count * count;
			}
			
		</script>
	</head>
	<body>
		<input type="text" id="txt" value="填写整数" /><br />
		<input type="button" id="btn" value="点击计算" onclick="btnClick()" />
	</body>
</html>