[jQuery编程挑战]003 克隆一个页面元素及其相关事件

浏览数：27 / 时间：2015年06月09日

挑战：

　　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>