<!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. NodeJs生成SVG图形验证码

    背景:短信接口有调用限制,如果受到恶意攻击,很容易就爆掉,所以需要一系列验证机制,后端采用签名加密的方式,而前端要做人机识别,有两个要求: 1)不能使用文本式的验证码,很简单就能拿到 2)所有验证逻辑 ...

  2. CSS3给页面打标签

    我们经常会在页面的左上角或者右上角看到类似如图所示的标签,比如页面的链接(最常使用)等,下面我们就实现一个简单的标签 实现步骤是先做一个水平长条,使用CSS3的transform来实现旋转,如果是在左 ...

  3. php导出excel（xls或xlsx）（解决长数字显示问题）

    1)demo $titles = array('订单号','商品结算码','合同号','供应商名称','专柜','商品名称','商品货号','商品单价','商品总价','供应商结算金额','商品数量' ...

  4. 佛祖保佑永无bug

    世界最难懂C语言代码竞赛: // _ooOoo_ // o8888888o // 88" . "88 // (| -_- |) // O\ = /O // ____/`---'\_ ...

  5. iOS中UIImage转换为NSData 方法

    参考网址:http://blog.csdn.net/lovenjoe/article/details/7484217 天牛 感谢作者的硕果 在Iphone上有两种读取图片数据的简单方法: UIImag ...

  6. linux mysql添加用户，删除用户，以及用户权限

    一些主要的命令: 登录: mysql -u username -p 显示全部的数据库: show databases; 使用某一个数据库: use databasename; 显示一个数据库的全部表: ...

  7. 《转载》POI导出excel日期格式

    参考帖子: [1]http://www.ithao123.cn/content-2028409.html [2]http://javacrazyer.iteye.com/blog/894850 再读本 ...

  8. Angular基础---->AngularJS的使用(一)

    AngularJS主要用于构建单页面的Web应用.它通过增加开发人员和常见Web应用开发任务之间的抽象级别,使构建交互式的现代Web应用变得更加简单.今天,我们就开始Angular环境的搭建和第一个实 ...

  9. Linux学习（四）档案与目录管理

    1. 目录与路径  1.1 相对路径与绝对路径  1.2 目录的相关操作: cd, pwd, mkdir, rmdir  1.3 关于执行文件路径的变量: $PATH2. 档案与目录管理  2.1 档 ...

  10. navigater导航

    1.css的hover事件2.url事件(或者click事件),激活当前项3.第一导航与第二导航的移入移出事件(可以通过left,top值来显示,也可以变化宽度,高宽来显示)4.有二级导航的另外给cl ...