07.31《jQuery》——3.4克隆节点

需求: 单击任何一个li,复制出这个li,附着在ul后面

重点是clone()方法和append()方法，前者是复制的方法，后者是将元素插入到某元素的子元素后面。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
            }
            
            li {
                width: 152px;
            }
            
            a {
                border: 1px solid #e4393c;
                display: block;
                width: 150px;
                background: #e4393c;
                height: 26px;
                line-height: 26px;
                color: #fff;
                font-size: 15px;
                font-family: '微软雅黑';
                text-align: center;
                text-decoration: none;
                white-space: pre;
            }
            
            ul {
                list-style-type: none;
                padding: 0px;
                margin: 0px;
            }
            
            li a:hover {
                background-color: #F7F7F7;
                color: #e4393c;
                border-right: #F7F7F7;
            }
        </style>
        <script src="../jquery-3.2.1/jquery-3.2.1.js"></script>
        <script type="text/javascript">
            //需求: 单击任何一个li,复制出这个li,附着在ul后面
            $(function(){
                $("ul>li").click(function(){
                    var $obj = $(this).clone(true);
                    $("ul").append($obj);
                });
            });
        </script>
    </head>

    <body>
        <ul>
            <li>
                <a href="#">手 机</a>
            </li>
            <li>
                <a href="#">笔记本</a>
            </li>
            <li>
                <a href="#">图书音像</a>
            </li>
            <li>
                <a href="#">服装鞋帽</a>
            </li>
        </ul>

    </body>

</html>

相关阅读:
对MVC模式与MVVM模式的认识
优雅降级和渐进增强
入园第一天
看看AQS阻塞队列和条件队列
简单看看LockSupport和AQS
简单看看LongAccumulator
JUC中的原子操作类及其原理
java并发基础知识
简单看看es6解构赋值
简单使用vue-cli

原文地址：https://www.cnblogs.com/justlive-tears/p/9399090.html