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 相关文章推荐
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery中将json数据显示到页面表格的方法
May 27 jQuery
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
Mar 16 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
Apr 30 jQuery
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
如何使用jQuery操作Cookies方法解析
Sep 08 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 注释规范
2012/03/29 PHP
关于php 接口问题(php接口主要也就是运用curl,curl函数)
2013/07/01 PHP
php+ajax实现图片文件上传功能实例
2014/06/17 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
jQuery Mobile框架中的表单组件基础使用教程
2016/05/17 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
Node.js之网络通讯模块实现浅析
2017/04/01 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
2017/07/13 Javascript
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
Three.js利用orbit controls插件(轨道控制)控制模型交互动作详解
2017/09/25 Javascript
js实现rem自动匹配计算font-size的示例
2017/11/18 Javascript
vue移动端UI框架实现QQ侧边菜单组件
2018/03/09 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
Python闭包与装饰器原理及实例解析
2020/04/30 Python
python调用win32接口进行截图的示例
2020/11/11 Python
Python 用__new__方法实现单例的操作
2020/12/11 Python
详解Html5原生拖拽操作
2018/01/12 HTML / CSS
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
Html5元素及基本语法详解
2016/08/02 HTML / CSS
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
餐饮业员工工作决心书
2014/03/11 职场文书
大学学雷锋活动总结
2014/06/26 职场文书
信访工作个人总结
2015/03/03 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
2015年全国保险公众宣传日活动方案
2015/05/06 职场文书
检讨书模板大全
2015/05/07 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis