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

一夕ξ

已于 2022-03-28 17:29:40 修改

阅读量1.2k

点赞数

分类专栏：前端学习文章标签： javascript jquery

于 2022-02-24 22:40:26 首次发布

本文链接：https://blog.csdn.net/qq_45387575/article/details/123121057

版权

前端学习专栏收录该内容

77 篇文章 6 订阅

订阅专栏

首先用户在输入框中输入内容，按下发布按钮，内容到下面的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       父亲为ul
                        ul.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 = 0
                            var 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>

一夕ξ

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
2
评论
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" co...
复制链接

扫一扫