<!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. fork函数详解--20

     一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事,但如果初始参数或者传入的变量不同 ...

  2. Java类的设计----方法的重写、覆盖

    方法的重写.覆盖 在子类中可以根据需要对从父类中继承来的方法进行改造—覆盖方法(方法的重置.重写),在程序执行时,子类的方法将覆盖父类的方法. 覆盖方法必须和被覆盖方法具有相同的方法名称.参数列表和返 ...

  3. 走进ELK原理

    日志的分析在联调和后期维护是非常重要. 今天让我们进入ELK...让我们一起感受这个强大的日志收集,日志分析存储,日志查询界面化显示的震撼效果吧. Elasticsearch是个开源分布式搜索引擎,它 ...

  4. [转载]SQL truncate 、delete与drop区别

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 2.drop.truncate都是DDL语句(数据定义语言),执行后会自动提交. 不同点: 1. t ...

  5. iOS-代码修改Info.plist文件

    解决办法: 1.首先系统的Info.Plist文件是只读文件 并不能 写入.目前我个人是没有办法存入,官方属性 可以看到是readOnly 2.那么我们 就想代码修改Info.Plist文件怎么办呢, ...

  6. Sql中将字符串按分割符拆分

    创建函数 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO Create FUNCTION [dbo].[F_Split] ( @SplitString ...

  7. poj_2352 Treap

    题目大意 对于二维平面上的n个点,给出点的坐标.定义一个点A覆盖的点的个数为满足以下条件的点B的个数:点B的x <= 点A的x坐标,点B的y坐标 <= 点A的y坐标.     给出N个点的 ...

  8. android 动画学习系列（一）

    老师今天开始讲android的游戏,讲到了view和surfaceview 下面是view的演示部分 private Paint paint; //游戏里很少用double,都是用long priva ...

  9. 为非ajax请求绑定回调函数的方法

    我们都知道jQuery为ajax请求封装了success和error两个回调方法,其实jQuery也实现了为非ajax请求的普通方法也设计了绑定回调函数的方法. 当一个方法需要等待另一个耗时很长的方法 ...

  10. Android 动画fillAfter和fillBefore

    fillBefore是指动画结束时画面停留在此动画的第一帧; fillAfter是指动画结束是画面停留在此动画的最后一帧. Java代码设置如下: /*****动画结束时,停留在最后一帧******* ...