jQuery之detach()

作者: Cute_小肥鸡 | 来源:发表于2020-09-05 17:07 被阅读0次

jQuery之detach()
《锋利的JQuery》笔记
jQuery源码解析之detach()/empty()/remo
jQuery删除节点的三个方法即remove()detach()
jQuery学习笔记2
JQuery的detach()和remove()
四十天学完六级词汇「11」
Docker
JQuery源码阅读1=>detach同级上
JQuery源码阅读1=>detach同级下

detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。

该方法会保留移除元素的副本，允许它们在以后被重新插入。

提示：如需移除元素及它的数据和事件，请使用 remove() 方法代替。

提示：如只需从被选元素移除内容，请使用 empty() 方法。

案例：

页面第一次加载，点击“直线、圆形”等，不会报错，如下：

图1

当点击“复制、粘贴”时，出现报错，并且再次点击“直线、圆形”无效，如下：

错误方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
        }
        #container {

            width: 1920px;
            background: #aaa;
            padding: 20px;
        }

        .box {
            width: 1820px;
            height: 630px;
            border: 1px solid black;
            background: #ccc;
            margin: 20px auto;
            padding: 20px;
        }
        h1 {
            font-size: 20px;
            margin-top: 0 auto;
        }
        .box h2 {
            font-size: 18px;
        }
        .box code {
            display: block;
            font-size: 16px;
            white-space: pre;
        }
        .box .svgBox {
            width: 820px;
            height: 600px;
            margin: 20px 0 0;
            border: 1px solid black;
            background:  #fff;
            border-radius: 10px;
        }
        .copy {
            position: absolute;
            width: 820px;
            height: 600px;
        }
        .xp {
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>

    <script src="https://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
    <!-- svg 选择样式 -->
    <link rel="stylesheet" type="text/css" media="screen" href="https://svgjs.com/svg.select.js/demo/svg.select.css">
</head>
<body>
<div id="container">
    <h1>test</h1>
    <div class="box" >
        <div   class="svgBox"  style="float: left">
            <div id="svgBox">
                <svg id="svg">
                    <g id="svgPanel">

                    </g>
                </svg>
            </div>
        </div>

        <div  class="svgBox" style="float: left;margin-left: 80px">
            <canvas id="canvas" style="height: 600px;width: 820px;background:#ffffff"></canvas>
        </div>
    </div>

    <div style="clear: both">
        <button id="line">直线</button>
        <button id="arc">圆形</button>
        <button id="rect">矩形</button>
        <button id="text">文本</button>
        <button id="add" style="width: 70px">
            <input type="file" id="svg_img" style="opacity: 0;position: absolute;width: 60px;"> 上传图片
        </button>
        <button id="copy"> 复制 </button>
        <button id="paste"> 粘贴 </button>
    </div>
</div>
</body>


<script src="https://svgjs.com/svg.select.js/demo/svg.min.js"></script>
<script src="http://demo.htmleaf.com/1501/201501311541/js/svg.draggable.js"></script>   <!--拖拽-->
<script src="https://svgjs.com/svg.select.js/demo/svg.select.min.js"></script>  <!-- 选中 -->
<script src="https://svgjs.com/svg.resize.js/demo/svg.resize.js"></script>  <!-- 放大缩小 -->
<script type="text/javascript">
    var svg = document.getElementById('svg');
    var svgPanel = document.getElementById('svgPanel');
    var width = 820;  // 设置svg整体的宽和高
    var height = 600;
    var draw = new SVG("svgPanel").size("100%", "100%");
    svg.setAttribute('width', width);
    svg.setAttribute('height', height);

    var _html;
    //复制
    $('#copy').click(function () {
        _html = $('#SvgjsSvg1000').html();
        $('#SvgjsSvg1000').html('');
    })
    //粘贴
    $('#paste').click(function () {
        $('#SvgjsSvg1000').html(_html);
    })
    //直线
    $('#line').click(function () {
        draw.line(10, 10, 80, 150).stroke({ width: 5, linecap: "round", color: "black" }).draggable();
    })
    //圆形
    $('#arc').click(function () {
        draw.ellipse(150, 150) // 宽直径，高直径
            .move(240, 20)
            .stroke({color: "black"})
            .fill("white").draggable().select({deepSelect:true}).resize();
    })
</script>
</html>

图2

解决方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <style>
        body,
        html {
            margin: 0;
            width: 100%;
        }
        #container {

            width: 1920px;
            background: #aaa;
            padding: 20px;
        }

        .box {
            width: 1820px;
            height: 630px;
            border: 1px solid black;
            background: #ccc;
            margin: 20px auto;
            padding: 20px;
        }
        h1 {
            font-size: 20px;
            margin-top: 0 auto;
        }
        .box h2 {
            font-size: 18px;
        }
        .box code {
            display: block;
            font-size: 16px;
            white-space: pre;
        }
        .box .svgBox {
            width: 820px;
            height: 600px;
            margin: 20px 0 0;
            border: 1px solid black;
            background:  #fff;
            border-radius: 10px;
        }
        .copy {
            position: absolute;
            width: 820px;
            height: 600px;
        }
        .xp {
            width: 10px;
            height: 10px;
            border: 1px solid #000;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
    </style>

    <script src="https://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
    <!-- svg 选择样式 -->
    <link rel="stylesheet" type="text/css" media="screen" href="https://svgjs.com/svg.select.js/demo/svg.select.css">
</head>
<body>
<div id="container">
    <h1>test</h1>
    <div class="box" >
        <div   class="svgBox"  style="float: left">
            <div id="svgBox">
                <svg id="svg">
                    <g id="svgPanel">

                    </g>
                </svg>
            </div>
        </div>

        <div  class="svgBox" style="float: left;margin-left: 80px">
            <canvas id="canvas" style="height: 600px;width: 820px;background:#ffffff"></canvas>
        </div>
    </div>

    <div style="clear: both">
        <button id="line">直线</button>
        <button id="arc">圆形</button>
        <button id="rect">矩形</button>
        <button id="text">文本</button>
        <button id="add" style="width: 70px">
            <input type="file" id="svg_img" style="opacity: 0;position: absolute;width: 60px;"> 上传图片
        </button>
        <button id="copy"> 复制 </button>
        <button id="paste"> 粘贴 </button>
    </div>
</div>
</body>


<script src="https://svgjs.com/svg.select.js/demo/svg.min.js"></script>
<script src="http://demo.htmleaf.com/1501/201501311541/js/svg.draggable.js"></script>   <!--拖拽-->
<script src="https://svgjs.com/svg.select.js/demo/svg.select.min.js"></script>  <!-- 选中 -->
<script src="https://svgjs.com/svg.resize.js/demo/svg.resize.js"></script>  <!-- 放大缩小 -->
<script type="text/javascript">
    var svg = document.getElementById('svg');
    var svgPanel = document.getElementById('svgPanel');
    var width = 820;  // 设置svg整体的宽和高
    var height = 600;
    var draw = new SVG("svgPanel").size("100%", "100%");
    svg.setAttribute('width', width);
    svg.setAttribute('height', height);

    var _html;
    //复制
    $('#copy').click(function () {
        _html = $('#svg').detach()；
    })
    //粘贴
    $('#paste').click(function () {
        $('#svgBox').append(_html);
    })
    //直线
    $('#line').click(function () {
        draw.line(10, 10, 80, 150).stroke({ width: 5, linecap: "round", color: "black" }).draggable();
    })
    //圆形
    $('#arc').click(function () {
        draw.ellipse(150, 150) // 宽直径，高直径
            .move(240, 20)
            .stroke({color: "black"})
            .fill("white").draggable().select({deepSelect:true}).resize();
    })
    //文本
    $('#text').click(function () {
        draw.plain('文本').center(240, 20).draggable();
    })
    //矩形
    $('#rect').click(function () {
        rect = draw.rect(600, 200).move(50,50).attr('stroke-width',1).attr('fill','none').attr('fill', 'white').draggable();
    })
</script>
</html>

jQuery之detach()
detach() 方法移除被选元素，包括所有的文本和子节点。然后它会保留数据和事件。该方法会保留移除元素的副本，...
《锋利的JQuery》笔记
删除节点 jQuery提供了三种删除节点的方法，remove()、detach()和empty()。 remove...
jQuery源码解析之detach()/empty()/remo
前言：unwrap() 的解析请看 jQuery源码解析之replaceWith()/unwrap()empty(...
jQuery删除节点的三个方法即remove()detach()
jQuery提供了三种删除节点的方法，即remove()，detach()和empty(). 测试所用HTML代码...
jQuery学习笔记2
2015年10月23日删除节点 jquery提供了3种删除节点的方法，即remove( ),detach( )和...
JQuery的detach()和remove()
remove：移除节点 1、无参数，移除自身整个节点以及该节点的内部的所有节点，包括节点上事件与数据；2、有参数，...
四十天学完六级词汇「11」
detach vt.分开，分遣军队 detach oneself from reality超脱现实 inertia...
Docker
detach attach 默认attach 前台模式-d detach 后台模式批量操作 docker con...
JQuery源码阅读1=>detach同级上
$element.remove(selector) JQuery中大部分DOM操作API，都支持传递选择器对原集合...
JQuery源码阅读1=>detach同级下
大多数JQuery api ，同一个参数可传DOM元素、html字符串、JQuery包裹的DOM元素、Doucme...