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 Plupload上传插件的使用
Apr 19 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery实现仿京东防抖动菜单效果示例
Jul 06 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
js/jQuery实现全选效果
Jun 17 jQuery
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 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来写记数器(详细介绍)
2006/10/09 PHP
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
PHP中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
JAVASCRIPT style 中visibility和display之间的区别
2010/01/22 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
2013/11/25 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
jQuery中用dom操作替代正则表达式
2014/12/29 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
微信小程序 navbar实例详解
2017/05/11 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
JS+WCF实现进度条实时监测数据加载量的方法详解
2017/12/19 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
python数据结构之图的实现方法
2015/07/08 Python
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python入门之三角函数atan2()函数详解
2017/11/08 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
2017/12/15 Python
Python爬虫的两套解析方法和四种爬虫实现过程
2018/07/20 Python
django序列化serializers过程解析
2019/12/14 Python
python turtle 绘制太极图的实例
2019/12/18 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
html5教程调用绘图api画简单的圆形代码分享
2013/12/04 HTML / CSS
党员个人思想汇报
2013/12/28 职场文书
大学专科求职信
2014/07/02 职场文书
学生安全责任书范本
2014/07/24 职场文书
成绩单家长意见
2015/06/03 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
CSS3实现360度循环旋转功能
2022/02/12 HTML / CSS
零基础学java之循环语句的使用
2022/04/10 Java/Android