cari

Rumah  >  Artikel  >  hujung hadapan web  >  实例详解jQuery实现的简单无刷新评论功能

实例详解jQuery实现的简单无刷新评论功能

小云云
小云云asal
2017-12-23 10:21:302009semak imbas

在我们浏览文章或者其它相关内容时，我们想看评论但不想刷新，这种功能怎么实现呢？本文主要介绍了jQuery实现的简单无刷新评论功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下，希望能帮助到大家。

本文实例讲述了jQuery实现的简单无刷新评论功能。分享给大家供大家参考，具体如下：


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>无刷新评论 - www.jb51.net</title>
 <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
 <script type="text/javascript">
  //========================================================设定样式
  $(function () {
   var isFirst = true;
   $("#text1").css("color", "grey").focus(function () {
    if (isFirst) //判断用户是否第一次输入，如果是第一次输入，就将当前控件的值设为空
     $(this).val("");
    $(this).css("color", "Black")
   });
   $("#text1").bind("keydown", function () {//#text1控件绑定 keydown事件，当它被按下的时候就触发function()匿名函数，将isFirst设为false【这时候将isFirst设为fasle，那就么代表它不是第一次输入了。所以第二次点击#text1控件的时候它就不会将#text1的值设为空了】
    isFirst = false;
   });
   $("#text1").blur(function () {
    if ($(this).val().length <= 0) { //如果在失去焦点的时候用户名的长度<=0的话就重新提示用户"请输入用户名"
     $(this).css("color", "grey").val("请输入用户名")
    }
   })
  })
  $(function () {
   var isFirst = true;
   $("#text2").css("color", "grey").focus(function () {
    if (isFirst) //判断用户是否第一次输入，如果是第一次输入，就将当前控件的值设为空
     $(this).val("");
    $(this).css("color", "Black")
   });
   $("#text2").bind("keydown", function () {//#text1控件绑定 keydown事件，当它被按下的时候就触发function()匿名函数，将isFirst设为false【这时候将isFirst设为fasle，那就么代表它不是第一次输入了。所以第二次点击#text1控件的时候它就不会将#text1的值设为空了】
    isFirst = false;
   });
   $("#text2").blur(function () {
    if ($(this).val().length <= 0) { //如果在失去焦点的时候用户名的长度<=0的话就重新提示用户"请输入用户名"
     $(this).css("color", "grey").val("请输入评论的内容")
    }
   })
  })
  //==========================================================================实际内容
  $(function () {
   $("#btn1").click(function () {
    var tr = $("<tr><td>" + $("#text1").val() + ":" + "</td><td>" + $("#text2").val() + "</td></tr>")
    $("#table1").append(tr);
   })
  })
 </script>
</head>
<body>
<p>.......这是我的帖子，请大家评论。</p>
<table id="table1"></table>
<input type="text" value="请输入用户名" id="text1"/><br />
<textarea cols="20" rows="8" id="text2">请输入评论内容</textarea>
<input type="button" value="提交" id="btn1"/>
</body>
</html>

运行效果如下：

php+ajax实现无刷新评论解决方案

JS制作QQ聊天消息展示和评论提交功能的代码示例

使用JavaScript实现评论点赞功能

Atas ialah kandungan terperinci 实例详解jQuery实现的简单无刷新评论功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：简单了解vue2 单页面如何设置网页titleArtikel seterusnya：详解ES6中javascript实现函数绑定及类的事件绑定功能

Artikel berkaitan

Lihat lagi