[JavaScript知识库] jquery-210811-03---dom对象和jquery对象转换

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> jquery-210811-03---dom对象和jquery对象转换 -> 正文阅读

[JavaScript知识库]jquery-210811-03---dom对象和jquery对象转换

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>