JavaScript和jQuery对象之间的转换_jquerye和js如何转换-程序员宅基地

JavaScript和jQuery对象之间的转换

如何将JavaScript对象转化为jQuery对象

在学习JavaScript和jQuery后，再写代码时会将JavaScript的方法和jQuery的方法记混，比如JavaScript的添加内容方法对象.innerHTML属性，而在jQuery中时对象.html。那么在实际开发工作中如果想用JavaScript对象调用jQuery的属性和方法那么我们就需要将JavaScript对象转换为jQuery对象。

代码实现

function changeJS(){
    
				var div = document.getElementById("div1");
				//div.innerHTML = "JS成功修改了内容"
				//将JS对象转成JQ对象
				$(div).html("转成JQ对象来修改内容")
			}
	<body>
		<input type="button" value="JS修改div内容" onclick="changeJS()" />
		<input type="button" value="JQ方式修改div内容" id="btn2" />
		<div id="div1">
			这里的内容一会要被JS/JQ代码修改掉
		</div>
		
	</body>

如何将jQuery对象转化为JavaScript对象

上面演示了JavaScript对象转换为jQuery对象，接下来演示jQuery对象转换为JavaScript。

代码实现

$(function(){
    
				//给按钮绑定事件
				$("#btn2").click(function(){
    
					//找到div1
//					$("#div1").html("JQ方式成功修改了内容");
					//将JQ对象转成JS对象来调用
					var $div = $("#div1");
//					var jsDiv = $div.get(0);
					var jsDiv = $div[0];
					jsDiv.innerHTML="jq转成JS对象成功";
				});
			});
<body>
		<input type="button" value="JS修改div内容" onclick="changeJS()" />
		<input type="button" value="JQ方式修改div内容" id="btn2" />
		<div id="div1">
			这里的内容一会要被JS/JQ代码修改掉
		</div>
		<div id="div1">
			这里的内容一会要被JS/JQ代码修改掉1111
		</div>
	</body>

总结

JavaScript和jQuery对象的转换在实际开发中虽然很少遇到，但有时候JavaScript和jQuery对象属性记混了，就可以尝试用这种方法解决。

本文链接：https://blog.csdn.net/weixin_43438913/article/details/100034324

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Pandas对行/列求和_pandas对具体列求和-程序员宅基地

文章浏览阅读5.3k次，点赞3次，收藏18次。Pandas对行/列求和_pandas对具体列求和

Visio--用例图、类图、顺序图、活动图_visio画用例图-程序员宅基地

文章浏览阅读1.9w次，点赞32次，收藏228次。做个小结。_visio画用例图

程序员的路----程序员一定要仔细看_程序员的道路-程序员宅基地

文章浏览阅读2.2k次。在网上看到的恶搞程序员的图片，实在是搞笑。看一次笑一次！程序猿的十年他不是乞丐，请尊称他为程序猿。对，他就是程序猿！其实，你们看到的不是僵尸，他们都是苦逼的程序猿！这不是恶搞的，是一个真实的故事！看他的拐杖，其实也挺可怜的！不知是不是敲代码敲多了，把脚敲颓了！_程序员的道路

从Atlas到Microsoft ASP.NET AJAX（6） - Networking, Application Services-程序员宅基地

文章浏览阅读42次。NetworkingCalling Web Service Methods from Script　　为了简化Web Services方法调用，客户端代理的设计被改变了，它在方法调用和回调函数设置方面提供了强大的灵活性。　　下面的例子展示了CTP版本中Web Services方法的客户端调用，以及回调函数的使用方式。第一个例子展示了在CTP版本中Web ..._.net6 applicationservices

一文带你了解socket网络编程以及详解过程和原理_socket编程-程序员宅基地

文章浏览阅读1.1w次，点赞42次，收藏178次。Socket（套接字）是计算机网络编程中的一种抽象概念，它提供了在网络上进行通信的接口。通过使用 Socket，可以在不同计算机之间建立连接，并进行数据的传输和交换。通过 Socket，客户端可以与服务器建立连接并发送请求，服务器接收请求并返回响应。通过 Socket，可以在多个用户之间实现实时的文字、音频或视频通信。可以使用 Socket 在不同计算机之间传输文件，如上传和下载文件。可通过 Socket 在远程计算机上执行指令或操作。_socket编程

nodejs第三方模块 express框架传参_nodejs express 模块间参数传递-程序员宅基地

文章浏览阅读413次。nodejs第三方模块 express框架传参get接口动态参数以这个举例 http://localhost:8001/edit/124其中，/124传递的id值124就是动态参数服务器通过req.params获取app.get("/edit/:id",(req,res)=>{ console.log(req.params) res.send("发送成功")})这个在我们删除和编辑数据的时候最常用，根据指定的id删除内容，以及编辑内容时的数据回显。查询字符串参数_nodejs express 模块间参数传递

随便推点

计算机考研408每日一题 day78_命中率高且电路实现简单的cache内存映射方式-程序员宅基地

文章浏览阅读392次。对于二叉排序树，下面的说法 ___是正确的。（华南理工大学 2006年）设备驱动程序在读写磁盘数据时一般釆用下列哪种I/O方式？（中国科学院大学 2018）下列___交换技术是独占信道工作方式。（中南大学 2006年）命中率高且电路实现简单的Cache 与内存映射方式是___映射方式。（中国科学院大学 2015）_命中率高且电路实现简单的cache内存映射方式

Unhandled exceptions: java.lang.IllegalAccessException, java.lang.reflect.InvocationTargetException_unhandled exceptions: java.lang.instantiationexcep-程序员宅基地

文章浏览阅读3.2k次。可能是没有异常处理，只需要加上throws Exception就解决问题了。_unhandled exceptions: java.lang.instantiationexception, java.lang.illegalacc