讲给后台程序员看的前端系列教程(54)——jQuery对象与JavaScript对象的转换

最新推荐文章于 2022-06-29 18:27:00 发布

谷哥的小弟

最新推荐文章于 2022-06-29 18:27:00 发布

阅读量537

点赞数 1

分类专栏：讲给后台程序员看的前端系列教程文章标签： jQuery 对象

本文链接：https://blog.csdn.net/lfdfhl/article/details/102654561

版权

讲给后台程序员看的前端系列教程专栏收录该内容

63 篇文章 45 订阅

订阅专栏

推翻自己和过往——自定义View系列教程(10篇)

走出思维困境，踏上精进之路——Android开发进阶精华录

讲给Android程序员看的前端系列教程(40集免费视频教程+源码)

版权声明

本文原创作者：谷哥的小弟
作者博客地址：http://blog.csdn.net/lfdfhl

虽然说jQuery是JavaScript框架，但是两者的对象却不一样；有时需将jQuery对象与JavaScript对象进行相互转换。

JavaScript对象转换为jQuery对象

语法如下：

jQuery对象=$(JavaScript对象);

jQuery对象转换为JavaScript对象

语法如下：

JavaScript对象=jQuery对象[index];

JavaScript对象=jQuery对象.get(index);

常用方式：

JavaScript对象=jQuery对象[0];

JavaScript对象=jQuery对象.get(0);

综合示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>jQuery对象与JavaScript对象的转换</title>
		<!--引入jquery文件 -->
		<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>		
	</head>
	<body>
		<h2 id="author" style="color: red;">本文作者：谷哥的小弟</h2>
        <h2 id="blog" style="color: red;">博客地址：http://blog.csdn.net/lfdfhl</h2>
		<p id="welcome">Hello jQuery</p>
		<p id="bye">Bye JavaScript</p>
		<script type="text/javascript">
			//利用document获取元素
			var javascriptWelcome=document.getElementById("welcome");
			var content=javascriptWelcome.innerHTML;
			console.log("content="+content);
			//将JavaScript对象转换为jQuery对象
			var jQueryWelcome=$(javascriptWelcome);
			content=jQueryWelcome.html();
			console.log("content="+content);
			console.log("----------------------");
			
			//利用jQuery获取对象
			var jQueryBye = $("#bye");
			content=jQueryBye.html();
			console.log("content="+content);
			//将jQuery对象转换为JavaScript对象
			var javascriptBye=jQueryBye[0];
			content=javascriptBye.innerHTML;
			console.log("content="+content);
			javascriptBye=jQueryBye.get(0);
			content=javascriptBye.innerHTML;
			console.log("content="+content);
			console.log("----------------------");
			
			// 将JavaScript对象转换为jQuery对象
			var javascriptH2=document.getElementsByTagName("h2");
			for (var i = 0; i < javascriptH2.length; i++) {
				var jQueryObj = $(javascriptH2[i]);
				console.log(jQueryObj.html());
			}
			console.log("----------------------");
			
			// 将jQuery对象转换为JavaScript对象
			var jQueryH2=$("h2");
			var javascriptH2First=jQueryH2[0];
			var javascriptH2Second=jQueryH2[1];
			console.log("javascriptH2First="+javascriptH2First.innerHTML+",javascriptH2Second="+javascriptH2Second.innerHTML);
			javascriptH2First=jQueryH2.get(0);
			javascriptH2Second=jQueryH2.get(1);
			console.log("javascriptH2First="+javascriptH2First.innerHTML+",javascriptH2Second="+javascriptH2Second.innerHTML);
		</script>
	</body>
</html>

在这里插入图片描述

谷哥的小弟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
讲给后台程序员看的前端系列教程(54)——jQuery对象与JavaScript对象的转换

虽然说jQuery是JavaScript框架，但是两者的对象却不一样；有时需将jQuery对象与JavaScript对象进行相互转换。
复制链接

扫一扫