收藏
批改状态：未批改
老师批语：
1.操作属性
attr()方法设置样式属性（自有属性）：attr(‘属性名’,’属性值’)
attr()方法返回样式属性（自有属性）：attr(‘属性名’)
设置多个attr样式属性：attr(‘属性名1’:’属性值1’,‘属性名2’:’属性值2’)
removeAttr()方法从被选元素中移除的属性：removeAttr(‘属性名’,’属性值’)
2.添加元素
append()方法在被选元素内部的结尾插入内容
prepend()方法在被选元素内部的开头插入内容
after()方法在被选元素外部之后插入内容
before()方法在被选元素外部之前插入内容
3.删除元素
remove()方法删除被选元素及其子元素
empty()方法删除被选元素的子元素
<!DOCTYPE html>
<html>
<head>
<title>评论点赞功能</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<style>
body { font-size: 12px; line-height: 120%; text-align: center; color:#333; padding: 20px;}
a { color: #333; text-decoration: none;}
a:hover { text-decoration: underline;}
* { margin: 0; padding: 0; border: none;}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix { *height:1%;}
#list { margin: 0 auto; text-align: left; width: 540px;}
.box { border-top: 1px solid #eee; position: relative; width: 540px; padding: 20px 0;}
.box:hover .close { display: block;}
.close { display: none; top:0px; right: 0px; width: 28px; height: 28px; border: 1px solid #eee; position: absolute; background: #f2f4f7; line-height: 27px; text-align: center;}
.close:hover { background: #c8d2e2; text-decoration: none;}
.head { float: left; width: 50px; height:50px; margin-right: 10px;border-radius:25px;}
.content { float: left; width: 440px;}
.main { margin-bottom: 10px;}
.txt { margin-bottom: 10px;}
.user { color: #369; }
.pic { margin-right: 5px; width: 200px; border: 1px solid #eee;}
.info { height: 20px; line-height: 19px; font-size: 12px; margin: 0 0 10px 0;}
.info .time { color: #ccc; float: left; height: 20px; padding-left: 20px; background: url("images01/bg1.jpg") no-repeat left top;}
.info .praise { color: #369; float: right; height: 20px; padding-left: 18px; background: url("images01/bg2.jpg") no-repeat left top;}
.praise_2{background: url("images01/bg3.jpg") no-repeat left top;color: #369; float: right; height: 20px; padding-left: 18px;}
.praises-total { margin: 0 0 10px 0; height: 20px; background: url("images01/praise.png") no-repeat 5px 5px rgb(247, 247, 247); padding: 5px 0 5px 25px; line-height: 19px;}
.comment-box { padding: 10px 0; border-top: 1px solid #eee;}
.comment-box:hover { background: rgb(247, 247, 247);}
.comment-box .myhead { float: left; width: 30px; height: 30px; margin-right: 10px;border-radius:15px; }
.comment-box .comment-content { float: left; width: 400px; }
.comment-box .comment-content .comment-time { color: #ccc; margin-top: 3px; line-height: 16px; position: relative;}
.comment-box .comment-content .comment-praise { display: none; color: #369; padding-left: 17px; height: 20px; background: url("./images/praise.png") no-repeat; position: absolute; bottom: 0px; right: 44px;}
.comment-box .comment-content .comment-operate { display: none; color: #369; height: 20px; position: absolute; bottom: 0px; right: 10px;}
.comment-box .comment-content:hover .comment-praise { display: inline-block;}
.comment-box .comment-content:hover .comment-operate { display: inline-block;}
.text-box .comment { border: 1px solid #eee; display: block; height: 15px; width: 428px; padding: 5px; resize: none; color: #ccc}
.text-box .btn { font-size: 12px; font-weight: bold;float: right; width: 65px; height: 25px; border: 1px solid #0C528D; color: #fff; background: #4679AC;}
.text-box .btn-off { border: 1px solid #ccc; color: #ccc; background: #F7F7F7;}
.text-box .word{ float: right; margin: 7px 10px 0 0; color: #666;}
.text-box-on .comment{ height: 50px; color: #333;}
.text-box-on .btn{ display: inline;}
.text-box-on .word{ display: inline;}
</style>
</head>
<body>
<div id="list">
<div class="box clearfix">
<!-- 删除说说按钮 close-->
<a class="close" href="javascript:;">×</a>
<img class="head" src="images01/1.png" alt="">
<div class="content">
<div class="main">
<p class="txt">
<span class="user">西门大官人: </span>
~ All the luck is for you. ~
</p>
<img class="pic" src="images01/img1.jpg" alt="">
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<!-- 给说说点赞 praise -->
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="0" style="display: block;">0个人觉得很赞
</div>
<!--评论内容-->
<div class="comment-list">
<!-- 每次评论要添加的内容跟标签 -->
<div class="comment-box clearfix" user="self">
<img class="myhead" src="images01/4.jpg" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">我:</span>你说的都对……</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
<!--添加结束-->
</div>
<!--评论内容结束-->
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
<div class="box clearfix">
<a class="close" href="javascript:;">×</a>
<img class="head" src="images01/2.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">欧阳克 : </span>三亚的海滩很漂亮。
</p>
<img class="pic" src="images01/img5.jpg" alt=""/>
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<a class="praise" href="javascript:;">赞</a>
</div>
<div class="praises-total" total="0" style="display: none;"></div>
<div class="comment-list">
<div class="comment-box clearfix" user="other">
<img class="myhead" src="images01/3.png" alt="">
<div class="comment-content">
<p class="comment-text"><span class="user">韦小宝：</span>我也想去三亚。</p>
<p class="comment-time">
2019-01-19 14:36
<a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
<a href="javascript:;" class="comment-operate">删除</a>
</p>
</div>
</div>
</div>
<div class="text-box">
<textarea class="comment" placeholder="评论…"></textarea>
<button class="btn">回 复</button>
<span class="word"><span class="length">0</span>/140</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function(){
//单击文本框变大
$('.comment').on('click',function(){ //绑定文本框单击事件
$(this).height(80) //单击变大
})
//文本框输入字数减少
$('.comment').on('keyup',function(){ //绑定按键弹起事件
var len=$(this).val().length //存储文本域字数长度
$(this).parents('.text-box').find('.length').text(140-len) //查找并计算文本域剩余字数
})
//绑定回复信息内容
$('.btn').on('click',function(){ //绑定按钮单击事件
var val=$(this).prev().val() //获取文本框内容
if(val==''){ //判断文本框是否为空
alert('对不起，留言不能为空！') //为空则进行相应提示
}else{ //否则
var date=new Date() //获取当前时间
var y=date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds() //拼接当前时间
var html='<div class="comment-box clearfix" user="self"><img class="myhead" src="images01/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+val+'</p><p class="comment-time">'+y+'<a href="javascript:;" class="comment-praise" total="1" my="0" style="display: inline-block">1赞</a><a href="javascript:;" class="comment-operate">删除</a></p></div></div>' //拼接数据并存储html相应格式
$(this).parents('.box').find('.comment-list').append(html) //添加评论
$(this).parents('.box').find('.comment').val('') //清空输入框
$(this).parents('.box').find('.length').text('0') //初始化输入数字
$(this).prev().height(20) //将文本框高度还原
}
})
//删除评论
$(document).on('click','.comment-operate',function(){ //绑定按钮单击事件
if(confirm('确定删除吗？')){ //询问是否删除
$(this).parents('.comment-box').remove() //确定则删除
}
})
//评论点赞加1
$('.comment-praise').on('click',function(){ //绑定点赞单击事件
var num=parseInt($(this).attr('total'))+1 //将值加1后转为数值存储
$(this).attr('total',num) //将加1后的结果改变值
$(this).text(num+'赞') //将累计次数显示
})
//此帖点赞人数
$('.praise').on('click',function(){ //绑定此帖点赞单击事件
var num=parseInt($('.praises-total').attr('total'))+1 //将值加1后转为数值存储
$('.praises-total').attr('total',num) //将加1后的结果改变值
$('.praises-total').text(num+'个人觉得很赞') //将累计次数显示
})
//删除此帖
$('.close').on('click',function(){ //绑定删除按钮单击事件
if(confirm('确定删除吗？')){ //确认是否删除
$(this).parent('.box').remove() //确认则删除
}
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.动态绑定
on()方法可以在被选元素及子元素上添加一个或多个事件处理程序（绑定事件/动态绑定）
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
