所谓的DOM操作是指对标签的内容进行添加,修改或删除。例如有个HTML标签如下,则“你好”就是<div>标签的内容部分。
<div>你好</div>
了解了DOM操作的控制对象后,接着就来看看jQuery中有哪些可以帮助开发人员控制这个区块。
{函数html}
此函数类似javascript中的innerHTML功能,可以直接获取或设置标签的内容。
//获取<div>标签的HTML内容
$(div).html();
//设置<div>标签的HTML内容
$(div).html("hello");
//得到结果
<div>hello</div>
{函数append,prepend}
这两种函数具备插入的功能,可以保留原有的标签内容的情况下,在原内容的后面(append)或前面(prepend)插入新的内容。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p>
加入函数append
<script>
$("p").append("<b> I am Tom</b>");
</script>
</body>
</html>
接下来再示范使用prepend函数插入新的标签内容的做法,请比较加亮的部分来观察与append函数的差异。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p>
加入函数preppend
<script>
$("p").prepend("<b> I am Tom</b>");
</script>
<!--得到结果是<p><b>I am Tom</b>hello</p>-->
</body>
</html>
{函数before,after}
此组函数同样也是插入功能,但是其插入的位置是在所选标签的“外面”,因此可称为“外部插入”。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p>
加入函数before
<script>
$("p").before("<b> I am Tom</b>");
</script>
<!--得到结果是<b>I am Tom</b><p>hello</p>-->
</body>
</html>
从函数before的效果便可看出“外部插入”的意义,我们所添加的内容出现在<p>标签的外面。再来看看after的效果:
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p>
加入函数after
<script>
$("p").after("<b> I am Tom</b>");
</script>
<!--得到结果是<p>hello</p><b>I am Tom</b>-->
</body>
</html>
函数wrap
此函数可声明一个新标签,并将原有的标签内容包括在新标签里面。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p>
加入函数wrap
<script>
$("p").wrap("<div></div>");
</script>
<!--得到结果是<div><p>hello</p></div>-->
</body>
</html>
函数empty,remove
此组函数可以删除标签的内容,但是删除的方法稍有些差异,函数empty可删除指定标签的内容;函数remove则是将整个标签删除。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p><b>I am Tom</b>
加入函数empty
<script>
$("p").empty();
</script>
</body>
</html>
函数empty把<p>标签的内容“hello”删除了,再来remove的效果,将会发现整个<p>都不见了。
<html>
<head>
<meta charset="utf-8"/>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js">
</script>
</head>
<body>
<!--原始<p>标签内容-->
<p>hello</p><b>I am Tom</b>
加入函数remove
<script>
$("p").remove();
</script>
</body>
</html>