jQuery评论回复源码资源-CSDN下载

共6个文件

js：3个

jpg：1个

css：1个

jQuery

评论回复

JavaScript

5星 · 超过95%的资源需积分: 50 104 浏览量 2018-09-03 21:56:47 上传评论 1 收藏 121KB ZIP 举报

在IT行业中，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。本源码“jQuery评论回复”旨在实现一个功能完善的评论系统，允许用户进行无刷新的互动，类似于微博和贴吧的回复功能。这种功能通过Ajax技术实现，大大提升了用户体验，因为页面无需整体刷新即可完成数据的提交和加载。 jQuery库提供了丰富的选择器，使得选取HTML元素变得简单。在评论回复系统中，可能需要根据ID、类名或属性选取评论区域、评论框、回复按钮等元素。例如，`$("#commentArea")`用于选取ID为"commentArea"的元素，`$(".replyButton")`则可以选取所有class为"replyButton"的按钮。接着，jQuery的事件处理机制使得监听用户行为变得轻松。在评论回复功能中，通常会在用户点击“回复”按钮时触发一个函数。例如，`$(".replyButton").click(function() {...})`可以监听到所有回复按钮的点击事件，并执行相应的回调函数。 Ajax是Asynchronous JavaScript and XML的缩写，虽然现在XML并不常用，但Ajax的核心理念是异步数据交换，它可以在不重新加载整个网页的情况下与服务器交换数据并更新部分网页内容。在jQuery中，`.ajax()`方法是实现Ajax交互的主要方式。在评论回复系统中，可以使用它来发送评论内容到服务器： ```javascript $.ajax({ type: "POST", // 提交方式，通常是POST url: "submit_comment.php", // 服务器端处理评论的脚本 data: {content: commentContent}, // 要发送的数据，这里为评论内容 success: function(response) { // 成功回调，返回服务器的响应 // 更新评论列表，显示新评论 }, error: function(xhr, status, error) { // 错误回调 // 处理请求失败的情况 } }); ``` 为了实现无刷新的评论展示，需要在Ajax的`success`回调中动态插入新的评论到页面。jQuery提供了`.append()`方法，可以将新内容添加到已选元素的末尾。例如，如果`#commentList`是评论列表容器，可以这样添加新评论： ```javascript $("#commentList").append('<div class="comment">' + response.content + '</div>'); ``` 此外，为了保持良好的用户体验，还可以添加一些额外的功能，比如输入验证、加载提示、错误处理等。在用户提交评论前，可以使用`.trim()`去除输入的空白，`.length`检查长度是否符合要求。对于加载提示，可以使用`.show()`和`.hide()`控制进度条或者加载动画的可见性。 “jQuery评论回复源码”是一个结合了jQuery、Ajax和HTML元素操作的实例，它展示了如何构建一个实时、交互性强的评论系统。通过学习和理解这段代码，开发者可以提升自己的前端开发技能，更好地服务于用户，提供更加流畅的在线互动体验。

资源推荐

资源详情

资源评论

收起资源包目录

Jquery回复评论.zip （6个子文件）

Jquery回复评论

images

img.jpg 59KB

jquery.comment.js 6KB

jquery.min.js 91KB

bootstrap.min.js 35KB

css

bootstrap.css 138KB

index.html 4KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery评论插件可回复评论代码</title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <style> .container{ width: 1000px; } .commentbox{ width: 900px; margin: 20px auto; } .mytextarea { width: 100%; padding: 15px; overflow: auto; word-break: break-all; height: 100px; color: #000; font-size: 1em; resize: none; } .comment-list{ width: 900px; margin: 20px auto; clear: both; padding-top: 20px; } .comment-list .comment-info{ position: relative; margin-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ccc; } .comment-list .comment-info header{ width: 10%; position: absolute; } .comment-list .comment-info header img{ width: 100%; border-radius: 50%; padding: 5px; } .comment-list .comment-info .comment-right{ padding:5px 0px 5px 11%; } .comment-list .comment-info .comment-right h3{ margin: 5px 0px; } .comment-list .comment-info .comment-right .comment-content-header{ height: 25px; } .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{ padding-right: 2em; color: #aaa; } .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{ cursor: pointer; } .comment-list .comment-info .comment-right .reply-list { border-left: 3px solid #ccc; padding-left: 7px; } .comment-list .comment-info .comment-right .reply-list .reply{ border-bottom: 1px dashed #ccc; } .comment-list .comment-info .comment-right .reply-list .reply div span{ padding-left: 10px; } .comment-list .comment-info .comment-right .reply-list .reply p span{ padding-right: 2em; color: #aaa; } </style> </head> <body> <div class="container"> <div class="commentbox"> <textarea cols="80" rows="50" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea> <div class="btn btn-info pull-right" id="comment">评论</div> </div> <div class="comment-list">  </div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.comment.js" ></script> <script type="text/javascript" src="js/bootstrap.min.js"></script> <script type="text/javascript"> //初始化数据 var arr = [ {id:1,img:"./images/img.jpg",replyName:"K先生",beReplyName:"匿名",content:"曾经有一份真诚的感情放在我面前，我没有珍惜，如果上天再给我一次机会,我要对那个女孩说我爱你,如果非要给这份爱加个期限,我希望是一万年!",time:"2017-10-17 11:42:53",address:"深圳",osname:"win8.1",browse:"谷歌",replyBody:[]}, {id:2,img:"./images/img.jpg",replyName:"匿名",beReplyName:"",content:"我求求你嫁给我，虽说我没车，没房，没钱，没钻戒，但我有一颗陪你到老的心！等你老了，我依然背着你，给你当拐杖；等你没牙了，我就嚼碎了再喂给你吃；我一定等你死了以后我再死，要不把你一个人留在这世上，没人照顾，我做鬼也不放心！",time:"2017-10-17 11:42:53",address:"深圳",osname:"",browse:"谷歌",replyBody:[{id:3,img:"",replyName:"K先生",beReplyName:"匿名",content:"兄dei，如果我是女的，就凭你这一句话我一定会嫁给你！",time:"2017-10-17 11:42:53",address:"",osname:"",browse:"谷歌"}]}, {id:3,img:"./images/img.jpg",replyName:"K先生",beReplyName:"匿名",content:"深情不及久伴，由此，",time:"2017-10-17 11:42:53",address:"深圳",osname:"win10",browse:"谷歌",replyBody:[]} ]; $(function(){ $(".comment-list").addCommentList({data:arr,add:""}); $("#comment").click(function(){ var obj = new Object(); obj.img="./images/img.jpg"; obj.replyName="匿名"; obj.content=$("#content").val(); obj.browse="深圳"; obj.osname="win10"; obj.replyBody=""; $(".comment-list").addCommentList({data:[],add:obj}); }); }) </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p></p> <p>如果您对代码有疑问或有更好得建议，可以到<a href="http://www.gold404.cn/" target="_blank">K先生的个人博客</a>留言交流。</p> </div> </body> </html>

评论收藏

内容反馈