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. fragment 数据传递，通信

    Fragment之间的通信   在本节中,你会学到 1.定义接口 2.实现接口 3.将消息传递给fragment 为了重用Fragment UI 组件,在设计中你应该通过定义每一个fragemnt自己 ...

  2. 如何给对话框中的控件发送消息呢？Windows消息分类

    以博文CTabCtrl中介绍的那样,给Tab添加子对话框来显示Tab内容.那么如果这个子对话框中含有个CTreeCtrl控件,有个Button控件,我想要模拟给这两个控件发送消息,该怎么办呢?直接把给 ...

  3. android init.rc 语法分析

    此文来自于对http://source.android.com/porting/index.html中bring up段的简译.其中有一处与源码的 system/core/init/readme.tx ...

  4. Cow Hopscotch

    Cow Hopscotch 题目描述 Just like humans enjoy playing the game of Hopscotch, Farmer John's cows have inv ...

  5. Tinyproxy

    Tinyproxy Tinyproxy is a light-weight HTTP/HTTPS proxy daemon for POSIX operating systems. Designed ...

  6. jQuery方式事件冒泡的2个方法

    方式1:通过  event.stopPropagation(); $("div").click(function (event) { slide.call(this); event ...

  7. 解决：IE中不能自动选择UTF-8编码的解决方法

    IE中不能自动选择UTF-8编码的解决办法 在windows操作系统上使用IE作为浏览器时.常常会发生这样的问题:在浏览使用UTF-8编码的网页时,浏览器无法自动侦测(即没有设定“自动选择”编码格式时 ...

  8. DNS服务器搭建（主、从、缓）

    主dns服务器搭建 在本机上搭建一个管理hngd.com域名的域名服务器1. 确保安装好以下bind域名服务器 [root@主人 ~]# rpm -qa |grep ^bindbind-chroot- ...

  9. STM32 对内部FLASH读写接口函数（转）

    源:STM32 对内部FLASH读写接口函数 因为要用内部FLASH代替外部EEPROM,把参数放在STM32的0x08000000+320K处,其中20K是bootloader,300K是应用程序. ...

  10. Android源码编译jar包BUILD_JAVA_LIBRARY 与BUILD_STATIC_JAVA_LIBRARY的区别（三）

    继续, 上文提到的是用BUILD_STATIC_JAVA_LIBRARY在Android4.2源码下编译出来的jar包可以在Eclipse(SDK版本4.1)上使用, 找来Android6.0的源码, ...