练习使用on()方法 以及jquery获取及设置内容 操作属性 添加元素 使用所学知识完成了作业
实例
<!DOCTYPE html>
<html>
<head>
<title>评论功能练习</title>
<meta charset="utf-8">
<link rel="icon" type="image/x-icon" href="static/images/logo.png">
<link rel="stylesheet" type="text/css" href="static/style.css">
<script type="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="list">
<div class="box clearfix">
<!-- 删除说说按钮 close-->
<a class="close" href="javascript:;">×</a>
<img class="head" src="static/images/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="static/images/img1.jpg" alt="">
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<!-- 给说说点赞 praise -->
<a class="praise" href="javascript:;"total="0">赞</a>
</div>
<div class="praises-total" total="4" style="display: block;">4个人觉得很赞</div>
<!--评论内容-->
<div class="comment-list">
<!-- 每次评论要添加的内容跟标签 -->
<div class="comment-box clearfix" user="self">
<img class="myhead" src="static/images/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="static/images/2.jpg" alt=""/>
<div class="content">
<div class="main">
<p class="txt">
<span class="user">欧阳克 : </span>三亚的海滩很漂亮。
</p>
<img class="pic" src="static/images/img5.jpg" alt=""/>
</div>
<div class="info clearfix">
<span class="time">02-14 23:01</span>
<a class="praise" href="javascript:;" total="0">赞</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="static/images/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(){
//显示输入字数 并减掉字符长度
// on()方法可以在被选元素及子元素上添加一个或多个时间处理程序;绑定事件 动态绑定
//keyup 键盘弹起事件
$('.comment').on('keyup',function(){
//获得信息内容的字符长度
var len=$(this).val().length;
$(this).parents('.text-box').find('.length').text(140-len);
// $(this).filter('.length').text(140-len);
})
//获取文本框 并动态绑定一个键盘弹起事件 新建变量获取文本框内容长度 找到文本框的父元素text-box 通过他找到后代元素length 改变length的文本内容 得到可以输入的字数
//点击回复按钮
//动态生成留言内容 on()方法 $(document).on()给文档中所有选中的class绑定上事件
// 点击回复按钮?
$(document).on('click','.btn',function(){
//验空
//prev()遍历方法 获得元素紧邻的前一个同胞元素 同级元素
//文本框里面的信息内容
var val=$(this).prev().val()
if(val==''){
alert('对不起 内容不能为空');
//后期需要改 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="static/images/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>'
$(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);
}
})
// 给文档中类名为btn的元素动态绑定点击事件,创建变量val获取同级上一个元素也就是文本框输入的内容,判断是否为空,如果为空弹窗提示,不为空,则创建3个变量 date为new的当前时间,y为字符串获取年月日小时分钟,html为回复框内容 包括输入内容 时间 赞 删除 里面连接了时间与文本内容 然后获取comment-list的div 在后面加入html变量的内容 然后评论区清空内容 字数清零 高度变为20;
//动态删除
// $('.comment-operate').on('click',function(){
// if(confirm('确定删除么?')){
// $(this).parents('.comment-box').remove();
// }
// })
$(document).on('click','.comment-operate',function(){
if(confirm('确定删除么?')){
$(this).parents('.comment-box').remove();
}
})
//给评论框加高度
$(document).on('click','.comment',function(){
$(this).height(80);
})
//给评论点赞
$(document).on('click','.comment-praise',function(){
var num=parseInt($(this).attr('total'))+1;
$(this).attr('total',num);
$(this).html(num+'赞');
})
//给作者点赞 a标签内部加入 total="0"
$(document).on('click','.praise',function(){
var num=parseInt($(this).attr('total'))+1;
$(this).attr('total',num);
$(this).html(num+'赞');
})
//删除作者的信息
$(document).on('click','.close',function(){
$(this).parent().remove();
})
})
//自己加删除
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
总结:
1:jquery操作属性
attr()方法设置或返回被选元素的属性值 必须是元素本身自带的 比如img 自带width src id class等
例:console.log($('img').attr('width'));
arrt添加单个class 例: $('span').attr('class','box');
arrt添加多个class $('选择器').attr({属性名:值,属性名:值,....}) 例:$('span').attr({'class':'box','id':'text'});
removeAttr()从被选元素中移除属性 例:$('span').removeAttr('id','text');
2:jquery添加元素 分为两种 内部添加与外部添加
1:元素内部添加:
append()在被选元素的结尾插入内容 可以是文字也可以是标签 例: $('#box').append('结束了');
prepend()在被选元素的开头插入内容 例:$('#box').prepend('我开始了<br>');
2:元素外部添加:
after()在被选元素之后插入内容 例:$('#box').after('我是after的内容');
before()在被选元素之后插入内容 例:$('#box').before('我是before的内容');
3:jquery删除元素
remove() 方法删除被选元素及其子元素 所有内容 例:$('#box').remove();
empty()方法删除被选元素的子元素 例:$('#box').empty();
4:on()方法
on()方法可以在被选元素及子元素上添加一个或多个时间处理程序;绑定事件 动态绑定