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. [其他]volatile 关键字

    用  volatile 关键字修饰函数 的作用是 告诉编译器该函数不会返回 , 让编译器能产生更好的代码 另外也能避免一些假警告信息,如未初始化的变量等

  2. 第2课 Linux操作系统简介

    1. Linux操作系统的构成 (1)内核(kernel) ①操作系统的核心,负责管理系统的进程.内存.设备驱动程序.文件和网络系统. ②控制系统和硬件之间的相互通信. ③决定着系统的性能和稳定性. ...

  3. php url 伪静态

    手册上说:   'PATH_INFO'    包含由客户端提供的.跟在真实脚本名称之后并且在查询语句(query string)之前的路径信息,如果存在的话.例如,如果当前脚本是通过 URL http ...

  4. service引用

    已引用 attachmentManager 为例 ApplicationContext applicationContext = WebApplicationContextUtils.getWebAp ...

  5. Struts2--Global Result全局结果集

    如果有很多action,有共同的result指向, 而且属于不同的包,那么可以继承上面的包, 然后写一个<global-results> 1. jsp显示文件: <ol> &l ...

  6. ural1628 White Streaks

    White Streaks Time limit: 1.0 secondMemory limit: 64 MB The life of every unlucky person has not onl ...

  7. NIPS 2016论文：英特尔中国研究院在神经网络压缩算法上的最新成果

    NIPS 2016论文:英特尔中国研究院在神经网络压缩算法上的最新成果 http://www.leiphone.com/news/201609/OzDFhW8CX4YWt369.html 英特尔中国研 ...

  8. ZBUS = MQ + RPC

    http://git.oschina.net/rushmore/zbus http://my.oschina.net/sbz/blog  Readme.md 18.02 KB ZBUS = MQ + ...

  9. hibernate和ibatis的区别

    通过别人的资料,进行自己关注的一些扼要点的整理 共同点: 1. 不同点:1. 自动化程度上,hibernate是全自动化的orm框架,提供了对象到数据库的完全映射和sql的内部自动生成,其对象映射是指 ...

  10. (中等) POJ 1703 Find them, Catch them，带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...