•clone():克隆匹配的 DOM 元素, 返回值为克隆后的副本. 但此时复制的新节点不具有任何行为.

•clone(true):复制元素的同时也复制元素中的的事件

•replaceWith(): 将所有匹配的元素都替换为指定的HTML 或DOM 元素

•replaceAll(): 颠倒了的replaceWith()方法.

•注意:若在替换之前,已经在元素上绑定了事件,替换后原先绑定的事件会与原先的元素一起消失

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript"> //测试使用 jQuery clone 方法: 复制节点 $(function(){ $("li").click(function(){ alert($(this).text()); }); //复制 #bj 节点, 并添加到 #rl 节点的后面 /* 1. clone 节点时需要注意克隆后的节点的 id 属性. 若原节点有 id 属性, 则克隆后, 会出现在一个文档中有两个 id 相同的节点的情况. 2. clone(true): 在克隆节点的同时, 克隆节点包含的事件. */ $("#bj").clone(true) .attr("id", "bj2") .insertAfter($("#rl")); })
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li id="dj">东京</li> <li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li>
</ul>
<br><br>
gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="hello"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<script type="text/javascript" src="./js/jquery-1.7.2.js"></script>
<script type="text/javascript"> //测试使用 jQuery replaceWith (replaceAll) 方法: 替换节点 /* 1. replaceWith , replaceAll 一对方法, 可以完成一件事. 就是主语宾语 哪个在前面的问题. 2. 以上的两个方法还有移动节点的功能 3. 节点互换需要先克隆节点. 4. $("#rl").replaceWith($bj2) 返回的是被替换的节点。 var $rl = $("#rl").replaceWith($bj2); */ $(function(){ //1. 创建一个 <li>杭州</li> 节点, 替换 #city 的最后一个 li 子节点 $("<li>杭州</li>").replaceAll($("#city li:last")); //2. 创建一个 <li>[杭州]</li> 节点, //替换 #city 的第二个 li 子节点 $("#city li:eq(1)").replaceWith($("<li>[杭州]</li>")); //3. 互换以下两个节点: #rl 和 #bj. 还有移动的功能. //$("#bj").replaceWith($("#rl")); //节点互换需要先克隆节点. alert(1); var $bj2 = $("#bj").clone(true); var $rl = $("#rl").replaceWith($bj2); alert(2); $("#bj").replaceWith($rl); })
</script>
</head>
<body>
<p>你喜欢哪个城市?</p>
<ul id="city"> <li id="bj" name="BeiJing">北京</li> <li>上海</li> <li id="dj">东京</li> <li id="se">首尔</li>
</ul>
<br><br>
<p>你喜欢哪款单机游戏?</p>
<ul id="game"> <li id="rl">红警</li> <li>实况</li> <li>极品飞车</li> <li>魔兽</li>
</ul>
<br><br>
gender: <input type="radio" name="gender" value="male"/>Male <input type="radio" name="gender" value="female"/>Female
<br><br>
name: <input type="text" name="username" value="hello"/>
</body>
</html>

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: jQueryHTML城市UT杭州上海北京
分页:12
转载请注明
本文标题:jQuery_克隆和替换节点 jQuery jQuery教程 jQuery代码 jQuery_克隆和替换节点
本站链接:http://www.codesec.net/view/521585.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(17)