jquery-11 留言板如何实现

一、总结

一句话总结：用live()方法让后面动态添加的元素也绑定之前对应类绑定的方法。

1、如何让后面动态添加的元素也绑定之前对应类绑定的方法？

用live()方法

91 $('.close').live('click',function(){

92     $(this).parent().hide(1000);

93 });

2、如何给隐藏元素添加慢慢消失的特效？

给hide方法指定时间就好

92     $(this).parent().hide(1000);

3、如何去除元素的轮廓？

将outline属性置为none

31         textarea:focus{

32             outline:none;

33         }

4、动态添加的标签如何有好看的样式？

添加类，在类中指定样式，不要在str中指定样式，这样太难写而且非常不清晰

84     str="<div class='show'>";

85     str+="<div class='close'>&times;</div>";
52         .show{

53             margin-top:20px;

54             border:2px solid #272822;

55             border-radius:10px;

56             height:50px;

57         }

58

59         .close{

60             float: right;

61             margin-right:10px;

62             font-size:30px;

63             cursor: pointer;

64         }

5、如何给元素动态的添加标签？

append方法

83     val=$('textarea').val();

84     str="<div class='show'>";

85     str+="<div class='close'>&times;</div>";

86     str+=val;

87     str+="</div>";

88     $('.main').append(str);

二、live实现完整的留言板

3.事件委派
live();
die();

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

             padding:0px;

         }

         .main{

             width:1300px;

             margin:0 auto;

         }    

         .mess{

             margin-top:15px;

         }

         textarea{

             width:98%;

             height:50px;

             resize:none;

             border-radius:20px;

             padding:15px;

             font-size:30px;

             font-weight:bold;

         }

         textarea:focus{

             outline:none;

         }

         button{

             width:100px;

             height:30px;

             background: #272822;

             font-weight: bold;

             border:2px solid #ccc;

             border-radius:10px;

             color:#fff;

         }

         button:hover{

             border-color:#00f;

         }

         button:focus{

             outline:none;

         }

         .show{

             margin-top:20px;

             border:2px solid #272822;

             border-radius:10px;

             height:50px;

         }

         .close{

             float: right;

             margin-right:10px;

             font-size:30px;

             cursor: pointer;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div class="main">

         <h1>小金留言板:</h1>

         <div class='mess'>

             <textarea></textarea>

         </div>

         <br>

         <button>OK</button>

     </div>

 </body>

 <script>

 $('textarea').focus(function(){

     this.value='';

 });

 $('button').click(function(){

     val=$('textarea').val();

     str="<div class='show'>";

     str+="<div class='close'>&times;</div>";

     str+=val;

     str+="</div>";

     $('.main').append(str);

 });

 $('.close').live('click',function(){

     $(this).parent().hide(1000);

 });

 </script>

 </html>
 

jquery-11 留言板如何实现的更多相关文章

  1. 11月8日PHP练习《留言板》

    一.要求 二.示例页面 三.网页代码及网页显示 1.denglu.php  登录页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tran ...

  2. LigerUi框架+jquery+ajax无刷新留言板系统的实现

    前些天发布了LigerUi框架的增.删.改代码,一堆代码真的也没一张图片.有的网友推荐上图,所有今天把涉及到这个框架的开源的留言板共享给大家.在修改的过程中可能有些不足的地方希望大家拍砖. 因为留言板 ...

  3. nodejs中利用expresss脚手架和bootstrap,数据库mongodb搭建的留言板案例

    ## 1. 先打开编辑器,创建一个项目 ## 2. 再打开cmd命令提示符下载express脚手架 express   项目名   --view=ejs 或express   -e    项目名 ## ...

  4. 个人网页的留言板实现与sae的数据库账户配置

    个人网页(github)的留言板终于搞定了.总之后端的东西不会写,只有修改以前教程里面的文件.记录一下重要的过程. 使用了留言保存的send()函数,模版有注册登录功能.根据需求修改了一下,去掉了登录 ...

  5. phpcms的评论改为留言板研究

    研究背景: phpcms里面默认是没有留言板的,之前我的博客里发过一个二次开发简介,里面有一个简单的留言板,包含前台提供表单,后台留言审核等功能,但是不提供用户登录等操作. 研究思路: phpcms里 ...

  6. ajax练习四留言板

    留言界面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. NVelocity 实现简单的留言板

    留言版简单实现 -------------------------------------------------------------------------------------------- ...

  8. JavaScript+IndexedDB实现留言板：客户端存储数据

    之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止G ...

  9. 问题：关于一个贴友的js留言板的实现

    需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> ...

  10. flask实战-留言板-Web程序开发流程

    Web程序开发流程 在实际的开发中,一个Web程序的开发过程要设计多个角色,比如客户(提出需求).项目经理(决定需求的实现方式).开发者(实现需求)等,在这里我们假设自己是一个人全职开发.一般来说一个 ...

随机推荐

  1. 50行python代码实现个代理server（你懂的）

    之前遇到一个场景是这种: 我在自己的电脑上须要用mongodb图形client,可是mongodb的server地址没有对外网开放,仅仅能通过先登录主机A,然后再从A连接mongodbserverB. ...

  2. DIV+CSS两种盒子模型（W3C盒子与IE盒子）

    在辨析两种盒子模型之前.先简单说明一下什么叫盒子模型. 原理: 先说说我们在网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS ...

  3. [BZOJ1672][Usaco2005 Dec]Cleaning Shifts 清理牛棚 线段树优化DP

    链接 题意:给你一些区间,每个区间都有一个花费,求覆盖区间 \([S,T]\) 的最小花费 题解 先将区间排序 设 \(f[i]\) 表示决策到第 \(i\) 个区间,覆盖满 \(S\dots R[i ...

  4. 1.22 Python基础知识 - 正则表达式

    Python正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re ...

  5. 交叉编译工具链bash: gcc：no such file or directory

    在进行交叉编译工具链安装时,有三种方法: 1.源码编译,手动安装 2.二进制可执行文件直接安装 3.直接解压工具链,手动修改环境变量 为了方便,我们多用方法3进行安装.但是问题来了,你的工具链制作时有 ...

  6. python学习一，python基本语法

    python基本语法: 1.python基本语句结构: 首先,在其他的语言中,比如java,c++,c#等,没写完一行语句之后,都需要在语句的末尾加一个分号,表示该语句结束,但是在python中,我们 ...

  7. 处理async void 方法中无法捕捉异常信息

    利用 NuGet库 Nito.AsyncEx 中的 AsyncContext类. 添加NuGet类库,使用AsyncContext AsyncContext.Run(Action action);

  8. mysql-5.7.19-winx64服务无法启动解决方案

    解压mysql压缩包时没有data文件夹,不要手动创建,在cmd下直接运行命令: mysqld –initialize-insecure,data文件夹会自动生成,注意单词千万不要拼错,不要写成–in ...

  9. 洛谷 P1626 象棋比赛

    P1626 象棋比赛 题目描述 有N个人要参加国际象棋比赛,该比赛要进行K场对弈.每个人最多参加两场对弈,最少参加零场对弈.每个人都有一个与其他人不相同的等级(用一个正整数来表示). 在对弈中,等级高 ...

  10. Spring.net的Demo项目，了解什么是控制反转

    Spring这个思想,已经推出很多年了. 刚开始的时候,首先是在Java里面提出,后来也推出了.net的版本. Spring里面最主要的就是控制反转(IOC)和依赖注入(DI)这两个概念. 网上很多教 ...