码迷,mamicode.com
首页 > Web开发 > 详细

jQuery操作元素内容的相关方法

时间:2016-05-13 04:21:50      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

1.前言

jQuery还提供了以下几个方法来访问或设置DOM元素的内容,包含访问或设置这些DOM元素的innerHTML属性、文本内容和value属性。

 

1)        html():返回jQuery对象包含的第一个匹配DOM元素的HTML内容。

2)        html(val):设置jQuery对象包含的所有DOM元素的HTML内容。

3)        text():返回jQuery对象包含的所有DOM元素的文本内容。

4)        text(val):设置jQuery对象包含的所有DOM元素的文本内容。

5)        val():返回jQuery对象包含的所有DOM元素的文本内容。

6)        val(val):为jQuery对象包含的第一个匹配的DOM元素的value值,实际上就是返回表单控件的value属性的值。

7)        val(Array<String>):为jQuery对象包含的所有DOM元素设置多个value属性值。主要用于操作复选框和允许多选的下拉列表框。

2.例子

下面的程序示范了操作元素内容的相关方法的用法。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="OwenWilliam" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 操作HTML内容的工具方法 </title>
</head>
<body>
<div></div><div></div>
<input id="book" name="book" type="text" /><br />
<input id="desc" name="desc" type="text" /><br />
<select id="gender">
	<option value="male">男人</option>
	<option value="female">女人</option>
</select><br />
<select id="publish" multiple="multiple">
	<option value="phei">电子工业出版社</option>
	<option value="tsinghua">清华大学出版社</option>
</select><br />
<script type="text/javascript" src="../jquery-1.8.0.js">
</script>
<script type="text/javascript">
// 设置body下的div元素的内容
$("body>div").html("Ajax");
// 设置所有input、select和textarea的值
$(":input").val("XML");
// 为所有的<select.../>元素设置value值
$("select").val(["female" , "tsinghua" , "phei"]);
// 仅获取jQuery元素的text部分,下面将输出Java
alert($("<div>java:<span>Java</span></div>").text());
</script>
</body>
</html>

3.运行结果

技术分享

jQuery操作元素内容的相关方法

标签:

原文地址:http://blog.csdn.net/owen_william/article/details/51339833

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!