jquery的prepend和append方法实现消息向上/向下推送
2018-04-05 12:26
260 查看
项目中的需求：要求前端把webSocket获取到的后台实时消息显示在一个固定的div中；
1、把消息向上推送的方法：用到了jq的prepend方法，将后台传递过来的消息向上添加到div的ul中，向上显示最新的消息：var div = $("#div");
div.prepend("推送的消息");效果图如下：
2、把新消息向下推送的思路是：将固定的div的滚动条高度设置为与ul高度一致：var div = $("#div");
div.append("推送的消息");
div.scrollTop($("#ul").height());效果图如下：
1、把消息向上推送的方法：用到了jq的prepend方法，将后台传递过来的消息向上添加到div的ul中，向上显示最新的消息：var div = $("#div");
div.prepend("推送的消息");效果图如下：
2、把新消息向下推送的思路是：将固定的div的滚动条高度设置为与ul高度一致：var div = $("#div");
div.append("推送的消息");
div.scrollTop($("#ul").height());效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery中append、appendTo、prepend、prependTo、before、insertBefore、after与insertAfter方法注意事项
- 一种通过xmpp实现离线消息推送的方法及系统
- jquery源码系列：append方法实现过程
- js原生方式实现jquery中的append()方法
- jQuery实现的向下推送图文信息滚动效果
- jquery 连写注释;siblings() 方法;jQuery 的3种滑动方法;slideUp()向上滑动;slideDown()向下滑动;slideToggle()来回滑动
- jQuery 实现全部到精简的转换 点击“显示全部品牌按钮”显示到第二幅图，个别文字高亮显示，并且“显示全部品牌”按钮文字变为“精简显示品牌”并且向上向下箭头改变，用JQuery实现本功能。
- 一种通过xmpp实现离线消息推送的方法及系统
- jQuery实现的向上/向下无缝滚动简洁代码
- jQuery 追加元素的方法如append、prepend、before
- jquery实现点击向下滑动，再点向上滑动收回
- 消息推送实现方法、移动终端及消息推送系统
- Android中使用socket通信实现消息推送的方法详解
- jQuery实现新消息闪烁标题提示的方法
- jQuery 追加元素的方法如append、prepend、before
- .net平台推送ios消息的实现方法
- Redmine中消息主动推送的实现方法
- .net平台推送ios消息的实现方法
- jQuery 追加元素的方法如append、prepend、before