zoukankan      html  css  js  c++  java
  • jQuery克隆DOM节点

    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');
        });
    }
  • 相关阅读:
    js获取数组,对象的真实长度
    http和https区别
    react调用setstate后发生了什么
    for in for of foreach及map的区别
    事件委托(事件代理)
    CSS隐藏元素的几种方法
    react一些扩展
    [软件构造]异常的捕获与自定义
    [软件构造]可能是笔记总结吧
    计算机系统大作业
  • 原文地址:https://www.cnblogs.com/stono/p/4936168.html
Copyright © 2011-2022 走看看