3.2.10: jQuery的DOM操作之设置和获取HTML、文本和值

最新推荐文章于 2024-04-25 20:22:26 发布

confirmAname

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量1.2k

点赞数

文章标签： html text val jQuery

本文链接：https://blog.csdn.net/confirmAname/article/details/17744235

版权

1. html()方法:

此方法类似于JavaScript中的innerHTML属性，可以用来读取或者设置某个元素中的html内容。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert($("p").html());
	});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>
</body>
</html>

如果需要设置某元素的html代码，也可以使用该方法，不过需要传入一个参数：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("p").html("<strong>你最喜欢的水果是?</strong>");
	});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>

2. text()方法：

次方法类似于JavaScript中的innerText属性，可以用来读取或者设置某个元素中的文本内容。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		alert($("p").text());
	});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"><strong>你最喜欢的水果是?</strong></p>
</body>
</html>

如果需要为某元素设置文本内容，那么需要传递一个参数：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("p").text("你最喜欢的水果是?");
	});
</script>
</head>
<body>
<p title="what kind of fruit do you like best?"></p>
</body>
</html>

3. val()方法：

此方法类似于JavaScript中的value属性，可以用来设置或获取元素的值。无论元素是文本框，下拉列表还是单选框，它都可以发回元素的值。如果元素为多选，则返回一个包含所有选择的值的数组。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$("#address").focus(function(){
			var txt_value=$(this).val();
			if(txt_value=="请输入邮箱地址"){
				$(this).val("");
			}
		});
		$("#address").blur(function(){
			var txt_value=$(this).val();
			if(txt_value==""){
				$(this).val("请输入邮箱地址");
			}
		});
		$("#pwd").focus(function(){
			var txt_value=$(this).val();
			if(txt_value=="请输入邮箱密码"){
				$(this).val("");
			}
		});
		$("#pwd").blur(function(){
			var txt_value=$(this).val();
			if(txt_value==""){
				$(this).val("请输入邮箱密码");
			}
		});
	});
</script>
</head>
<body>
<input type="text" id="address" value="请输入邮箱地址" style="color:gray"><br>
<input type="text" id="pwd" value="请输入邮箱密码" style="color:gray"><br>
<input type="button" value="登录">
</body>
</html>

通过上面的例子可以发现val()方法不仅能设置元素的值，还能获取元素的值。而且val()方法还有另外一个用处，就是它能使select，checkbox和radio相应的选项被选中，在表单操作中经常会用到。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="jQuery/jquery-1.10.2.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	
	});
</script>
</head>
<body>
<select id="single">
<option>选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
</select>

<select id="multiple" multiple="multiple" style="height:130px">
<option selected="selected">选择1号</option>
<option>选择2号</option>
<option>选择3号</option>
<option>选择4号</option>
<option selected="selected">选择5号</option>
</select>
<br>
<input type="checkbox" value="check1"/>多选1
<input type="checkbox" value="check2"/>多选2
<input type="checkbox" value="check3"/>多选3
<input type="checkbox" value="check4"/>多选4
<br>
<input type="radio" value="radio1"/>单选1
<input type="radio" value="radio2"/>单选2
<input type="radio" value="radio3"/>单选3
</body>
</html>

该网页中的一些元素是默认选中的，可以通过val()方法来改变它们的选中项。

<script type="text/javascript">
	$(document).ready(function(){
		$("#single").val("选择2号");
		$("#multiple").val(["选择2号","选择3号"]);
		$(":checkbox").val(["check2","check3"]);
		$(":radio").val(["radio2"]);
	});
</script>

效果如下：