Jquery文档处理的几种效果
Jquery文档处理的几种效果
<html><head><title>File</title><script type='text/javascript' src="jquery/jquery-1.3.1.js"></script><script language="javascript">$(document).ready(function(){/***在元素内部插入内容***/$("#SH").click(function(){$("#shp").append("<b>Hello</b>");});/***将内容添加到元素内部***/$("#atd").click(function(){$("#shp").appendTo("#atdDiv");});/***在元素的最前面插入内容***/$("#atp").click(function(){$("#prvDiv").prepend($("#preP"));});/***将内容插入在元素的最前面***/$("#atpt").click(function(){$("#preP").prependTo($("#prvDiv"));});/***将内容插入在元素之后***/$("#aft").click(function(){$("#aftDiv").after($("#aftP"));});/***将内容插入在元素之前***/$("#bef").click(function(){$("#aftDiv").before($("#aftP"));});/***将内容包裹在元素内部***/$("#wb").click(function(){$("#wp").wrap($("#wDiv"));});/***替换***/$("#replace").click(function(){$("#waitDiv").replaceWith($("#replaceDiv"));});/***清空***/$("#empty").click(function(){$("#emptyDiv").empty();});/***删除***/$("#remove").click(function(){$("#emptyDiv").remove();});/***复制***/$("#clone").click(function(){$("#cloneDiv").clone().insertAfter($("#cloneDiv"));});});</script><body><p id="shp">I would like to say: </p><input type="button" value="Say Hello" id="SH" /><br><br><br><div style="border:1px red solid" id="atdDiv">Is Nothing</div><input type="button" value="add to div" id="atd" /><br><br><br><div style="border:1px blue solid" id="prvDiv">Is Previous Div</div><p id="preP">Is Previous P</p><input type="button" value="add to previous" id="atp" /><input type="button" value="add to previous 2" id="atpt" /><br><br><br><div style="border:1px green solid" id="aftDiv">Is A Div<p id="aftP">Is A P</p></div><input type="button" value="add after" id="aft" /><input type="button" value="add before" id="bef" /><br><br><br><div style="border:1px pink solid;height:10px" id="wDiv"></div><p id="wp">Is A P</p><input type="button" value="wrap" id="wb" /><br><br><br><div style="border:1px black solid;height:10px" id="waitDiv">Waiting For Replace</div><div style="border:1px red solid;height:10px" id="replaceDiv">Replaced</div><input type="button" value="replace" id="replace" /><br><br><br><div style="border:1px red solid;height:10px" id="emptyDiv">Waiting For Delete</div><input type="button" value="empty" id="empty" /><input type="button" value="remove" id="remove" /><br><br><br><div style="border:1px red solid;height:10px;margin-bottom:10px" id="cloneDiv">Waiting For Clone</div><input type="button" value="clone" id="clone" /><br><br><br></body></html>