理解jquery设计思想
记住大部分jquery API的使用
中文： http://www.css88.com/jqapi-1.9/
prepend、append、appendTo、prependTo的用法
效果预览：http://runjs.cn/detail/vwfyfjza
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div.div{border: 1px solid red;}
p{color:green;}
h1{color:darkgoldenrod;}
input{
display: block;
margin-bottom: 4px;
}
</style>
</head>
<body>
<div class="main">
<div class="div"><span>div</span></div>
<p>p标签</p>
</div>
<input type="button" value="重置 " id="reset"/>
<input type="button" value="append--把p标签移动到div标签里 ---实则为移动元素" id="btn1"/>
<input type="button" value="append--复制p标签到div标签里，原来的标签还保留着(克隆)" id="btn2"/>
<input type="button" value="appendTo--将p标签追加到div元素 ---实则为移动元素" id="btn3"/>
<input type="button" value="appendTo--新建元素p追加到div中的元素集合内部的最后面" id="btn4"/>
<input type="button" value="prependTo--将新建的p元素插入到div中的元素集合内部的最前面" id="btn5"/>
<input type="button" value="prepend--将新建的h1插入到div中的元素集合内部的最前面" id="btn6"/>
<input type="button" value="prepend--将已有的p标签插入到div中的元素集合内部的最前面 -- 实则为移动元素" id="btn7"/>
</body>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
$(function(){
var str = $(‘.main‘).html();
$("#reset").click(function(){
$(‘.main‘).html(str);
})
$("#btn1").click(function(){
//把p标签移动到div标签里
$(‘.div‘).append( $(‘p‘));
})
$("#btn2").click(function(){
//只是复制一份到div标签里，原来的标签还保留着(克隆)
$(‘.div‘).append( $(‘p‘).clone(true))
})
$("#btn3").click(function(){
//将p追加到div元素 ---实则为移动元素
$(‘p‘).appendTo($(‘.div‘));
})
$("#btn4").click(function(){
//新建元素p追加到div元素中
$(‘<p>新建元素p追加到div中的元素集合内部的最后面</p>‘).appendTo($(‘.div‘));
})
$("#btn5").click(function(){
//将新建的p元素插入到div中的元素集合内部的最前面
$(‘<p>将新建的p元素插入到div中的元素集合内部的最前面</p>‘).prependTo($(‘.div‘));
})
$("#btn6").click(function(){
//将新建的h1插入到div中的元素集合内部的最前面
$(‘.div‘).prepend(‘<h1>将新建的h1插入到div中的元素集合内部的最前面</h1>‘); //值得注意的是prepend函数后面的参数是内容，不是对象。而prependTo函数前后都是对象。
})
$("#btn7").click(function(){
//将已有的p元素插入到div中的元素集合内部的最前面 -- 实则为移动元素
$(‘.div‘).prepend($(‘p‘));
})
})
</script>
</html>
时间： 2024-11-01 11:07:18