jQuery DOM ?? ???() ? ???All()
??? ??? ??? ?? ??, ?? ?? ? ?? ??? ?????. ? ????? ?? ??? ??? ???. ??? ??
??? ???: $()? ???? ?? A? ????, replacementWith ???? ??? ??, ? ??? B(HTML ???, DOM ?? ?? jQuery ??)? ???? ??? ?? A
? ?????. ??? ?? ?????. HTML ??
<div>
<p>? ?? ??</p> <p>? ?? ??</p>
<p>? ?? ??</p>
< ;/div>
? ?? ??? ??? ??? ?????
$("p:eq(1)").replaceWith('<a style="color:red">??? ????? ? ?? ?? </a>')
jQuery? ?? ? ?? p ??? ????? ??? ???? ?????. ??? ??? ????
<div>
<p>? ?? ??</p> ; <a style="color:red">? ?? ??? ??? ????</a>'
<p>? ?? ??</p>
</div>
. replacementAll( target ) : ? ?? ??? ??? ???? ??? ?????.
.replaceAll()? .replaceWith()? ??? ??? ??? ??? ??? ??? ?????. ?? HTML ??? ???? ??? ???? ?????.
$('<a style ="color:red">? ?? ??? ?? ???</a>').replaceAll('p:eq(1)')
??:
replacementAll ()? .replaceWith()? ??? ??? ??? ????. ?? ??? ??? ??? ??? ?????
replacementWith()? .replaceAll() ???? ??? ??? ?? ??? ? ??? ???? ?????
replacementWith() ???? ???? ?? jQuery ???? ????? jQuery ??? ????? ?? ???? ??? ? ????
replacementWith() ????? ??? jQuery ??? ?? ? ??? ????, ?? ? ??? ???? ????. /replaceAll ???
?? ?? ?????.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
<style>
.right div {
background: yellow;
}
</style>
</head>
<body>
<h2>replaceWith()和replaceAll()</h2>
<div class="left">
<button class="bt1">點擊,通過replaceWith替換內(nèi)容</button>
<button class="bt2">點擊,通過rreplaceAll替換內(nèi)容</button>
</div>
<div class="right">
<div>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
</div>
<div>
<p>第四段</p>
<p>第五段</p>
<p>第六段</p>
</div>
</div>
<script type="text/javascript">
//只克隆節(jié)點
//不克隆事件
$(".bt1").click(function(){
//找到內(nèi)容為第二段的p元素
//通過replaceWith刪除并替換這個節(jié)點
$(".right > div:first p:eq(1)").replaceWith('<a style="color:red">replaceWith替換第二段的內(nèi)容</a>')
})
</script>
<script type="text/javascript">
//找到內(nèi)容為第六段的p元素
//通過replaceAll刪除并替換這個節(jié)點
$(".bt2").click(function() {
$('<a style="color:red">replaceAll替換第六段的內(nèi)容</a>').replaceAll('.right > div:last p:last');
})
</script>
</body>
</html>
