本文目录

  • 1. 元素
  • 2. 内容、值、属性
  • 3. 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>

输出结果如图：

jQuery 获取元素循环 jquery获取元素值的方法_attr