jQuery.trim(str) 去掉字符串起始和结尾的空格

$.trim("  hello, how are you?  ");

运行结果：

"hello, how are you?"

焦点

焦点即光标，是在页面上屏幕中闪动的的小竖线，鼠标点击可获得光标。

focus() 设置焦点

$content.focus() // 获取焦点

blur() 失去焦点

$content.blur(); // 使文本框失去焦点（无法输入，想要输入需要鼠标再次点击）

微博案例

静态页面

<!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;}</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>
</body>
</html>

运行效果：

监听发布按钮点击

var $content = $('.content');
//1.监听按钮点击
$('.submit').click(function () {//1.1 获取输入框的内容var content = $content.val();// alert(content);//1.2 容错if ($.trim(content).length <= 0) {alert('请输入内容');//1.3 清空输入框的内容，让输入框获取焦点$content.val('') // 清空$content.focus() // 输入框获得焦点return;}//1.3 取出内容，创建一个新的节点var $newLi = $('<li>' + content + '</li>')var $ul = $('.dataList ul'); // ul$newLi.prependTo($ul); // 将新标签插入到 ul 里的最前面//1.4 追加动画的效果$newLi.hide();$newLi.slideDown(500);$content.val(''); // 清空$content.focus(); // 输入框获得焦点});

实现效果：文本框内不输或者只输入空格，跳出提示“请输入内容”。

文本框内正常输入，则内容显示在下方。

添加删除事件（存在问题）

//2.监听li的点击，并且删除
$('.dataList>ul>li').click(function () {$(this).animate({width:'0'}, 1000,function () {$(this).remove();});
});

运行效果：点击下方的内容则向左滑动删除。

存在问题

只能删除默认存在的节点，不能删除后来添加的节点。

解决方法一：创建节点时添加异步事件

创建节点的同时，给它添加异步事件。

var $content = $('.content');
//1.监听按钮点击
$('.submit').click(function () {//1.1 获取输入框的内容var content = $content.val();// alert(content);//1.2 容错if ($.trim(content).length <= 0) {alert('请输入内容');//1.3 清空输入框的内容，让输入框获取焦点$content.val('') // 清空$content.focus() // 输入框获得焦点return;}//1.3 取出内容，创建一个新的节点var $newLi = $('<li>' + content + '</li>')/********************此处为新增代码*******************/$newLi.click(function () { // 创建节点的同时，给它添加异步事件$(this).animate({width:'0'}, 1000,function () {$(this).remove();});})/*****************************************************/var $ul = $('.dataList ul');$newLi.prependTo($ul);//1.4 追加动画的效果$newLi.hide();$newLi.slideDown(500);$content.val(''); // 清空$content.focus(); // 输入框获得焦点
});//2.监听li的点击，并且删除
$('.dataList>ul>li').click(function () {$(this).animate({width:'0'}, 1000,function () {$(this).remove();});
});

解决方法二：事件委托

一般事件委托产生于：点击了子控件，将事件统一传递给父控件处理。

原理

当子控件点击事件触发后，借助事件冒泡的原理,，会传递给父控件。此时，父控件只需要判断是否是指定的子控件即可。

场景

新创建的DOM对象，被添加到网页中后，需要重新手动新增事件。

//2.监听li的点击，并且删除
$('.dataList>ul').on('click', 'li', function () { //利用事件委托，所以监听父控件，判断是否是指定的子控件$(this).animate({width:'0'}, 1000, function () {$(this).remove()});
});

运行效果：点击下方内容，会向左滑动消失。

【jQuery笔记Part4】02-jQuery微博案例相关推荐

【jQuery笔记Part4】04-jQuery案例-轮播图
jQuery案例-大屏焦点图-节点操作案例简介静态页面添加事件 jQuery笔记目录案例简介轮播图: 点击浏览器左侧,则,展示左边一个图片, 点击浏览器右侧,则,展示右边一个图片, 越界循环 ...
【jQuery笔记Part4】03-事件详解
事件详解 display:inline-block 事件冒泡阻止事件冒泡常用事件事件常用属性事件监听方法示例页面: on() 绑定事件绑定单个事件绑定多个事件->同一回调函数绑定 ...
【jQuery笔记Part4】01-jQuery-节点操作-添加节点-删除节点-复制节点
节点操作添加节点静态页面内部添加(父子关系) append(): 添加节点->追加到最后 (父子关系) appendTo(tag): 把创建的节点添加到指定节点之后(父子关系) prepe ...
【jQuery笔记】狂拍灰太狼案例笔记
狂拍灰太狼使用 jQuery 语法实现的新浪微博页面我要实现的功能: 点击开始游戏按钮,开始游戏游戏有时间进度条游戏结束以后可以点击重新开始按钮,重新开始游戏有游戏规则点击灰太狼加 10 ...
jQuery笔记——工具函数——jQuery标志
jQuery定义了很多工具函数,这些函数的命名空间为$,但不操作包装集,用户可以把它看作是顶层函数,不同之处是他们定义在$实例上,而不是定义在window实例上,类似于静态类型函数. 通常来说,工具函 ...
【14笔记】HBase实战--微博案例
1.需求分析 1.微博内容的浏览,数据库表设计 2.用户社交体现:关注用户,取关用户 3.拉取关注的人的微博内容 2.代码设计 1)创建命名空间以及表名的定义 2)创建微博内容表 3)创建用户关系表 ...
jQuery笔记综合
jQuery笔记一. jQuery入门目标: 能够说出什么是jQuery 能够说出jquery的优点能够简单使用jquery 能够说出dom对象和jquery对象的区别 1.jQuery概述仓 ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换概念为什么要转换转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象原理图 jQuery笔记目录概念 jQuery对象是通 ...

【jQuery笔记Part4】02-jQuery微博案例

jQuery微博案例