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. PAT (Advanced Level) 1070. Mooncake (25)

    简单贪心.先买性价比高的. #include<cstdio> #include<cstring> #include<cmath> #include<vecto ...

  2. 百度网盘API的操作--PCS 百度个人云存储 上传 ，下载文件

    来自http://blog.csdn.net/u014492257/article/details/39856403 另外需要所有API使用方法的请访问本人上传的资源(需要3个下载分的)链接: htt ...

  3. Halcon相关

      1.Halcon的自我描述 Program Logic Ø Each program consists of a sequence of HALCON operators Ø The progra ...

  4. CultureInfo中重要的InvariantCulture

    CultureInfo简述 CultureInfo类位于System.Globalization命名空间内,这个类和这个命名空间许多人都不了解也认为不需要太多了解,实际上,你写的程序中会经常间接得使用 ...

  5. 2016"百度之星" - 资格赛（Astar Round1） Problem E

    简单模拟题,耐心写就能过. #include <stdio.h> #include <math.h> #include<cstring> #include<c ...

  6. Unity 之 c# 版的 CharacterMotor

    using System; using System.Collections; using UnityEngine; // This class just convert from Character ...

  7. jquery全选框的实现

    函数实现的话: head里加入函数实现 <script language="javascript" type="text/javascript"> ...

  8. 跳舞链 Dancing Links

    作为搜索里面的一个大头,终于刷了一部分题目了,跳舞链一般都有现成的模板来套...... 至于跳舞链的学习的话,我觉得http://www.cnblogs.com/grenet/p/3163550.ht ...

  9. 将UTF8编码转化为中文 － NSString方法

    方法一: 代码如下,如有更好的方法 麻烦贴出来,这个方法是通过webview进行解码的 UIWebView *web = [[UIWebView alloc] init]; NSString *tsw ...

  10. P3197 [HNOI2008]越狱

    题目描述 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 输入输出格式 输入 ...