jQuery修改标签的text显示内容或value值

最新推荐文章于 2024-07-30 03:35:57 发布

pan_joy

最新推荐文章于 2024-07-30 03:35:57 发布

阅读量3.5w

点赞数

分类专栏：前端文章标签： jquery修改form表单内容 jquery修改标签text值 jquery修改标签value值修改value值修改text值

本文链接：https://blog.csdn.net/a491857321/article/details/51780674

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

修改常见标签元素：超链接<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>

附源代码下载：源码下载。

解压后用浏览器打开即可。