发布评论、删除评论案例12.2

一个简单却又有很多细节的小案例
就像网易云的评论功能一样
当评论框里输入内容以后，点击评论，我们的评论就会被发布出去
首先布局肯定是有一个textarea的，这是一个文本域，相对于input，它更加的简洁实用
代码：

<textarea cols="30" rows="10" style="resize: none;"></textarea>

clos跟rows是常用属性，就不解释了
注意它其中的一个style样式 resize : none;

使用前后 的差别就是它又下角的一个可控制大小的按钮
使用后，就像它单词的意思一样 resize : 调整大小
属性值为none 就意味着不能调整大小
其次是一个简单的按钮元素，我这里使用的是button
因为html中button的意义就是一个单纯的按钮

<button>留言</button>

这里就不做css样式了，主要的是js的应用语法
然后我们后面写一个空的ul
这里是为了等会创建li元素的时候，创建在ul下，这也是一个父子关系
代码就不写了，一个简单的ul空列表
然后就是我们的javascript语句
按pink老师讲的说：js虽然可以放在html的任意一个部位，但是代码都有一个执行顺序，所以，我们把script标签放在body的最下面
首先获取文本域，然后定义在一个text里，（这只是一个名字，起什么都无所谓）
获取文本域

    var text = document.querySelector('textarea');

获取ul

 var text = document.querySelector('textarea');

获取button

    var btn = document.querySelector('button');

然后定义一个点击事件

 btn.onclick = function () {}

onclick 是鼠标单击后发生的事
然后定义一个函数来接管这个点击事件
这里，我们不要着急的往下做
先思考如果他留言的内容没有填写，就直接点击评论了，那我们要对这种情况做一个处理
如果为空，我们就弹出一个警示框，提示他输入内容后再留言`

 if (text.value == '') {
            alert('请您输入内容');
        } 

如果他输入内容了，我们再接着下一步：
当点击留言的时候，我们使用js创建元素语句创建一个元素

 var li = document.createElement('li');

并把它赋值给li
然后使用js的语法，把它添加到ul里
做到这里，我们差不多这个案例已经完成了，但当你点击留言按钮的时候，会发现多出来一个小圆点，这是ul中li出现的表现形式
再接下来的操作，我们用到之前学习的js语句里的innerHTML
它可以让文本的内容换成你接下来输入的值

 li.innerHTML = text.value

text就是上面获取到的定义的一个值
把text的值赋给li.innerHTML
这样子，就会以li的形式展现出来
这以上代码就是这个发布评论的所有
完结！
结合现实情况，如果我们的评论不想留，或者想要把评论删除
这里就需要把删除给完善

在我们赋值这个li.innerHTML时，我们可以用字符串拼接的方法在内容的后面添加一个超链接a
里面包裹一个：“删除”
注意这里有一个知识点;
我们平常使用的href，当不知道想要链接到哪里的时候，都是用#来代替的，然后当我们点击这个a的时候，页面上的地址栏，会在结尾的时候添加一个#
这里我们把href的值设置为javascript:;
就会解决这个尴尬的问题
在添加a之后，每当点击一次留言，会在留言的后面显示一个“删除”
因为我们是需要点击删除的，我们还会有很多留言评论，，每一条评论，肯定都会随之而然的添加一个a链接
因此我们需要使用for循环来给每一个a添加一个点击事件

var as = document.querySelectorAll('a')
        for (var i = 0; i < as.length; i++) {
            // 添加点击事件
            as[i].onclick = function () {
                ul.removeChild(this.parentNode);
            }
        }

第一句是把随着留言产生的a链接都给获取过来
使用as.length方法来当for循环的长度
然后as[i]来未每一个a添加一个点击事件
这里：重点
我们需要删除的是a标签的父亲，使用删除语句的时候 removeChild,使用这个方法的是父亲，被删除的这个元素是儿子，但是我们现在是以a链接为身份，a链接的父亲刚好是ul的儿子
以上就是这个案例的全部代码，还有的就是一些css样式，建议是复习css的，因为正常的一个案例，js的代码，往往就只有那么几行，而css却是一大堆！！！