jquery框架③——获取，修改值_jq 获取js修改后的值-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40877388/article/details/79566085

本文通过一个HTML页面展示了如何使用jQuery来获取和修改DOM元素的文本内容、表单值及属性。包括使用text(), html(), val()和attr()方法的具体应用案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、获取以及修改值--代码例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.0.min.js"></script>
<script type="text/javascript">
	$(function(){						//页面加载完毕，简写方式
		$("#button1").click(function()		//为id值为button1的注册点击事件
			alert($("#test").text());		//获取所选元素的文本内容
		});

		$("#button2").click(function(){		//为id值为button2的注册点击事件
			alert($("#test").html());		//获取所选元素的文本内容
		});

		$("#button3").click(function(){		//为id值为button3的注册点击事件
			alert($("#input").val());		//获取表单中的值
		});

		$("#button4").click(function(){		//为id值为button4的注册点击事件
			$("#input").attr("type","password");		//改变属性type的值为password
		});
		
	})
</script>
</head>
<body>

	<p id="test"><b>粗体</b>文本</p>
	<p>姓名：<input type="text" id="input" value="嘿嘿"></p>
	<button id="button1">测试text()</button>
	<button id="button2">测试html()</button>
	<button id="button3">测试val()</button>
	<button id="button4">测试attr()</button>

</body>
</html>

以上四个按钮，点击后出现的效果分别是：

测试text()的运行结果是：弹出对话框，并显示文字：粗体文本

测试html()的运行结果是：弹出对话框，并显示文字：粗体文本

测试val()的运行结果是：弹出对话框，并显示文字：嘿嘿

测试attr()的运行结果是：输入框中的嘿嘿，以黑点显示出来

总结：

1. text()：获取所选元素的文本内容。不获取标签效果，不获取标签本身。（粗体文本）
text(“hello”)：修改所选元素的文本内容为引号内的字段。

修改后的页面上不展示示标签效果，展示标签本身。（hello ）

2. html()：获取所选元素的内容，不获取标签效果，获取标签本身（ 粗体文本）
html(“hello”)：修改所选元素的文本内容为引号内的字段。

修改后的页面上展示标签效果，不展示标签本身，。（hello）

3. val()：获取表单字段的值
val(“hello”)：修改表单字段的值

4. attr(“type”) :获取引号内属性的值。
attr(“type”，“password”)：修改第一个参数的属性的值为第二个参数。