jQuery中的.html() .text() .val() .attr()获取元素内容、值、属性

1. 元素

所谓元素指的是一个html文档中一个闭合标签,比如body元素指的就是从<body>到</body>的所有代码。

2. 内容、值、属性

举个例子

<div id="div1">
	请输入:<input type="text" value="hello"/>
</div>

这其中,div元素的内容就是请输入:<input type="text" value="hello"/>,div有一个属性为id,该属性的值为div。
input元素有一个值为hello。

这样获取元素的内容、属性、值的jQuery方法分别为.html()、.attr()、.val(),还有一个特殊的.text()方法,用来获取元素内容中的文本部分,例如div1的text()即为请输入

3. html() text() val() attr()用法

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery.min.js"></script>
<title></title>
</head>
<body>
	<div id="div1">
		<input id="text1" type="text" value="hello input value"/>
		hello div1 text
		<select id="select1">
			<option>math</option>
			<option>english</option>
		</select>
	</div>
	div1.html()<br/>
	<span id="span1"></span><br/>
	div1.text()<br/>
	<span id="span2"></span><br/>
	div1.val()<br/>
	<span id="span3"></span><br/>
	text1.val()<br/>
	<span id="span4"></span><br/>
	text1.attr("type")<br/>
	<span id="span5"></span><br/>
	select1.val()<br/>
	<span id="span6"></span><br/>
	<script>
		$("#span1").html($("#div1").html());
		$("#span2").html($("#div1").text());
		$("#span3").html($("#div1").val());
		$("#span4").html($("#text1").val());
		$("#span5").html($("#text1").attr("type"));
		$("#span5").html($("#text1").attr("type"));
		$("#span6").html($("#select1").val());
	</script>
</body>
</html>

输出结果如图:
这里写图片描述


如有问题请扫码联系我
在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页