收藏
批改状态：合格
老师批语：
一、jQuery HTML / CSS 方法
操作属性：
attr( ) 方法设置或返回被选元素的属性值
$('img').attr('width')； //返回img元素的属性值
$('img').attr('width','500px')； //设置img元素的的宽度为500px
$('p').attr('class','box')； //设置p元素的类为.box同时设置多个属性：
$('选择器').attr({属性名:值, 属性名:值 ...})
$('img').attr({width:'300px',height:'300px'});
$('p').attr({'class':'box',id:'text'});removeAttr( ) 从被选元素中移除属性
$('p').removeAttr('id','text');添加元素 - 元素内部添加：
append( ) 在被选元素的结尾插入内容
$('div').append('~ 结束啦 ~');
var a ='<p id="text">~ see you. ~</p>';
$('div').append(a)；prepend( ) 在被选元素的开头插入内容
$('div').prepend('~ 啊哈 这里是开始的地方 我是prepend ~');添加元素 - 元素外部添加：
after( ) 在被选元素之后插入内容
$('div').after('~ 啊哈 我是after的效果 ~');before( ) 在被选元素之前插入内容;
$('div').before('~ 啊哈 我是before的效果 ~') ;
删除元素：
remove( ) 方法删除被选元素及其子元素
$('div').remove();empty( ) 方法删除被选元素的子元素
$('div').empty();
二、微博评论输入点赞删除功能
<!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 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:;">赞</a>
</div>
<div class="praises-total" total="0" style="display: none;">0个人觉得很赞</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="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 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:;">赞</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>
$(function () {
// on() 方法可以在被选元素及子元素上添加一个或多个事件处理程序; 绑定事件 动态绑定
$('.comment').on('keyup', function () {
var len = $(this).val().length //文本框里面的信息内容字符的长度
$(this).parents('.text-box').find('.length').text(140 - len);
})
$(document).on('click', '.btn', function () {
// 遍历方法 prev()获得元素紧邻前一个同胞元素
var val = $(this).prev().val() //文本框里面的信息内容
if (val == '') {
alert('留言内容不能为空！')
} else {
var date = new Date()
var yy = 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">' + yy +
'<a href="javascript:;" class="comment-praise" total="0" my="0">赞</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)
}
})
$('.comment').click(function () {
$(this).height(80)
})
$(".praise").click(function () {
$(this).attr("class", "praise_2"); // 给说说点赞后换图标
$(this).parent().siblings(".praises-total").css("display", "block"); //点赞后显示“几个人觉得很赞”
var zNum = $(this).parent().siblings(".praises-total").attr("total"); //取得点赞前的点赞数
zNum++;
$(this).parent().siblings(".praises-total").attr("total", zNum);
$(this).parent().siblings(".praises-total").text(zNum + "个人觉得很赞");
})
$(document).on("click", ".comment-praise", function () {
$(this).css("display", "inline-block")
var Num = $(this).attr("total");
Num++;
$(this).attr("total", Num);
$(this).text(Num + "赞");
})
$(document).on("click", ".comment-operate", function () {
if (confirm("确定这条删除留言吗？")) {
$(this).parents(".comment-box").remove();
}
})
$(document).on("click", ".close", function () {
if (confirm("确定这条删除说说吗？")) {
$(this).parent().remove();
}
})
})
</script>
</body>
</html>
案例中使用的 on( ) 方法在被选元素及子元素上添加一个或多个事件处理程序。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
