jQuery特效：实现微博发布界面
知识点
- resize: none ：textarea不允许拉动
- text-indent ：规定文本块中首行文本的缩进
- $.trim(str)：去掉字符串起始和结尾的空格
- focus([[data],fn])：当元素获得焦点时，触发 focus 事件
- 如果只将点击事件绑定在li标签上，新增的li标签不会带有绑定事件。
解决方案：
① 在新增li标签时候，为其增加绑定事件。但代码较为冗余。
② 事件委托。将事件绑定在父级标签上。
语法：父级标签.on(事件,事件源,触发函数)例如：
$('.dataList>ul').on('click', 'li', function () {$(this).animate({'width': '0px'}, 1000, function () {$(this).remove();}); });
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;list-style: none;}body {background-image: url("images/body_bg.jpg");}.box {width: 700px;margin:100px auto;}.input {width: 700px;height: 200px;border: 1px solid #cccccc;background-color: white;border-radius: 6px;}.input .content {width: 690px;height: 150px;margin: 5px;box-sizing: border-box;border: 1px solid gray;resize: none; outline: none; padding: 10px;}.input .submit {width: 100px;height: 30px;float: right;background: orangered;color: white;margin-bottom: 5px;margin-right: 5px; border: none; outline: none;cursor: pointer;}.dataList {width: 600px;margin: 50px auto;}.dataList>ul>li {width: 100%;height: 40px;line-height: 40px;color: slategray;background: lightblue;margin-bottom: 5px;border-radius: 40px;text-indent: 10px;cursor: pointer;}</style>
</head>
<body>
<div class="box"><div class="input"><textarea class="content"></textarea><button class="submit">发布</button></div><div class="dataList"><ul><li>今天的天气很好呀!</li><li>今天的天气很好呀!</li><li>今天的天气很好呀!</li></ul></div>
</div>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {// 0. 获取需要的标签var $content = $('.content');// 1. 监听按钮的点击$('.submit').click(function () {// 1.1 获取输入的内容var content = $content.val();// 1.2 容错if($.trim(content).length <= 0){alert('请输入内容!');//1.2.1 清空输入框内容$content.val('');// 1.2.2 获得焦点$('.content').focus();return;}// 1.3 创建节点var $newLi = $('<li>' + content +'</li>');/*$newLi.click(function () {$(this).animate({'width': '0px'}, 1000, function () {$(this).remove();});});*/// 1.4 追加到ul里面var $ul = $('.dataList>ul');$newLi.prependTo($ul);// 1.5 设置追加的动画$newLi.hide();$newLi.slideDown(500);// 1.6 额外的操作$content.val('');$content.focus();});// 2. 点击li标签, 删除/*$('.dataList>ul>li').click(function () {$(this).animate({'width': '0px'}, 1000, function () {$(this).remove();});});*//* $('.dataList>ul').on('click', 'li', function () {$(this).animate({'width': '0px'}, 1000, function () {$(this).remove();});});*/$('body').on('click', 'li', function () {$(this).animate({'width': '0px'}, 1000, function () {$(this).remove();});});});
</script>
</body>
</html>
运行结果
jQuery特效：实现微博发布界面相关推荐
- jQuery实现模拟微博发布框
jQuery实现模拟微博发布框 刚开始界面 1.输入内容,点击发布按钮,添加到下面. 2.输入内容,按下回车键,同样可以添加内容 3.点击删除,删除该条信息. 效果展示 所有代码 <!DOCTY ...
- HTML聊天框特效,利用jQuery实现响应式聊天窗口界面特效
特效描述:利用jQuery实现 响应式 聊天窗口 界面特效.利用jQuery实现响应式聊天窗口界面特效 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 10 Conversations ...
- jQuery实现微博发布
文章目录 一.案例演示 二.操作步骤 1.html代码 2.js代码 一.案例演示 在输入框中输入内容,点击发布滑动到输入框下面,输入框内容消失,点击删除可以移除一列. 二.操作步骤 1.html代码 ...
- autojs微博_js实现微博发布小功能
微博发布功能,可发布可删除.样式没设置忽略,主要知识点及注意点: 1.动态添加节点标签. 2.内容为空时不能发布. 3.新发布的内容要在上面. 4.内容删除要同时删除掉节点. 5.为保持样式输入框要设 ...
- jQuery特效 | 导航底部横线跟随鼠标缓动
jQuery特效 | 导航底部横线跟随鼠标缓动 2月初,接收到了公众号读者的效果需求,希望能够讲解这样一个实例: 横排的导航,下边框是一条横线,随着鼠标移入某个导航,横线滑动到相应位置. 今天就针对该 ...
- 桌面系统（web前端）jQuery制作Web桌面系统界面类似WebQQ桌面布局
源码不是我写的,但是我在基础上修改了一些内容. 可参考,http://www.xwcms.net/webAnnexImages/fileAnnex/20140220/82693/index.html ...
- 企业微博发布时间_内容_原则
2019独角兽企业重金招聘Python工程师标准>>> 微博营销服务理念 我们可以针对企业的官方微博提供设计.资源整合.优化等服务.在日常运营中,提供活动及话题设计,提供在线答疑.实 ...
- 10个经典而简单的jQuery特效设计在线演示
jQuery对我们web开发者来说绝对是最经典.最有价值的一个框架之一了,因为他真正让我们感受到了write less,do more的至高境界.前段时间,我也陆续向大家介绍了一些有关jQuery的资 ...
- html 微博下拉菜单,jQuery实现模仿微博下拉滚动条加载数据效果
本文实例讲述了jQuery实现模仿微博下拉滚动条加载数据效果.分享给大家供大家参考,具体如下: 滚动条距离底部 $(function () { var i = 4; $(window).bind(&q ...
- jQuery 3.5.0 发布
jQuery 3.5.0 发布了,此版本主要是安全修复. jQuery 在其jQuery.htmlPrefilter方法中使用了正则表达式,以确保在传递给方法时,所有结束标记均符合 XHTML 规则. ...
最新文章
- CentOS7（64位）安装NVIDIA显卡驱动和CUDA8.0
- sql and和in能连用吗_解析法律英语中【同义词连用】现象
- 华为_H3C_Juniper设备常规巡检命令
- STM32 KEIL MDK 本地时间和Unix timestamp相互转换
- summerDao-比mybatis更强大无需映射配置的dao工具
- Cannot resolve bean 'xxx' less... (Ctrl+F1) Inspection info:Checks autowir
- Vue2.3.0+使用.sync修饰符对prop进行双向绑定/子组件同步prop到父组件绑定的值
- 深入理解Magento－第十章－数据操作数据收集器
- 【AI视野·今日CV 计算机视觉论文速览 第216期】Wed, 9 Jun 2021
- 如果一年只能两次旅游，你会选择什么季节去什么地方？
- C语言学习笔记--函数
- 周五，放松心情，听我来分享问题背后的背后（一）
- apicloud链接访问本地数据库
- PHP高并发和大流量解决方案
- 台式计算机如何双屏显示,电脑怎么分屏？|台式电脑双显示器连接方法
- 计算机电源可调电阻,电脑ATX电源改0V-30V可调电源,电流7A
- Molten 功能简介以及使用指南
- 自动驾驶仿真软件SCANeR studio（四）scenario模式下脚本
- 数据结构实验——顺序表操作
- HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)