<!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. 【java】 java 设计模式(1):工厂方法模式（Factory Method）

    工厂方法模式分为三种: 1.普通工厂模式,就是建立一个工厂类,对实现了同一接口的一些类进行实例的创建.首先看下关系图: 举例如下:(我们举一个发送邮件和短信的例子) 首先,创建二者的共同接口:   p ...

  2. Makefile--基本规则（零）

    [版权声明:转载请保留出处:周学伟:http://www.cnblogs.com/zxouxuewei/] 一般一个稍大的linux项目会有很多个源文件组成,最终的可执行程序也是由这许多个源文件编译链 ...

  3. 浅析Linux内核同步机制

    非常早之前就接触过同步这个概念了,可是一直都非常模糊.没有深入地学习了解过,最近有时间了,就花时间研习了一下<linux内核标准教程>和<深入linux设备驱动程序内核机制>这 ...

  4. Swift-基础语法之变量&常量&元组

    使用 let来声明一个常量,用 var来声明一个变量.常量的值在编译时并不要求已知,但是你必须为其赋值一次.这意味着你可以使用常量来给一个值命名,然后一次定义多次使用 myVariable = let ...

  5. laravel框架容器管理的一些要点

    本文面向php语言的laravel框架的用户,介绍一些laravel框架里面容器管理方面的使用要点.文章很长,但是内容应该很有用,希望有需要的朋友能看到.php经验有限,不到位的地方,欢迎帮忙指正. ...

  6. linux系统输入法设置

    首先是要安装了中文输入法,下面以搜狗为例. 2 从system settings 进入language support ,在keyboard input method system 中是看不到自己安装 ...

  7. 说说新唐ARM9（未完待续）

    针对通用32位微控制器的NUC970系列嵌入了由RISC机器有限公司设计的RISC处理器ARM926EJ-S,运行频率高达300 MHz,具有16 KB的I-cache,16 KB的D-cache和M ...

  8. JDK1.8在LINUX下安装步骤

    JDK1.8在LINUX下安装步骤: 在/usr/lib/目录下新建jvm文件夹,如果已有jvm文件夹,则将之前的JDK版本删除,即在jvm目录下执行命令:rm –rf * 将JDK文件jdk-8u4 ...

  9. zookeeper-端口说明

    一.zookeeper有三个端口(可以修改) 1.2181 2.3888 3.2888 二.3个端口的作用 1.2181:对cline端提供服务 2.3888:选举leader使用 3.2888:集群 ...

  10. pythonday

    python学习          http://www.cnblogs.com/fengyuhao/p/7168903.html pythonday    http://www.cnblogs.co ...