.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. java 基础(二) 搭建Java编译环境(linux系统)

    jdk安装配置 首先下载JDK和JRE,这里你的需要看看你的Linux系统是多少位的,比如我的是64位的:下载JDK并指定到Download目录,JRE同样操作:解压并且配置环境: tar -zxvf ...

  2. 老司机带你玩转面试(2):Redis 过期策略以及缓存雪崩、击穿、穿透

    前文回顾 建议前一篇文章没看过的同学先看下前面的文章: 「老司机带你玩转面试(1):缓存中间件 Redis 基础知识以及数据持久化」 过期策略 Redis 的过期策略都有哪些? 在聊这个问题之前,一定 ...

  3. 并发编程之synchronized(二)------jvm对synchronized的优化

    一.锁的粗化 看如下代码 public class Test { StringBuffer stb = new StringBuffer(); public void test1(){ //jvm的优 ...

  4. 定时器之Timer

    Timer中的TimerTask就是一个线程,可以一直执行下去的.可以使用Timer类的cancel方法来结束.-------------------------------------------- ...

  5. OSCP Learning Notes - Post Exploitation(3)

    Post-Exploit Password Attacks 1. Crack using the tool - john (Too slow in real world) Locate the roc ...

  6. OSCP Learning Notes - File Transfers(1)

    File transfer type: 1. HTTP Transfer files through the website. 2.wget wget http://10.0.0.109/exploi ...

  7. 【译】GraalVM—下一代JVM介绍

    原标题:GraalVM – an introduction to the next level JVM 随着Red Hat宣布Quarkus作为- 为GraalVM和HotSpot量身定制的下一代Ku ...

  8. echarts 实战 : 图表竖着或横着是怎样判定的?

    这个问题比较简单. echarts 的图表默认是竖着的. 只要 xAxis 和 yAxis 互换,竖着的图就变成了横着的图了. 所以我们可以可以写一个xy轴互换的方法. reverseXYAxis = ...

  9. corosync+pacemaker高可用集群

    高可用集群,是指以减少服务中断(如因服务器宕机等引起的服务中断)时间为目的的服务器集群技术.简单的说,集群就是一组计算机,它们作为一个整体向用户提供一组网络资源.这些单个的计算机系统就是集群的节点. ...

  10. 使用Thanos实现Prometheus指标联邦

    本文来自Rancher Labs Prometheus是CNCF中已经毕业的项目之一,主要用于监控和告警.在Kubernetes生态中,它是应用最为广泛的监控和告警工具之一.Rancher用户可以通过 ...