Jquery获取与设置属性-白红宇的个人博客

Jquery获取与设置属性

发布日期：2021-05-07 22:02:29 浏览次数：21 分类：原创文章

本文共 2177 字，大约阅读时间需要 7 分钟。

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>

上一篇：spring中的表单提交问题

下一篇：Jquery使用需要下载的文件

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章