Exemple détaillé d'une simple fonction de commentaire sans actualisation implémentée par jQuery-js tutoriel-php.cn

Exemple détaillé d'une simple fonction de commentaire sans actualisation implémentée par jQuery

小云云

Libérer： 2017-12-23 10:21:30

original

2036 Les gens l'ont consulté

Lorsque nous parcourons des articles ou d'autres contenus connexes, nous souhaitons lire les commentaires mais ne voulons pas actualiser. Comment implémenter cette fonction ? Cet article présente principalement la fonction de commentaire simple sans actualisation implémentée par jQuery, impliquant des techniques d'implémentation liées à la réponse aux événements jQuery et au fonctionnement dynamique des attributs des éléments de page. Le code est équipé de commentaires plus détaillés pour une compréhension facile. Les amis qui en ont besoin peuvent s'y référer. ça. J'espère que cela pourra aider tout le monde.

L'exemple de cet article décrit la simple fonction de commentaire sans actualisation implémentée par jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

<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>

Copier après la connexion

L'effet de l'opération est le suivant :