jquery留言板代码(JavaScript实现留言板添加删除留言)
类别:编程学习 浏览量:1383
时间:2021-10-16 00:18:47 jquery留言板代码
JavaScript实现留言板添加删除留言本文分享一个JavaScript的留言板添加留言、删除留言的小案例,内附详细代码分析、但不涉及数据库操作,只解析底层代码实现思路:
实现效果
运行代码界面:
输入留言进行添加:(最新的留言会在最顶部显示)
删除留言:(点击哪条则删除该条留言)
主要功能效果展示完毕,HTML和CSS样式这里不影响,下面直接上JS代码:
<script> // 获取所需元素对象 var text = document.querySelector('textarea'); var btn = document.querySelector('button'); var ul = document.querySelector('ul'); // 注册事件 btn.onclick = function () { // 给发布按钮绑定点击事件 if (text.value == '') { // 判断text.value是否为空,即用户是否有输入内容 alert('不能发布空内容哦!'); return false; } else { // 用户有输入内容则获取到该内容赋值给创建的元素li进行显示 // 1.创建元素 var li = document.createElement('li'); li.innerHTML = text.value + "<a href='javascript:;' title='删除该留言'>删除</a>"; // 将用户输入的内容赋值给创建的li元素并且在后面添加一个a标签用于后续删除该留言 // 2.添加元素 // ul.appendChild(li); // 这样写留言是追加到后面显示的 ul.insertBefore(li, ul.children[0]); // 让新增的留言在最上面显示,即从下往上显示的顺序 // 删除元素:删除的是当前a标签所在的li节点也就是它的父元素 var as = document.querySelectorAll('a'); for (var i = 0; i < as.length; i++) { as[i].onclick = function () { // 需要删除的li是a的父元素即this.parentNode; ul.removeChild(this.parentNode); // 删除ul里的li节点,而li是当前a标签的父节点,注意它们之间的关系 } } } text.value = ''; // 最后将留言输入框中的内容清空方便再次留言 } </script>
核心知识:
向页面添加元素节点:
我们想要给页面添加一个新的元素分两步:1.创建元素;2.添加元素
1.创建元素:element.createElement('创建的元素标签');
2.添加元素:node.appendChild(child); // node是父级即添加在哪个父级元素之中,child是创建好的子级元素,注:这样的添加元素方式类似于数组中的push方法即在后面追加元素
添加节点到指定位置:(主要是添加到指定元素前面显示)
node.insertBefore(child, 指定元素); // “指定元素”指将child添加到哪个元素的前面,“指定元素”一定也是node的子元素
删除页面元素节点:
node.removeChild(child); // node是父元素,child是node中的一个子元素
主要实现思路:这里就是主要运用向页面添加节点和删除节点的功能,将两个功能各自绑定到不同的按键上,如将添加节点的功能给到“发布”按钮,将删除节点的功能给到“删除”按钮,即实现了这样一个简易版的留言板案例。详细解析建议结合JS代码,内含详细注释。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- js验证身份证号
- Extjs msgTarget 提示位置
- vuejs图片缩放裁切(vue+js点击箭头实现图片切换)
- js里咋样设置css里面的属性(css不常见属性之pointer-events的使用方法)
- videojs播放流媒体(video.js支持m3u8格式直播的实现示例)
- jsforeach语句(JS面试题之forEach能否跳出循环详解)
- js原型链的理解(浅谈JS的原型和原型链)
- js基础入门到高级教程(浅谈如何循序渐进的学好JS)
- 如何判断数据是json还是字符串(JSON.stringify的多种用法总结)
- docker前端项目(Docker部署Nuxt.js项目的实现)
- 微信小程序js 抽奖概率(小程序实现筛子抽奖)
- js的模块模式设计(如何理解JavaScript模块化)
- js中什么是宏任务(浅谈JavaScript宏任务和微任务执行顺序)
- js如何编辑数组对象里的数组(JS操作对象数组实现增删改查实例代码)
- js实现继承的五种(JavaScript继承的三种方法实例)
- 前端表单验证(AmazeUI的JS表单验证框架实战示例分享)
- 逐渐消失的东北八大怪现象,进步的社会里我们遗失的是什么(逐渐消失的东北八大怪现象)
- 今日大雪,大雪养生这样做,一年都有好气色(大雪养生这样做)
- 粗盐是什么 粗盐的功效与作用(粗盐的功效与作用)
- 会 吃人 的客机 从天堂到地狱只需5分钟,图-104如何做到(会吃人的客机)
- 男人犯的错,为什么要女人来承担(为什么要女人来承担)
- 心理学 四个金蟾,哪个最招财 测你今生的运势有多棒(心理学四个金蟾)
热门推荐
- docker容器无法启动(Docker 无法停止或删除容器服务问题的解决方案)
- 在linux中实现可加载的内核模块(Linux实现驱动模块传参过程解析)
- python如何将xls转成xlsx(Python这样操作能存储100多万行的xlsx文件)
- python模块光照强度(我如何用 CircuitPython 和开源工具监控温室)
- python如何新建虚拟环境(详解如何管理多个Python版本和虚拟环境)
- 阿里云ecs负载均衡(阿里云ECS的CPU100%排查)
- dedecms怎样开启wap(dedecms织梦登录后台菜单栏无法显示解决方法)
- python时间序列模式识别(Python时间序列处理之ARIMA模型的使用讲解)
- video tv cast怎么用(video下autoplay属性无效的解决方法添加muted属性)
- 微信小程序开发简单计算器(小程序实现计算器功能)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9