<html>
<head>
<title>操作文档结构</title>
<meta charset="UTF-8"/>
<!--引入jQuery文件-->
<script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
<!--
操作文档结构学习:
获取元素对象
1、内部插入
append("内容") 将指定的内容追加到对象的内部
appendTo(元素对象或者选择器) 将制定的元素对象追加到指定的对象内容
prepend() 将指定的内容追加到对象的内部的前面
prependTo() 将制定的元素对象追加到指定的对象内容前面
2、外部插入
after 将指定的内容追加到指定的元素后面
before 将指定的内容追加到指定的元素前面
insertAfter 把所有匹配的元素插入到另一个、指定的元素元素集合的后面
insertBefore 把所有匹配的元素插入到另一个、指定的元素元素集合的前面。
3、包裹
4、替换
5、删除
empty()
-->
<!--声明js代码域-->
<script type="text/javascript">
//内部插入
function testAppend(){
//获取元素对象
var div=$("#showdiv");
//使用内部插入
div.append("<i>,饭</i>");
}
function testAppendTo(){
//获取元素对象
var div=$("#showdiv");
//使用appendTo()
$("#u1").appendTo(div);
}
function testPrepend(){
//获取元素对象
var div=$("#showdiv");
//使用prepend()
div.prepend("<i>你好,</i>");
}
//外部插入
function testAfter(){
//获取元素对象
var div=$("#showdiv");
//使用after外部插入
div.after("<b>今天天气不错,适合学习</b>");
}
function testBefore(){
//获取元素对象
var div=$("#showdiv");
//使用before外部插入
div.before("<b>今天天气不错,适合学习</b>")
}
function testEmpty(){
$("#showdiv").empty()
}
</script>
<style type="text/css">
#showdiv{
width: 300px;
height: 300px;
border: solid 3px orange;
}
</style>
</head>
<body>
<h3>操作文档结构</h3>
<input type="button" name="" id="" value="测试append" onclick="testAppend()" />
<input type="button" name="" id="" value="测试appenTo" onclick="testAppendTo()" />
<input type="button" name="" id="" value="测试prepend" onclick="testPrepend()" />
<hr />
<input type="button" name="" id="" value="测试after" onclick="testAfter()" />
<input type="button" name="" id="" value="测试before" onclick="testBefore()" />
<input type="button" name="" id="" value="测试删除--empty()" onclick="testEmpty()" />
<hr />
<u id="u1">每天下午都是充斥着面包浓浓的香味</u>
<div id="showdiv">
<b>今天中午吃什么</b>
</div>
</body>
</html>
jQuery学习之操作文档结构
最新推荐文章于 2021-01-05 13:26:41 发布