JS+jQuery简单版发布、删除留言

首先用户在输入框中输入内容，按下发布按钮，内容到下面的li中，并且清空输入框中的内容

下面这个li元素就是后面创建的

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>textarea {resize: none;border: 1px solid pink}</style>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button>发布</button><ul></ul><script>//点击发布按钮，获取文本域中的文本，给下面新创建li中的值//获取文本框元素、按钮元素var text = document.querySelector('textarea')var btn = document.querySelector('button')var ul = document.querySelector('ul')//当按下按钮后就创建新的li元素,放到ul的后面btn.onclick = function() {//创建li元素   因为是每按一次按钮，下面就会添加一个li，需要用到循环//需要判断，当文本框里面的内容为空时，按下按钮是不会添加的if (text.value != '') {var li = document.createElement('li')ul.appendChild(li)//添加节点//赋值li里面的内容li.innerHTML = text.value//按下按钮后，文本框里面的值要清空text.value = ''}}</script>
</body></html>

分析：

1、点击按钮后，就动态创建一个li，添加到ul里面

2、创建li的同时，把文本域中的值通过li.innerHTML赋给li

3、如果想把新的留言显示到后面就用appendChild，如果显示到前面就用insertBefore

怎么实现放在前面：

并且实现删除留言的案例：

添加li后面对应添加一个删除按钮

1、把文本域的值赋值给li的同时多加一个删除的链接

2、需要把每个链接获取过来，当点击某一个链接的时候，删除当前链接所在的li;也就是当前链接的父亲

3、阻止链接跳转可以添加javascript:void(0),或者javascript:;

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>textarea {resize: none;border: 1px solid pink}li {background-color: pink;margin-top: 2px;width: 630px;height: auto;line-height: 30px;}p {font-size: 15px;margin-top: 0px;float: left;}button {width: 50px;height: 30px}li a {float: right;}</style>
</head><body><textarea name="" id="" cols="30" rows="10"></textarea><button class="btn">发布</button><ul></ul><script>//点击发布按钮，获取文本域中的文本，给下面新创建li中的值//获取文本框元素、按钮元素var text = document.querySelector('textarea')var btn = document.querySelector('.btn')var ul = document.querySelector('ul')console.log()//当按下按钮后就创建新的li元素,放到ul的后面btn.onclick = function() {//创建li元素   因为是每按一次按钮，下面就会添加一个li，需要用到循环//需要判断，当文本框里面的内容为空时，按下按钮是不会添加的if (text.value != '') {var li = document.createElement('li')//li里面创建一个p放内容// var p = document.createElement('p')// var dele = document.createElement('button')// ul.appendChild(li)ul.insertBefore(li, ul.children[0])//在li里面添加p// console.log(ul.children[0])// ul.children[0].appendChild(p)//在li里面添加删除按钮// ul.children[0].appendChild(dele)//添加节点//赋值li里面的内容li.innerHTML = text.value + "<a href='javascript:;'>删除</a>"// dele.innerHTML = '删除'// dele.style.float = 'right'//按下按钮后，文本框里面的值要清空text.value = ''//删除元素，删除的是li,当前a链接的父亲var as = document.querySelectorAll('a')for (var i = 0; i < as.length; i++) {as[i].onclick = function() {//node.removeChild(child)//  this.parentNode    li       父亲为ulul.removeChild(this.parentNode)}} //这个循环操作为什么放在按钮点击事件外面就不会起作用}}</script>
</body></html>

jQuery发布微博案例：

1、点击发布按钮，动态创建一个li，放入文本框中的内容和删除按钮，并且添加到ul中

2、点击删除按钮，可以删除当前的微博留言

可以不分span和a

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 600px;height: auto;border: 1px solid black}ul {margin-left: 80px;width: 300px;padding: 0px}li {list-style: none;width: 270px;height: 20px;display: inline-block;border-bottom: 1px dashed black;padding: 0px;position: relative;display: none;}li span {margin: 0px;position: absolute;left: 0px;}a {position: absolute;right: 0px}</style><script src="jquery.min.js"></script>
</head><body><div class="box"><span>微博发布</span><textarea name="" id="" cols="30" rows="10"></textarea><input type="button" value="发布"><ul></ul></div><script>//给发布按钮添加点击事件，首先判断text里面有没有内容，有的化点击之后就添加一个li,里面的内容就是textarea里面的内容$(function() {$('input').on({click: function() {//在ul里面添加li和a/应该是ul里面添加li，li里面包含一个span和a//创建元素if ($('textarea').val() != '') {var index = 0var li = $('<li></li>')var span = $('<span></span>')var a = $('<a href="javascript:;">删除</a>')$('ul').prepend(li)$('ul li').eq(index).append(span)$('ul li').eq(index).append(a)//li的内容为text的内容,值改变当前的li$('ul li').eq(index).children('span').text($('textarea').val())$('ul li').eq(index).slideDown()//此时再情况textarea里面的文本$('textarea').val('')} else {alert('请输入内容')}//添加删除操作，应该用on，此时才可以给动态生成的元素添加事件$('a').on({click: function() {console.log($(this).parent());$(this).parent().slideUp(function() {$(this).remove() //$(this).parent()此时相当于$(this).parent()的父亲就是ul了，注意}) //虽然上拉下去了，但这个li还是存在的，因此后面还需要删除//一定要给a添加禁止刷新页面的href不然就会出错}})}})//改变未知})</script>
</body></html>

JS+jQuery简单版发布、删除留言相关推荐

案例：简单版发布和删除留言案例
案例:简单版发布和删除留言案例发布留言--案例分析: ① 核心思路: 点击按钮之后,就动态创建一个 li,添加到 ul 里面. ② 创建 li 的同时,把文本域里面的值通过 li.innerHTML ...
本节作业之显示不同问候语、显示密码、关闭二维码、循环精灵图背景、显示隐藏文本框内容、密码框格式提示错误、京东关闭广告、新浪下拉菜单、开关灯、换肤、表格隔行变色、表单取消全选、tab栏切换、发布删除留言
本节作业之显示不同问候语.显示密码.关闭二维码.循环精灵图背景.显示隐藏文本框内容.密码框格式提示错误.京东关闭广告.新浪下拉菜单.开关灯.换肤.表格隔行变色.表单取消全选.tab栏切换.发布删除留言 ...
华为 Mate 40 系列搭载麒麟 9000 芯片；短视频平台 Quibi 宣布关闭；Node.js 15 正式版发布|极客头条
整理 | 郑丽媛头图 | CSDN 下载自东方 IC 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦,快来看今天都有哪些值得我们技术人关注的重要新闻吧. 国内 ...
简单版发布、删除留言案例
摘要:在这个案例中,实现了一个简单的发布留言效果,利用创建节点和添加节点,在点击确定按钮之后,留言显示在下方. 每个留言有一个删除按钮,点击删除按钮后该条留言被删除. <!DOCTYPE htm ...
Node.js 15 正式版发布
前两天,Node.js官方发布了Node.js 15的正式版本,Node.js 15 将替代 Node.js 14 成为当前的的稳定发行版,后者将在本月晚些时候升级为 LTS(长期支持)版本.如果大家 ...
Node.js 15正式版发布
英文 | https ://medium.com/@nodejs/node-js-v15-0-0-is-here-deb00750f278 前两天,Node.js官方发布了Node.js 15的正式版 ...
Ext JS 5 beta版发布
原文:Announcing Public Beta of Ext JS 5 我们非常高兴的宣布,Sencha Ext JS 5 beta版本开始进行公测了.这个beta版本可以让你.我们Sencha社 ...
简单版留言发布+删除留言
因为自己学习有不懂的地方,所以写出来加深印象. <!DOCTYPE html> <html><head><meta charset="utf-8&q ...
【html+js+jquery简单表单验证和删查】
结果图 1:需求包 2:文件1 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...

JS+jQuery简单版发布、删除留言

JS+jQuery简单版发布、删除留言相关推荐

最新文章

热门文章