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()方法可以在被选元素及子元素上添加一个或多个事件处理程序（绑定事件/动态绑定）
Correction status：Uncorrected
Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
