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>
  • 相关阅读:
    const修饰指针
    C++调用C中编译过的函数要加extern "C"
    linux常用指令(1)
    链式队列实现
    存储类别和类型限定词
    数组,指针和引用
    字符函数和字符串函数
    C/C++编译的程序占用的内存
    结构体1(嵌套使用)
    输入输出函数小结
  • 原文地址:https://www.cnblogs.com/jerry19890622/p/4286985.html
Copyright © 2011-2022 走看看