您的位置：首页 > Web前端 > JQuery

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

2015-02-11 21:27 946 查看
挑战：

　　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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航