jQuery - HTML DOM 操作（一）
2016-08-07 本文已影响76人
AshengTan
jQuery 中提供了一系列的 HTML DOM 操作的方法，比起原生 JavaScript 的 DOM 操作，显得更加地简便。
本文目录：
- 设置或获取内容；
- 设置或获取属性。
设置或返回内容
jQuery 中提供了 <code>html()</code>、<code>tetx()</code>、<code>val()</code> 这三个方法，来设置或返回 HTML 元素的内容。
html()
设置或返回所选元素的内容（包括 HTML 标签），相当于原生 JavaScript 中的 innerHTML。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置或返回内容</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<p id="p1">这是一个段落。</p>
<p id="p2">这是一个段落。</p>
</div>
<button id="btn1">获取内容</button>
<button id="btn2">设置内容</button>
<script>
$(function () {
// 设置 btn1 点击事件
$("#btn1").click(function () {
// 获取内容
alert($("div").html());
});
// 设置 btn2 点击事件
$("#btn2").click(function () {
// 设置内容
$("#p1").html("<b>改变内容</b>");
$("#p2").html("改变内容");
});
});
</script>
</body>
</html>
效果演示：
html().gif
text()
设置或返回所选元素的内容，相当于原生 JavaScript 中的 innerText。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置或返回内容</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<div>
<p id="p1">这是一个段落。</p>
<p id="p2">这是一个段落。</p>
</div>
<button id="btn1">获取内容</button>
<button id="btn2">设置内容</button>
<script>
$(function () {
// 设置 btn1 点击事件
$("#btn1").click(function () {
// 获取内容
alert($("div").text());
});
// 设置 btn2 点击事件
$("#btn2").click(function () {
// 设置内容
$("#p1").text("<b>改变内容</b>");
$("#p2").text("改变内容");
});
});
</script>
</body>
</html>
效果演示：
text().gif
从上面两个示例就可以看出 <code>html()</code> 和 <code>text()</code> 两者的区别，<code>html()</code> 可以获取到标签，而 <code>text()</code> 不行；同样，使用 <code>html()</code> 可以往 HTML 文档里写入标签，而 <code>text()</code> 则不行，当你试图写入标签时，其实写入的只是普通的字符串。
val()
设置或返回所选置或返回表单字段的值，相当于原生 JavaScript 中的 value。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置或返回内容</title>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<input id="ip1" type="text" value="value">
<input id="ip2" type="text">
<button id="btn1">获取内容</button>
<button id="btn2">设置内容</button>
<script>
$(function () {
// 设置 btn1 点击事件
$("#btn1").click(function () {
// 获取内容
alert($("#ip1").val());
});
// 设置 btn2 点击事件
$("#btn2").click(function () {
// 设置内容
$("#ip2").val("testtesttest");
});
});
</script>
</body>
</html>
效果演示：
val().gif
设置或获取属性
- 设置或获取属性有两个方法，分别是 <code>attr()</code> 和 <code>prop()</code>，两者的区别：
- 对于 HTML 元素本身就带有的固有属性来说，使用 <code>prop()</code>；
- 对于 HTML 元素的自定义属性来说，使用 <code>attr()</code>；
- 添加属性名称该属性就会生效时使用 <code>prop()</code>；
- 带有 <code>true</code> 和 <code>false</code> 两个属性值的属性使用 <code>prop()</code>；
- 其他则使用 <code>attr()</code>；
- 更多请看 attr() - 愚人码头 以及 prop() - 愚人码头；
-
官方建议：
attr_prop.png
- 删除属性使用 <code>removeAttr()</code> 和 <code>removeProp()</code>。
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>设置或返回属性</title>
<script src="js/jquery-1.8.3.js"></script>
<style>
.p {
background-color: cornflowerblue;
}
</style>
</head>
<body>
<p class="p"><a id="a1" href="http://www.runoob.com" target="_blank">菜鸟教程/w3school</a></p>
<button id="btn1">获取属性</button>
<button id="btn2">更改链接地址</button>
<button id="btn3">设置多个属性</button>
<button id="btn4">删除属性</button>
<script>
$(function () {
// 返回元素的属性：attr("propertyName");
$("#btn1").click(function () {
alert($("#a1").attr("href"));
});
// 设置单个属性：attr("propertyName","propertyValue");
$("#btn2").click(function () {
$("#a1").attr("href", "http://www.w3school.com.cn/");
});
// 设置多个属性：attr({"propertyName1":"propertyValue1","propertyName2":"propertyValue2",...});
$("#btn3").click(function () {
$("#a1").attr({
"class": "link",
"title": "a"
});
});
// 删除属性：removeAttr("propertyName");
$("#btn4").click(function () {
$(".p").removeAttr("class");
});
});
</script>
</body>
</html>
效果：
属性.gif
参考资料：
- [jQuery函数attr和prop的区别](http://zhidao.baidu.com/link?
url=MHDmtUt3V00mSn0MkCEdMtl3GnOQmlJ3rgO4XWqvt1RG8sO6-
ZM8grtzDo1N38lU0Cfcb3EnEZSDWCzgHCfMT5INAGS5_Amn-Ek_KKkDjy) - jQuery API中文文档 - 愚人码头
- jQuery 中 attr() 和 prop() 方法的区别
- jquery中prop()方法和attr()方法的区别浅析
