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


Posted in jQuery onNovember 08, 2017

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

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <title>无刷新评论 - 3water.com</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>

运行效果如下:

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

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
jQuery实现radio第一次点击选中第二次点击取消功能
May 15 jQuery
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
jQuery 改变P标签文本值方法
Feb 24 jQuery
JQuery元素快速查找与操作
Apr 22 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 #jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
javascript+jQuery实现360开机时间显示效果
Nov 03 #jQuery
基于jQuery解决ios10以上版本缩放问题
Nov 03 #jQuery
jQuery简单实现对数组去重及排序操作实例
Oct 31 #jQuery
jQuery ajax读取本地json文件的实例
Oct 31 #jQuery
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
php通用防注入程序 推荐
2011/02/26 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
php中将数组转成字符串并保存到数据库中的函数代码
2013/09/29 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
JS跨域代码片段
2012/08/30 Javascript
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JS实现图片的不间断连续滚动的简单实例
2016/06/03 Javascript
AngularJS创建自定义指令的方法详解
2016/11/03 Javascript
2种在vue项目中使用百度地图的简单方法
2018/09/28 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
layui时间控件选择时间范围的实现方法
2019/09/28 Javascript
Python 字典(Dictionary)操作详解
2014/03/11 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python使用配置文件过程详解
2019/12/28 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
为女性购买传统的印度服装和婚纱:Kalkifashion
2019/07/22 全球购物
这段代码难道不该打印出56吗
2013/02/27 面试题
临床医学专业毕业生的自我评价
2013/10/17 职场文书
打架检讨书400字
2014/01/17 职场文书
机工车间主任岗位职责
2014/03/05 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
教师自我剖析材料(群众路线)
2014/09/29 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
行政司机岗位职责
2015/04/10 职场文书
无工作证明怎么写
2015/06/15 职场文书
结婚十年感言
2015/07/31 职场文书
关于军训的感想
2015/08/07 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书
Mysql忘记密码解决方法
2022/02/12 MySQL