JQ 获取跟设置内容 text() html() val()

JQ 获取和设置内容 text() html() val()
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<title>JQ 获得和设置内容 text() 和 html() 和 val()</title>
</head>
<body>
<p id="cont"><span>茶韵</span>阅谁问君诵,水落清香浮。</p>
<input type="text" id="input" value="input的值">
<button id="btnText">text()</button>
<button id="btnHtml">html()</button>
<button id="btnVal">val()</button>
<script src="jquery-1.10.1.min.js"></script> 
<script>
$(function(){
//	$("#btnText").click(function(){
//		alert($("#cont").text());
//		//茶韵阅谁问君诵,水落清香浮。
//	});
//	$("#btnHtml").click(function(){
//		alert($("#cont").html());
//		//<span>茶韵</span>阅谁问君诵,水落清香浮。
//	});
//	$("#btnVal").click(function(){
//		alert($("#input").val());
//		//input的值
//	});
	$("#btnText").click(function(){
		$("#cont").text("<span>域名</span>onestopweb.cn");
		alert($("#cont").html());
	});
	$("#btnHtml").click(function(){
		$("#cont").html("<span>域名</span>onestopweb.cn");
		alert($("#cont").html());
	});
	$("#btnVal").click(function(){
		$("#input").val("已经更新input的值");
		alert($("#input").val());
	});
})
</script>
</body>
</html>

 

效果图:

 

 

 

相关内容推荐