Jquery获取与设置属性

最新推荐文章于 2023-12-11 13:43:16 发布

yuzhang_zy

最新推荐文章于 2023-12-11 13:43:16 发布

阅读量2k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/qq_39445165/article/details/86515092

版权

jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. jQuery 拥有可操作 HTML 元素和属性的强大方法

获得内容 - text()、html() 以及 val()

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

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

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

val() - 设置或返回表单字段的值

注意他们是有区别的，text获取的是元素的文本内容，html获取的是所选择元素里面的内容，val获取的是表单的文本内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<p class="p">我是一个p标签</p>
		<div class="div1" style="width: 100px; height: 100px; background: skyblue;">
			<p>div1里面的文本内容</p>
			<span>div1里面的span文本内容</span>
		</div>
		<input type="text" value="username" name="username" class="username"/><br />
		<button id="btn1" >获取所选元素的内容</button>
		<button id="btn2" >获取所选元素的文本内容</button>
	</body>
	<script type="text/javascript">
		$("#btn1").click(function(){
			alert($(".p").html());
			alert($(".div1").html());
		});
		$("#btn2").click(function(){
			alert($(".p").text());
			alert($(".div1").text());
		});
		alert($(".username").val());
	</script>
</html>

2. ①设置内容 - text()、html() 以及 val()

text() - 设置所选元素的文本内容

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

val() - 设置表单字段的值

下面是具体的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	</head>
	<body>
		<p class="p"></p>
		<div class="div1" style="width: 100px; height: 100px; background: skyblue;">
		</div>
		<input type="text" name="username" class="username"/><br />
		<button id="btn1" >设置所选元素的内容</button>
		<button id="btn2" >设置所选元素的文本内容</button>
		<button id="btn3" >设置所选元素的文本内容</button>
	</body>
	<script type="text/javascript">
		$("#btn1").click(function(){
			$(".div1").html("<p>div1里面的文本内容</p>");
		});
		
		$("#btn2").click(function(){
			$(".p").text("我是一个p标签");
		});
		
		$("#btn3").click(function(){
			$(".username").val("username");
		});
	</script>
</html>

②Jquery attr() 方法也用于设置/改变属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="jquery-3.3.1.js" ></script>
	</head>
	<body>
		<input type="text" class="username"/>
		<button id="btn1">使用attr来设置属性</button>
	</body>
	<script type="text/javascript">
		$("#btn1").click(function(){
			$(".username").attr("value", "username");
		});
	</script>
</html>

yuzhang_zy

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery获取与设置属性

1. jQuery 拥有可操作 HTML 元素和属性的强大方法获得内容 - text()、html() 以及 val()三个简单实用的用于 DOM 操作的 jQuery 方法：text() - 设置或返回所选元素的文本内容html() - 设置或返回所选元素的内容（包括 HTML 标记）val() - 设置或返回表单字段的值注意他们是有区别的，text获取的是元素的文...
复制链接

扫一扫