收藏本站 收藏本站
积木网首页 - 软件测试 - 常用手册 - 站长工具 - 技术社区
首页 > JavaScript > jQuery > 正文

首页 - PHP - 数据库 - 操作系统 - 游戏开发 - JS - Android - MySql - Redis - MongoDB - Win8 - Shell编程 - DOS命令 - jQuery - CSS样式 - Python - Perl

Access - Oracle - DB2 - SQLServer - MsSql2008 - MsSql2005 - Sqlite - PostgreSQL - node.js - extjs - JavaScript vbs - Powershell - Ruby

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

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

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

运行效果如下:

查看图片

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》及《jquery常用操作技巧汇总》

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

基于Datatables跳转到指定页的简单实例
因为项目用到Datatables发现在分页特别多时无法跳转到指定页,自己动手增加了#Datatables跳转到指定页#功能,实现代码如下:table=$('#user-table').dataTable({"bA

简单实现jquery隔行变色
本文实例为大家分享了jquery隔行变色展示的具体代码,供大家参考,具体内容如下效果图代码!DOCTYPEhtmlhtmlheadmetacharset="UTF-8"title/title/headscripttype="text/javas

jQuery实现动态添加节点与遍历节点功能示例
本文实例讲述了jQuery实现动态添加节点与遍历节点功能。分享给大家供大家参考,具体如下:动态添加节点:!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""

本周排行

更新排行

强悍的草根IT技术社区,这里应该有您想要的!
Copyright © 2010 Gimoo.Net. All Rights Rreserved  京ICP备05050695号