挑战：

　　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 克隆一个页面元素及其相关事件的更多相关文章

  1. [jQuery编程挑战]001：实现页面元素加速动画效果

    要求: 页面包含两个HTML元素:一个按钮,一个小方块 动画要求:点击按钮,小方块从页面坐标300,300,加速移动到0,0 相关知识点: jQuery动画方法animate easing参数的设置 ...

  2. [jQuery编程挑战]006 生成一个倒计时效果

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...

  3. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  4. click([[data],fn]) 触发每一个匹配元素的click事件。

    click([[data],fn]) 概述 触发每一个匹配元素的click事件. 这个函数会调用执行绑定到click事件的所有函数.大理石平台精度等级 参数 fnFunctionV1.0 在每一个匹配 ...

  5. one(type,[data],fn) 为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

    one(type,[data],fn) 概述 为每一个匹配元素的特定事件(像click)绑定一个一次性的事件处理函数. 在每个对象上,这个事件处理函数只会被执行一次.其他规则与bind()函数相同.这 ...

  6. jQuery子页面获取父页面元素并绑定事件

    父页面HTML文件: <ul id="faul"> <li class="sonli">子页面列表1</li> <li ...

  7. 【jquery】 在异步加载的元素上绑定事件

    最近因为工作关系又重新回归到了jquery的怀抱,发现很多jquery的一些细节处理的部分都忘记了.这里记录一下最近在做项目时频繁遇到的一个问题:给异步加载的元素添加事件绑定. 问题发生的前提是项目前 ...

  8. 如何通过js在子页面调用父页面元素的click事件

    //获取父页面的某个元素var node = window.parent.document.getElementById("btnReturn");//调用该元素的Click事件 ...

  9. 【WorkTile赞助】jQuery编程挑战#009：生成两个div元素互相追逐的动画

    HTML页面: <!-- HTML代码片段中请勿添加<body>标签 //--> <div id="container"> <div id ...

随机推荐

  1. 【最短路】NEERC15 F Froggy Ford(2015-2016 ACM-ICPC)(Codeforces GYM 100851)

    题目链接: http://codeforces.com/gym/100851 题目大意: 一只青蛙跳过宽为W的河,河中游N个石头,坐标xi,yi,现在往河中间添加一个石头,使得每次跳跃的最大的距离最小 ...

  2. 【动态规划】HDU 5781 ATM Mechine

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5781 题目大意: 一个人有[0,K]内随机的钱,每次可以随意取,但是不知道什么时候取完,取钱超过剩余 ...

  3. 深度克隆---js对象引用

    首先,我们要知道,javascript中除了基本类型(number,string,boolean,null,undefined)之外就是引用类型了,也可以说就是js对象了. 引用类型的赋值其实是对象保 ...

  4. 堆排序中建堆过程时间复杂度O(n)怎么来的？

    首先这个循环是从i = headsize/2 -> 1,也就是说这是一个bottom-up的建堆.于是,有1/2的元素向下比较了一次,有1/4的向下比较了两次,1/8的,向下比较了3次,.... ...

  5. 【LeetCode】Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example, Given 1->2-& ...

  6. Firemonkey的旁门左道[五]

    这次讲讲绘制的几种模式吧,不过还是比较浅显,刚接触不久,还实在没这个实力道出个所以来. FMX下,我们可以切换GDI,D2D,GPU这三种模式, 只要通过全局变量就可以轻松搞定. 如何设置 Globa ...

  7. 寻找大学目标及行动步骤——记ITAEM团队第二期宣讲会（2014.05.14）

    ·昨晚8:00-9:40.在 钟海楼03029 ,进行了ITAEM团队第二期宣讲会(第一期见第一期宣讲会总结).来參加的主要是大一学生.以信院为主.也有法学院.文学院的同学. 在宣讲会中,大家都比較积 ...

  8. CSRF——攻击与防御

    CSRF——攻击与防御 author: lake2 0x01 什么是CSRF攻击 CSRF是Cross Site Request Forgery的缩写(也缩写为XSRF),直译过来就是跨站请求伪造的意 ...

  9. 【AIX】采用vi语法编辑命令行

    AIX中不能像centos那样移动方向键上.下来查询历史键入的命令行记录 可以通过一条命令采用vim的语法编辑命令行,查询历史记录. # set -o vi 在命令行输入上述命令后就可以: ESC+k ...

  10. 基于SSH的数据库中图片的读写

    近期项目中遇到了这个问题,网上查了一些资料所谓是零零散散,这里写篇博文做个笔记. 注:这篇博文中部分类的属性声明未列出,应该不算难,基本都是以private 类型 名称 格式声明,然后配getter ...