jQuery克隆DOM节点

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";

%>

<!DOCTYPE html>

<html>

<head>

<base href="<%=basePath%>">

<meta charset="UTF-8">

<title>b index</title>

<link rel='stylesheet' type="text/css" href='b/css/bootstrap.css'>

</head>

<body style="margin:150px;">

    <div id="div001">div001</div>

    <div id="div002">div002</div>

    <div id="div003">div003</div>

    <div>

        <button id="btn001">click me to use clone()</button>

        <button id="btn002">click me to use clone(true)</button>

    </div>

    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>

    <script type="text/javascript" src="b/js/bootstrap.js"></script>

    <script type="text/javascript" src="js/index027.js"></script>

</body>

</html>
$(function() {

    $('#btn001').click(btn001Click);

    $('#btn002').click(btn002Click);

    initDiv();

});

function btn001Click() {

    // 这样会把id也克隆过来；这样clone()不会进行事件的拷贝；

    var $clone = $('#div001').clone();

    // clone(false) == clone()

    // var $clone = $('#div001').clone(false);

    $('#div003').after($clone);

}

function btn002Click() {

    // 这样会把id也克隆过来；这样clone(true)会进行事件的拷贝；

    var $clone = $('#div001').clone(true);

    $('#div003').after($clone);

}

function initDiv() {

    $('div').click(function() {

        // 获取点击事件的DOM对象: arguments[0].target.id

        console.log('%c' + arguments[0].target.id + ' click', 'font-size:16px;color:red');

    });

}

jQuery克隆DOM节点的更多相关文章

  1. 第一百六十七节，jQuery，DOM 节点操作，DOM 节点模型操作

    jQuery,DOM 节点操作,DOM 节点模型操作 学习要点: 1.创建节点 2.插入节点 3.包裹节点 4.节点操作 DOM 中有一个非常重要的功能,就是节点模型,也就是 DOM 中的“M”.页面 ...

  2. jQuery删除DOM节点

    jQuery删除DOM节点 <%@ page language="java" import="java.util.*" pageEncoding=&quo ...

  3. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  4. 04-老马jQuery教程-DOM节点操作及位置和大小

    1. jQuery创建DOM标签 1.1 DOM动态创建标签的方法 DOM时代我们通过document的createElement方法动态创建标签.创建标签后,动态的给他添加属性.例如代码: // 动 ...

  5. jQuery 获取DOM节点的两种方式

    jQuery中包裹后的DOM对象实际上是一个数组,要获得纯粹的DOM对象可以有两种方式: 1.使用数组索引方式访问,例如: var dom = $(dom)[0]; 如: $("#id&qu ...

  6. jQuery操作DOM节点的方法总结

    1.parent():获得当前匹配元素集合中每个元素的父元素,该方法只会向上一级对 DOM 树进行遍历 $('li.item-a').parent().css('background-color', ...

  7. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  8. jQuery操作DOM知识总结

    jquery操作DOM(节点) 1.创建元素 //$(htmlStr) //htmlStr:html格式的字符串 $("<span>这是一个span元素</span> ...

  9. 原生JS的DOM节点操作

    DOM(Document Object Model/文档对象模型)是针对HTML和XML文档的一个API.DOM节点树:在文档中出现的空格.回车.标签.注释.文本.doctype.标签等都属于DOM节 ...

随机推荐

  1. C#使用FFmpeg 将视频格式转换成Gif图片示例

    根据EFmpeg封装的视频转换gif工具:https://my.oschina.net/tianma3798/blog/825317 一.本次使用参数说明 /* * 参数说明: * -i 源文件位置 ...

  2. Button MouseEvent颜色变化

    public partial class Form1 : Form { public Form1() { InitializeComponent(); this.button1.Enter += bu ...

  3. PS2键盘 + LCD12864 实验

    本实验是通过LCD12864来显示键盘上被按下的按键,实验比较简单,在LCD12864固定的DDRAM地址上显示,缺点就是不能保存上一次被按的内容,后者会覆盖掉前面,所以屏上仅有一个字符显示.保存上一 ...

  4. javascript学习01

    1/js 中所有的数字都是浮点型,所以5/2=2.5    6.5%2.1=0.2 2/delete用于删除对象的属性或者是数组元素: var o={x=1,y=2}:delete o.x;  x i ...

  5. 什么是j2ee ？？EJB与j2ee的关系？？ 请看百度百科

    首先,EJB是j2ee的一部分. http://baike.baidu.com/link?url=SGmNOVWoaZ62WCjb7a_yzz-GBGsDT3jyFM1hsvv8ycAwusdmo_D ...

  6. php 安装php5-mysql 拓展

    Your PHP installation appears to be missing the MySQL extension which is required by WordPress Error ...

  7. （一）phoneGap之环境搭建教程及其example分析

    phoneGap之环境搭建教程及其example分析 一.环境搭建 与普通的开发android应用一样,phoneGap也同于原生android应用一样,环境相同,只是有部分不同,下面就我做理解,进行 ...

  8. UIView Methods

    UIView翻译 (参考) 2011年04月12日 星期二 10:09 转载于:http://blog.csdn.net/tracylife/archive/2010/08/27/5842723.as ...

  9. ASP.NET AJAX 创建类

    <%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans ...

  10. SGU 194 Reactor Cooling ——网络流

    [题目分析] 无源汇上下界可行流. 上下界网络流的问题可以参考这里.↓ http://www.cnblogs.com/kane0526/archive/2013/04/05/3001108.html ...