JQuery获取元素的值与属性

最新推荐文章于 2023-04-25 10:49:25 发布

xiaokangmiclong

最新推荐文章于 2023-04-25 10:49:25 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/xiaokangmiclong/article/details/50634307

本文介绍了四个简单实用的jQuery方法：text()、html()、val()和attr()，分别用于获取或设置文本内容、HTML内容、表单元素的值及元素属性值，并通过实例演示了如何使用这些方法。

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

四个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置/返回所选元素的文本内容；

html() - 设置/返回所选元素的内容（包括 HTML 标记）；

val() - 设置/返回表单元素的value值；

attr()- 设置/返回元素的某一属性值。

返回例子：

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
alert("Text: " + $("#test").text());
});
$("#button2").click(function(){
alert("Html: " + $("#test").html());
});
$("#button3").click(function(){
alert("Value: " + $("#input").val());
});
$("#button4").click(function(){
alert("Value: " + $("#test").attr("id"));
});
});
</script>
</head>

<body>
<p id="test" class="class">请输入你的<b style="color:red">名字</b>：
<input type="text" id="input" value="Michael">
</p>
<button id="button1">显示文本</button>
<button id="button2">显示 HTML</button>
<button id="button3">显示Value</button>
<button id="button4">显示id属性的值</button>
</body>

</html>