Jquery对象与JS中的DOM对象转换

最新推荐文章于 2022-02-26 11:35:24 发布

ginger_mr

最新推荐文章于 2022-02-26 11:35:24 发布

阅读量97

点赞数

分类专栏： Callback

本文链接：https://blog.csdn.net/qq_40332952/article/details/104384742

版权

Callback 专栏收录该内容

51 篇文章 2 订阅

订阅专栏

Jquery对象与JS中的DOM对象转换

注意：JQ对象只能操作JQ里面的属性和方法
JS对象只能操作JS里面的属性和方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script src="js/jquery-1.8.3.js"></script>
	<script>
		function JSWrite(){
			//document.getElementById("span1").innerHTML="方方哒!";
			//js中的DOM对象也不能调jquery中的方法
			//document.html("胖胖哒!");
			-----------------------------------------------
			//将js中DOM对象转为jquery对象
			var spaEle = document.getElementById("span1");
			$(spaEle).html("美美哒!");
		}
		
		$(function(){
			//在jquery加载事件里面可以写javascript代码
			/*document.getElementById("but1").onclick =function(){
				document.getElementById("span1").innerHTML="乱乱哒!";
			}*/
			
			$("#but1").click(function(){
				//$("#span1").html("疯疯哒!");
				//jquery对象不能调js中DOM对象方法
				//$("#span1").innerHTML="么么哒!"
				//如果强行用jquery对象调js中DOM对象方法
			-----------------------------------------------	
				//将jquery对象转为js中DOM对象方式一
				$("#span1").get(0).innerHTML="疯疯哒!"; 为什么是get(0),可能标签有多个,拿第一个。
				//将jquery对象转为js中DOM对象方式二
				$("#span1")[0].innerHTML="懵懵哒!";
			});
			
		});
	</script>
	<body>
		<input type="button" value="JS写入" onclick="JSWrite()"/>
		<input type="button" value="JQ写入" id="but1" /><br/>
		<span id="span1">ssss</span>
	</body>
</html>

ginger_mr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery对象与JS中的DOM对象转换

Jquery对象与JS中的DOM对象转换注意：JQ对象只能操作JQ里面的属性和方法JS对象只能操作JS里面的属性和方法。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script ...
复制链接

扫一扫