Jquery获取和修改dom元素的属性值

最新推荐文章于 2023-04-12 11:34:45 发布

原创最新推荐文章于 2023-04-12 11:34:45 发布 · 3.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

Jquery学习专栏收录该内容

22 篇文章

订阅专栏

本文介绍并演示了jQuery中text(), html(), 和 val() 方法的基本使用，通过实例展示了如何获取和设置DOM元素的内容。

获取内容的方式： - text()、html() 以及 val()

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

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.12.1.js"></script>
	</head>

	<body>
		<script>
			function showInputVal() {
				value = $("#input").val();
				alert(value);
			}

			function changeInputVal() {
				value = $("#input").val("毛毛");
				alert(value);
			}

			function showtext() {
				value = $("#div1").text();
				alert(value);
			}

			function showhtml() {
				value = $("#div1").html();
				alert(value);
			}

			function getAttr() {
				value = $("#herf1").attr("href");
				alert(value);
			}
		</script>
		<div id="div1">第一个<strong>div</strong></div>
		<input type="button" value="showtext" onclick="showtext()" />
		<input type="button" value="showhtml" onclick="showhtml()" />
		<br />
		<input id="btn1" type="button" value="获取属性attr" onclick="getAttr()" />
		<a href="index.html" id="herf1">超链接</a>
		<p>Name:
			<input type="text" id="input" value="雷盼">
		</p>
		<input type="button" value="showInputValue" onclick="showInputVal()" />
		<input type="button" value="changeInputValue" onclick="changeInputVal()" />
	</body>

</html>