zoukankan      html  css  js  c++  java
  • [jQuery编程挑战]003 克隆一个页面元素及其相关事件

    挑战:

      a) 绑定一个点击方法到这个div,点击后此元素会淡出消失

      b) 同时克隆一个新的div元素到页面,元素内容是前面div文字内容反向书写(即,sgatbg olleh),同样也具有上面的点击事件绑定,元素淡出消失

      

      

    <!DOCTYPE html>
    <html lang="zh">
        <head>
            <meta charset="utf-8"/>
            <title>克隆一个页面元素及其相关元素</title>
            <style type="text/css">
                .box {
                    width: 150px;
                    height: 100px;
                    line-height: 100px;
                    border: 1px solid #000;
                    text-align: center;
                    background: #00ff00;
                    cursor: pointer;
                }
            </style>
            <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
            <script type="text/javascript">
                $(function() {
                    var $box = $('.box');
                    $box.click(function() {
                        var $this = $(this);
                        var $boxClone = $this.clone(true);
                        var str = $this.text();
                        var reverseContent = str.reverse();
                        $boxClone.text(reverseContent);
                        $this.fadeOut('slow');
                        $('body').append($boxClone);
                    });
                });
    
                function reverse() {
                    var str = '';
                    var end = this.length - 1;
                    for (;end >= 0; end--) {
                        str = str + this.charAt(end);
                    }
                    return str;
                }
                String.prototype.reverse = reverse;
            </script>
        </head>
        <body>
            <div class="box">
                hello, World!
            </div>
        </body>
    </html>
  • 相关阅读:
    Java虚拟机------JVM内存区域
    Java虚拟机------垃圾收集器
    Java虚拟机--------JVM常见参数
    Kafka和的安装与配置
    Kafka介绍与消息队列
    Kafka命令操作
    Kafka深度解析
    Flume架构
    四十三、NPM报错ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE
    四十二、在线预览pdf文件
  • 原文地址:https://www.cnblogs.com/jerry19890622/p/4286985.html
Copyright © 2011-2022 走看看