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

最新推荐文章于 2022-03-11 20:26:22 发布

Owen William

最新推荐文章于 2022-03-11 20:26:22 发布

阅读量2.2k

点赞数

分类专栏： jQuery 文章标签： jquery web开发

本文链接：https://blog.csdn.net/owen_william/article/details/51339833

版权

jQuery 专栏收录该内容

11 篇文章 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.运行结果

Owen William

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery操作元素内容的相关方法

1.前言jQuery还提供了以下几个方法来访问或设置DOM元素的内容，包含访问或设置这些DOM元素的innerHTML属性、文本内容和value属性。 1) html():返回jQuery对象包含的第一个匹配DOM元素的HTML内容。2) html(val):设置jQuery对象包含的所有DOM元素的HTML内容。3) text():返
复制链接

扫一扫