挑战：
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>
时间： 2024-12-11 14:48:05