jquery操作内容的方法

107 阅读1分钟
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>操作内容的方法</title>
	</head>
	<body>
		<div id="d1"><p>哈哈</p></div>
		<input type="text" id="d2" value="嘿嘿" />
		<input type="button" id="dw" value="点击" />
		<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
		<script src="" type="text/javascript">
			document.getElementById("dw").onclick = function(){
				//相当于js的document.getElementById("d1").innerHTML
				var html = $("#d1").html();  //显示内容  <p>哈哈</p>  
				alert("html():"+html);
				//相当于document.getElementById("d1").innerHTML="嘻嘻";
				//var uphtml = $("#d1").html("嘻嘻"); //html("嘻嘻") 中的参数是用来修改值的
				
				//相当于js的document.getElementById("d1").innerText
				var text = $("#d1").text();  // 显示内容  哈哈
				alert("text():"+text);
				
				/* 要注意的是无论js的value属性还是jquery得val() 方法针对的都是input元素,
				   而不是div,span等等,想要获取他们的值需要用text()方法 */
				//document.getElementById("d2").value
				var val = $("#d2").val();//如果$("d2")显示 嘿嘿  如果$("d1")不显示内容
				alert("val()"+val);
			}
			
		</script>
	</body>
</html>