<!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. error: Allowed memory size

    错误提示 error: Allowed memory size of 8388608 bytes exhausted (tried to allocate 35 bytes) in D:\www\Th ...

  2. SSL 证书配置nginx

    ssl.conf文件: server { listen 443; server_name www.domain.com; # 改为绑定证书的域名 ssl on; ssl_certificate 1_w ...

  3. mysql表无权限访问

    当网页出现以上问题时的解决方法: 今天在两台服务器间转移网站,最后把域名解释设置好后等待...然后CMD查看DNS解释情况..解释成功-输入网址-却出现如上信息,首先用#ls -l查看mysql下的v ...

  4. Environment.GetEnvironmentVariable

    参考: https://jingyan.baidu.com/article/b24f6c82cba6dc86bfe5da9f.html https://msdn.microsoft.com/zh-cn ...

  5. PHP5 session 详解【经典】

    原文:http://www.pkwind.com/php5-session-xiang-jie-jing-dian http协议是WEB服务器与客户端 (浏览器)相互通信的协议,它是一种无状态协议.所 ...

  6. AndroidのListView之滑动列表项(点击事件和滑动事件共存)

    这里正好在项目有这么一个bt的需求,如下图ListView的item可以响应点击事件也可以响应item的左右滑动事件,两个事件可以相互独立互不影响. 听说iphone的list选项就有这样bt的功能, ...

  7. 【ecshop】如何解决DEPRECATED: PREG_REPLACE()报错

    部署的ecshop  在高版本的PHP环境里边  ,访问 单个店铺时候会报错, 访问文件路径: http://www.test.com/supplier.php?suppId=5 类似这样的报错: D ...

  8. 【Android N 7.1.1】 锁屏之上显示Toast

    package com.android.systemuirom.keyguard; import android.content.Context; import android.view.Gravit ...

  9. RabbitMQ的安装和使用Python连接RabbitMQ

    绪论 这里的环境使用的是Mac OS X系统,所有的配置和使用都是基于Mac OS X 和Python 2.7 以及对应的pika库的. RabbitMQ的安装和配置 安装部分 #brew insta ...

  10. java中生成流水号的一个例子(使用关系型数据库)

    在实际的开发中,可能会有根据一定的规则生成流水号的需求(比如根据根据公司编码和日期生成4位流水号)我们可以把公司和日期联合起来作为一个业务编码,把这个业务编码和序列的值存储到数据库中,每次需要生成流水 ...