码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-02-11 21:50:08      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:

挑战:

  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>

 

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

标签:

原文地址:http://www.cnblogs.com/jerry19890622/p/4286985.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!