<!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>

jQuery实现节点克隆、替换和互换的更多相关文章

  1. jQuery实现节点克隆

    为了便于在DOM节点进行添加或者删除节点元素,使用克隆的方法比较方便,下面是js部分的主要代码 var container = $('.recordCon'); var cloneDom = cont ...

  2. jquery插入,复制、替换和删除节点

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  3. jQuery中的查找节点、创建节点、插入节点、删除节点、替换节点、复制节点操作方法

    jQuery操作节点我们可以分六点来讲,查找节点.创建节点.插入节点.删除节点.替换节点.复制节点. 一.查找节点 text() - 设置或返回所选元素的文本内容   ,html() - 设置或返回所 ...

  4. Query节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div> ...

  5. jquery 添加节点的几种方法介绍

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. jQuery节点操作，jQuery插入节点，jQuery删除节点，jQuery Dom操作

    一．创建节点 1 var box = $('<div>节点</div>'); //创建一个节点,或者var box = "<div>节点</div& ...

  7. js、jquery对节点的操作(增、删)

    js对节点的操作方法 一.获取 1.父节点的获取 某节点的parentNode属性值即为该节点的父节点.示例: var parent = document.getElementById("o ...

  8. jQuery插入节点（移动节点）

    jQuery插入节点(移动节点) <%@ page language="java" import="java.util.*" pageEncoding=& ...

  9. jQuery包裹节点用法完整示例

    本文实例讲述了jQuery包裹节点用法.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Typ ...

随机推荐

  1. 一个简单的Golang实现的HTTP Proxy

    http://blog.csdn.net/michael__li/article/details/53941312

  2. 第四章 Spring.Net 如何管理您的类___对象、对象工厂和应用程序上下文

    在前面一章我们介绍了依赖注入,控制反转的概念,以及自己动手搭建了一下Spring.Net的环境.通过这些操作,我们知道了Spring.Net 的核心是使用依赖注入或控制反转这种思想来管理业务对象,降低 ...

  3. NodeJS-001-Nodejs学习文档整理(转-出自http://www.cnblogs.com/xucheng)

    Nodejs学习文档整理 http://www.cnblogs.com/xucheng/p/3988835.html 1.nodejs是什么: nodejs是一个是javascript能在后台运行的平 ...

  4. GIS-002-gdal2srtmtiles使用注意事项

    本次安装和配置过程重点参考了: 1.http://blog.csdn.net/wjkwjk/article/details/52560236 2.http://blog.csdn.net/wjkwjk ...

  5. set集合操作【python】

    set集合操作包括: >>> x=set("123defj89") >>> y=set("ab34e6jh9") >& ...

  6. MUI 单图片压缩上传（拍照+系统相册）： 选择立即上传

    1 html 部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  7. java高级---->Thread之CompletionService的使用

    CompletionService的功能是以异步的方式一边生产新的任务,一边处理已完成任务的结果,这样可以将执行任务与处理任务分离开来进行处理.今天我们通过实例来学习一下CompletionServi ...

  8. java基础---->Comparable和Comparator的使用

    Comparable和Comparator都可以实现排序,今天我们就开始两种比较排序接口的学习. Comparable的使用 一.Comparable的文档说明: Lists (and arrays) ...

  9. JS-鼠标彩色拖尾小效果

    实现步骤解析: * 这原本就是一个鼠标后面跟随一串小方块的效果,     * 后来我就想,运用之前学的随机数的案例把小方块的颜色做成彩色的,     * 并且每一个小方块的色彩是随机分配而不是我自己手 ...

  10. jQuery性能优化整理

    1.总是从ID选择器开始继承 2.class选择器之前使用tag 3.将jQuery对象缓存起来 4.使用链式操作 5.使用子查询 6.对直接的DOM操作进行限制 7.当需要对dom进行多次操作时,使 ...