DOM对象与jQuery对象转换

最新推荐文章于 2022-03-22 16:17:37 发布

酷爱WAF哈狗帮

最新推荐文章于 2022-03-22 16:17:37 发布

阅读量250

点赞数

分类专栏： JavaWeb前端

本文链接：https://blog.csdn.net/HuashirenYty/article/details/102752740

版权

JavaWeb前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

domToJquery.html

<!DOCTYPE html>
<html>
  <head>
    <title>DOM与jQuery对象间的转换</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
	<script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
	
	<script type="text/javascript">
		//JS的DOM操作
		function write1() {
			document.getElementById("span1").innerHTML = "王淼M4A1！";
			//DOM对象也无法操作jQuery对象里面的属性和方法
			//document.getElementById("span1").html("FGXX");
			
			var spanEle = document.getElementById("span1");
			
			//将DOM对象转换成jQuery对象
			$(spanEle).html("人生无限挑战!");
		}
		
		$(function() {
			$("#btn").click(function() {
				//jQuery无法操作JS里面的属性和方法!
				//$("#span1").innerHTML = "诗仙李佳奇!"
				$("#span1").html("诗仙李佳奇!");
				
				//jQuery对象向DOM对象转换方式一
				$("#span1").get(0).innerHTML = "求生之路2!";
				
				//jQuery对象向DOM对象转换方式二
				$("#span1")[0].innerHTML = "被解救的姜戈";
			});
		});
	</script>
	
  </head>
  
  <body>
    		<input onclick="write1()" type="button" value="JS写入" />
    		<input id="btn" type="button" value="jQuery写入" />
    		<br>
    		班长:<span id="span1" style="color: orange;">wm1153!</span>
  </body>
</html>