DOM对象与jQuery对象转换

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/HuashirenYty/article/details/102752740

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 οnclick="write1()" type="button" value="JS写入" />
    		<input id="btn" type="button" value="jQuery写入" />
    		<br>
    		班长:<span id="span1" style="color: orange;">wm1153!</span>
  </body>
</html>

猜你喜欢

转载自blog.csdn.net/HuashirenYty/article/details/102752740