JavaScript对象与JQuery对象及其相互转换

禾南大木呈

已于 2022-05-17 08:44:00 修改

阅读量438

点赞数 1

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

于 2022-05-12 22:02:02 首次发布

本文链接：https://blog.csdn.net/m0_46160024/article/details/124741041

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>JavaScript对象与JQuery对象初探</title>
	<script type="text/javascript" src="jquery-3.6.0/jquery-3.6.0.js"></script>
</head>
<body>
	<input type="button" id="inputID" name="btn" value="普通按钮">
	<div id="divID">Hello World!</div>
	<script type="text/javascript">
		/* 
			一、JavaScript对象（下文简称为JS对象） 
		*/
		// 通过id属性值获取JS对象
		var inputElement = document.getElementById('inputID')
		// 直接在控制台打印JS对象inputElement，输出:
		// <input type="button" id="inputID" name="btn" value="普通按钮">
		console.log(inputElement)
		// 通过访问属性的方式获取inputElement中的value属性值，并输出
		console.log(inputElement.value) // 普通按钮
		/*
			二、JQuery对象
				为了显式区分JS对象与JQuery对象，
				一般地，习惯在JQuery对象的名称前加上dollar符“$”
		*/
		// 通过id属性值获取JQuery对象
		var $inputElement = $('#inputID')
		// 直接在控制台打印JQuery对象$inputElement，输出:
		// jQuery.fn.init(1)
		// 根据输出结果可以观察到，JQuery对象$inputEelement
		// 实际上将JS对象inputEelement
		// 封装成了一个数组对象
		console.log($inputElement)
		// 可以通过该数组的索引得到JS对象
		// 直接在控制台打印该数组中的第一个元素
		// （即索引为0的那个元素）,输出：
		// <input type="button" id="inputID" name="btn" value="普通按钮">
		console.log($inputElement[0])
		// 通过调用方法的方式获取$inputElement中的value属性值，并输出
		console.log($inputElement.val()) // 普通按钮
		/*
			三、JS对象与JQuery对象之间的相互转换
				1 JS对象-->JQuery对象
					语法：$(JS对象)
				2 JQuery对象-->JS对象，有两种方式：
					第一种方式的语法：JQuery对象[索引]
					第二种方式的语法：JQuery对象.get(索引)
		*/
		// 1 将JS对象转换成JQuery对象
		// 1.1 通过id属性值获取JS对象
		var divElement = document.getElementById('divID')
		// 1.2 将JS对象divElement包装成JQuery对象
		var $divElement = $(divElement)
		// 1.3 获取$divElement中的文本内容，并输出
		console.log($divElement.html()) // Hello World!
		// 2 将JQuery对象转换成JS对象
		// 2.1 通过id属性值获取JQuery对象
		// 注意：JQuery对象是一个数组，里面封装了相应的JS对象
		var $divElement02 = $('#divID')
		// 2.2 通过数组对象$divElement02的索引来获取JS对象
		var divElement02 = $divElement02[0]
		// 2.3 获取divElement02中的文本内容，并输出
		console.log(divElement.innerHTML) // Hello World!
		/*
			注意：
				(1) JS对象一般通过访问属性的方式来获取属性值，
					而JQuery对象一般通过调用方法的方式来获取属性值
				(2) JS对象不能使用属于JQuery对象的API，
					JQuery对象也不能使用属于JS对象的API
		*/
		// 示例1 JS对象调用JQuery对象的方法，会报错！ 
		var inputElement02 = document.getElementById('inputID')
		// 报错提示：Uncaught TypeError: inputElement02.val is not a function
		// console.log(inputElement02.val())
	</script>
</body>
</html>