1. 程式人生 > >jQuery修改標籤的text顯示內容或value值

jQuery修改標籤的text顯示內容或value值

修改常見標籤元素:超連結<a></a>標籤、<span>標籤、<div>標籤以及form表單常用input標籤內容。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery 測試</title>

<script type="text/javascript" src="jquery-1.8.3.min.js"></script>

</head>
<body>

<div>
jquery修改a標籤的href連結和文字,先點選下面連結<br />然後點選"改變"按鈕,然後再點選一次下面的連結,注意兩次開啟頁面的不同:<br />
A<a href="http://i.firefoxchina.cn/" id="a1">原文</a> 
<input type="button" value="改變A" id="a11" /><p></p>

Span<span id="span1">原文</span> 
<input type="button" value="改變span" id="span11" /><p></p>

Div<div id="div1" target="_blank">原文</div> 
<input type="button" value="改變DIV" id="div11" />
</div>
<p></p>
input<input type="text" name="text1" id="text1" value="111">
<input type="button" value="改變input" id="text11" /><p></p>

textarea <input type="textarea" name="textarea1" id="textarea1" value="111">
<input type="button" value="改變textarea" id="textarea11" /><p></p>

<input type="button" value="改變button" id="button11" /><p></p>
<script type="text/javascript">
$("#a11").bind("click",
	function (){
		$('#a1').attr('href','http://www.baidu.com'); 
		alert("改變了超連結連結地址")
		$("#a1").text('首頁1');
		alert("改變顯示的內容1")
		$("#a1").html('首頁2');
		alert("改變顯示的內容2")
	})
$("#span11").bind("click",
	function (){
		$("#span1").html('首頁');
		alert("改變顯示內容")
		$("#span1").text('首頁');
	})
$("#div11").bind("click",
	function (){
		$("#div1").html('首頁1');
		alert("改變顯示內容1")
		$("#div1").text('首頁2');
		alert("改變顯示內容2")
	})
$("#text11").bind("click",
	function (){
		$("#text1").val('首頁');
	})
$("#textarea11").bind("click",
	function (){
		$("#textarea1").val('首頁');	
	})
$("#button11").bind("click",
	function (){
		$("#button11").val('首頁');	
	})		

</script>

</body>
</html>
附原始碼下載:原始碼下載

解壓後用瀏覽器開啟即可。