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实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
简单实现jQuery轮播效果
Aug 18 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
jquery添加div实现消息聊天框
Feb 08 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jQuery三组基本动画与自定义动画操作实例总结
May 09 jQuery
JQuery Ajax如何实现注册检测用户名
Sep 25 jQuery
jquery实现拖拽添加元素功能
Dec 01 jQuery
jquery插件实现代码雨特效
Apr 24 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
基于文本的搜索
2006/10/09 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
thinkphp整合系列之极验滑动验证码geetest功能
2019/06/18 PHP
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JS实现闪动的title消息提醒效果
2014/06/20 Javascript
JS实现双击编辑可修改状态的方法
2015/08/14 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
JS简单封装的图片无缝滚动效果示例【测试可用】
2017/03/22 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
详解javascript replace高级用法
2019/02/17 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
详解原生JS回到顶部
2019/03/25 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
django的settings中设置中文支持的实现
2019/04/28 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
解决Jupyter notebook中.py与.ipynb文件的import问题
2020/04/21 Python
如何在django中运行scrapy框架
2020/04/22 Python
Python datetime 如何处理时区信息
2020/09/02 Python
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
2016/02/28 HTML / CSS
软件配置管理有什么好处
2015/04/15 面试题
小学新学期教师寄语
2014/01/18 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
法人委托书范本格式
2014/09/15 职场文书
2014年大堂经理工作总结
2014/11/21 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
如何起草一份正确的合伙创业协议书?
2019/07/04 职场文书
Python测试框架pytest高阶用法全面详解
2022/06/01 Python