<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery实现节点克隆、替换和互换</title>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
$(function (){
//克隆结点
//在计算机后克隆一个北京节点
//先给所有的li添加一个点击事件
$("li").click(function (){
alert($(this).text());
});
//注意：
//1、clone(true)可以获取到被克隆的节点的时间，而clone()没有
//2、注意修改被克隆节点的id属性
$("#beijing").clone(true).attr("id","bj").insertAfter($("#computer"));//节点替换
//替换#city 节点的第一个li子节点
$("<li>尚硅谷</li>").replaceAll($("#city li:first"));
//替换#city 节点的第三个li子节点
$("#city li:eq(2)").replaceWith($("<li>东京</li>"));//节点的互换
//广州节点和印刷工程节点的互换
var $guangzhou2 = $("#guangzhou").clone(true);
//alert("a");
var $print = $("#print").replaceWith($guangzhou2);
//alert(2);
$("#guangzhou").replaceWith($print);
});
</script>
</head>
<body>
<p>选择你所喜欢的城市？</p>
<ul id="city">
<li>哈尔滨</li>
<li id="beijing">北京</li>
<li>上海</li>
<li id="guangzhou">广州</li>
</ul>
<p>选择你所喜欢的专业？</p>
<ul id="major">
<li id="computer">计算机</li>
<li>会计</li>
<li>管理学</li>
<li id="print">印刷工程</li>
</ul>
</body>
</html>
相关推荐
python开发_常用的python模块及安装方法
adodb：我们领导推荐的数据库连接组件bsddb3：BerkeleyDB的连接组件Cheetah-1.0：我比较喜欢这个版本的cheeta…
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接：http://www.codeforces.com/contest/660/problem/CDes…
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式，并且由于涉及到要把拍到的照片显…
