.box {
width: 500px;
height: 500px;
border: 1px solid #efefef;
margin: 0 auto;
text-align: center;
} textarea {
width: 100%;
} ul {
list-style: none;
padding:;
} ul li {
height: 40px;
line-height: 40px;
border-bottom: 1px dashed #efefef;
} ul li font {
float: left;
} ul li a {
float: right;
}
<div class="box">
<textarea name="" class="txt" id="" cols="30" rows="10"></textarea>
<button class="btn">发布</button>
<ul></ul>
</div>
$(function () {
$(".btn").on("click", function () {
if ($(".txt").val() == '') {
alert("请先输入留言")
return false;
}
var li = $("<li></li>")
li.html($(".txt").val() + "<a href='#'>删除</a>")
$("ul").prepend(li)
li.slideDown()
$(".txt").val("")
})
$("ul").on("click", "a", function () {
$(this).parent().slideUp(function () {
$(this).remove()
})
})
})

jQuery 发布微博案例的更多相关文章

  1. Web 开发人员不能错过的 jQuery 教程和案例

    jQuery 把惊喜延续到设计领域,处处带来极大的灵活性,创造了许多体验良好的设计,而且拥有不错的性能.这里分享一组 Web 开发人员不能错过的 jQuery 教程和案例,帮助你更好的掌握 jQuer ...

  2. jquery mobile小案例

    ---恢复内容开始--- [jquery mobile小案例]效果图如下: 首先先创建一个页面主要使用data-role="page"这个指令,我们给它起个id="pag ...

  3. HBase应用之微博案例

    一. 需求分析 1) 微博内容的浏览,数据库表设计 2) 用户社交体现:关注用户,取关用户 3) 拉取关注的人的微博内容 二. 代码实现 代码设计总览: 1.创建命名空间以及表名的定义 //获取配置 ...

  4. JQuery的使用案例(二级联动,隔行换色,轮播图,广告插入)

    JQuery的使用案例 (一)利用JQuery完成省市二级联动 第一步:确定事件(change事件),在绑定的函数里面获取用户选择的省份 第二步:创建二维数组来存储省份和城市 第三步:遍历二维数组中的 ...

  5. jquery实现微博输入和发布

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. Web前端JQuery入门实战案例

    前端jquery入门到实战 为什么要学习Jquery?因为生活. 案例: <!DOCTYPE html> <html lang="zh-CN"> <h ...

  7. 75.《nodejs开发指南》express4.x版-微博案例完整实现

    转自:https://blog.csdn.net/cgwcgw_/article/details/39317587 完整代码下载 https://github.com/haishangfeie/wei ...

  8. js控住DOM实现发布微博简单效果

    这段代码的效果具体是输入标题和内容,点击发布把消息发布出去,并使最新的消息始终在内容的最上面,代码为: <!DOCTYPE html> <html lang="en&quo ...

  9. iOS开发——UI进阶篇(三)自定义不等高cell,如何拿到cell的行高,自动计算cell高度,(有配图,无配图)微博案例

    一.纯代码自定义不等高cell 废话不多说,直接来看下面这个例子先来看下微博的最终效果 首先创建一个继承UITableViewController的控制器@interface ViewControll ...

随机推荐

  1. web 部署专题(八):Nginx 反向代理中cookie相关问题

    问题3:认证问题 Domino服务器中,通过写了一些接口代码,提供RESTful的服务,来对手机端进行提供服务.但是由于原来的环境,没有SSO,而且不通过认证,没法访问到Domino里面的接口代码. ...

  2. 数据可视化之DAX篇(二十一)连接表的几个DAX函数,一次全掌握

    https://zhuanlan.zhihu.com/p/67015995 编写DAX代码进行业务分析时,经常会用到表与表之间的连接计算,比如在之前的产品关联分析一文中(如何用Power BI分析产品 ...

  3. LDAP脚本批量导出用户

    背景:工作原因,搭建了LDAP服务,然后用户数过多,因为懒所以就通过python代码生成ldap脚本进行批量导入用户 1.整理用户名单,格式如下: 注:上述格式影响代码中的excel读取代码 2.py ...

  4. 解决redis秒杀超卖的问题

    我们再使用redis做秒杀程序的时候,解决超卖问题,是重中之重.以下是一个思路. 用上述思路去做的话,我们再用户点击秒杀的时候,只需要检测,kucun_count中是否能pop出数据,如果能pop出来 ...

  5. 浏览器如何执行JS

    作为JS系列的第一篇,内容当然是浏览器如何执行一段JS啦. 首先通过浏览器篇我们可以得知,JS是在渲染进程里的JS引擎线程执行的.在此之后还要了解几个概念,编译器(Compiler).解释器(Inte ...

  6. 机房vscode使用方法

    问题 众所周知,机房中的电脑有一个win7系统,(非常的好,摆脱linux了),同时win7上有一个 vscode ,更好了. 但是!vscode 由于老师不允许联网,导致插件无法安装,更为恶心的事, ...

  7. CUDA Programming Guide 学习笔记

    CUDA学习笔记 GPU架构 GPU围绕流式多处理器(SM)的可扩展阵列搭建,每个GPU有多个SM,每个SM支持数百个线程并发执行.目前Nvidia推出了6种GPU架构(按时间顺序,详见下图):Fer ...

  8. vue 应用 :关于 ElementUI 的 message 组件

    我们知道,这个东西的基本用法是这样的: this.$message({ message: '恭喜你,这是一条成功消息', type: 'success' }); 但是我觉得这样还是有点麻烦,所以我决定 ...

  9. 使用SQL语句进行数据复制

    使用SQL语句对数据或者表进行复制,一般用于两张表结构相同的时候使用. SQL Server中,如果目标表存在: insert into 目标表 select * from 原表; SQL Serve ...

  10. 设计模式:memento模式

    目的:在不破坏系统封装性的前提下,记录系统每一步的状态,可以做到状态回退和前进 方法: 定义一个数据类,保存所有相关数据 定义一个管理类,提供保存和恢复的接口 具体操作类调用管理类的保存和恢复接口 例 ...