简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jQuery html/css方法、微博评论输入点赞删除功能（1月23日）
Blogger Information
Blog 7
fans 1
comment 3
visits 6708
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery html/css方法、微博评论输入点赞删除功能（1月23日）
熊哥的博客
Original
1600 people have browsed it

一、jQuery HTML / CSS 方法
操作属性：
attr( ) 方法设置或返回被选元素的属性值

$('img').attr('width')； //返回img元素的属性值
$('img').attr('width','500px')； //设置img元素的的宽度为500px
$('p').attr('class','box')； //设置p元素的类为.box

同时设置多个属性：
$('选择器').attr({属性名:值, 属性名:值 ...})

$('img').attr({width:'300px',height:'300px'});
$('p').attr({'class':'box',id:'text'});

removeAttr( ) 从被选元素中移除属性

$('p').removeAttr('id','text');

添加元素 - 元素内部添加：
append( ) 在被选元素的结尾插入内容

$('div').append('~ 结束啦 ~');
var a ='<p id="text">~ see you. ~</p>';
$('div').append(a)；

prepend( ) 在被选元素的开头插入内容

$('div').prepend('~ 啊哈 这里是开始的地方 我是prepend ~');

添加元素 - 元素外部添加：
after( ) 在被选元素之后插入内容

$('div').after('~ 啊哈 我是after的效果 ~');

before( ) 在被选元素之前插入内容;

$('div').before('~ 啊哈 我是before的效果 ~') ;

 

删除元素：
remove( ) 方法删除被选元素及其子元素

$('div').remove();

empty( ) 方法删除被选元素的子元素

$('div').empty();

 

二、微博评论输入点赞删除功能

实例

<!DOCTYPE html>
<html>

<head>
    <title>评论点赞删除功能练习</title>
    <meta charset="utf-8">
    <link rel="icon" type="image/x-icon" href="static/images/logo.png">
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
    <div id="list">
        <div class="box clearfix">
            <!-- 删除说说按钮 close-->
            <a class="close" href="javascript:;">×</a>
            <img class="head" src="static/images/1.png" alt="">
            <div class="content">
                <div class="main">
                    <p class="txt">
                        <span class="user">西门大官人: </span>
                        ~ All the luck is for you. ~
                    </p>
                    <img class="pic" src="static/images/img1.jpg" alt="">
                </div>
                <div class="info clearfix">
                    <span class="time">02-14 23:01</span>
                    <!-- 给说说点赞 praise -->
                    <a class="praise" href="javascript:;">赞</a>
                </div>
                <div class="praises-total" total="0" style="display: none;">0个人觉得很赞</div>
                <!--评论内容-->
                <div class="comment-list">
                    <!--   每次评论要添加的内容跟标签   -->
                    <div class="comment-box clearfix" user="self">
                        <img class="myhead" src="static/images/4.jpg" alt="">
                        <div class="comment-content">
                            <p class="comment-text"><span class="user">我:</span>你说的都对……</p>
                            <p class="comment-time">
                                2019-01-19 14:36
                                <a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
                                <a href="javascript:;" class="comment-operate">删除</a>
                            </p>
                        </div>
                    </div>
                    <!--添加结束-->
                </div>
                <!--评论内容结束-->
                <div class="text-box">
                    <textarea class="comment" placeholder="评论…"></textarea>
                    <button class="btn">回 复</button>
                    <span class="word"><span class="length">0</span>/140</span>
                </div>
            </div>
        </div>

        <div class="box clearfix">
            <a class="close" href="javascript:;">×</a>
            <img class="head" src="static/images/2.jpg" alt="" />
            <div class="content">
                <div class="main">
                    <p class="txt">
                        <span class="user">欧阳克 : </span>三亚的海滩很漂亮。
                    </p>
                    <img class="pic" src="static/images/img5.jpg" alt="" />
                </div>
                <div class="info clearfix">
                    <span class="time">02-14 23:01</span>
                    <a class="praise" href="javascript:;">赞</a>
                </div>
                <div class="praises-total" total="0" style="display: none;"></div>
                <div class="comment-list">
                    <div class="comment-box clearfix" user="other">
                        <img class="myhead" src="static/images/3.png" alt="">
                        <div class="comment-content">
                            <p class="comment-text"><span class="user">韦小宝：</span>我也想去三亚。</p>
                            <p class="comment-time">
                                2019-01-19 14:36
                                <a href="javascript:;" class="comment-praise" total="0" my="0">赞</a>
                                <a href="javascript:;" class="comment-operate">删除</a>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="text-box">
                    <textarea class="comment" placeholder="评论…"></textarea>
                    <button class="btn">回 复</button>
                    <span class="word"><span class="length">0</span>/140</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            // on() 方法可以在被选元素及子元素上添加一个或多个事件处理程序; 绑定事件 动态绑定 
            $('.comment').on('keyup', function () {
                var len = $(this).val().length //文本框里面的信息内容字符的长度
                $(this).parents('.text-box').find('.length').text(140 - len);
            })
            $(document).on('click', '.btn', function () {
                // 遍历方法 prev()获得元素紧邻前一个同胞元素  
                var val = $(this).prev().val() //文本框里面的信息内容
                if (val == '') {
                    alert('留言内容不能为空！')
                } else {
                    var date = new Date()
                    var yy = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() +
                        '  ' + date.getHours() + ":" + date.getMinutes() + ':' + date.getSeconds()
                    var html =
                        '<div class="comment-box clearfix" user="self"><img class="myhead" src="static/images/4.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>' +
                        val + '</p><p class="comment-time">' + yy +
                        '<a href="javascript:;" class="comment-praise" total="0" my="0">赞</a><a href="javascript:;" class="comment-operate">删除</a></p></div></div>'
                    $(this).parents('.box').find('.comment-list').append(html) //添加评论
                    $(this).parents('.box').find('.comment').val('') //清空输入框
                    $(this).parents('.box').find('.length').text('0')
                    $(this).prev().height(20)
                }
            })

            $('.comment').click(function () {
                $(this).height(80)
            })

            $(".praise").click(function () {
                $(this).attr("class", "praise_2"); // 给说说点赞后换图标
                $(this).parent().siblings(".praises-total").css("display", "block"); //点赞后显示“几个人觉得很赞”
                var zNum = $(this).parent().siblings(".praises-total").attr("total"); //取得点赞前的点赞数
                zNum++;
                $(this).parent().siblings(".praises-total").attr("total", zNum);
                $(this).parent().siblings(".praises-total").text(zNum + "个人觉得很赞");
            })

            $(document).on("click", ".comment-praise", function () {
                $(this).css("display", "inline-block")
                var Num = $(this).attr("total");
                Num++;
                $(this).attr("total", Num);
                $(this).text(Num + "赞");
            })

            $(document).on("click", ".comment-operate", function () {
                if (confirm("确定这条删除留言吗？")) {
                    $(this).parents(".comment-box").remove();
                }
            })

            $(document).on("click", ".close", function () {
                if (confirm("确定这条删除说说吗？")) {
                    $(this).parent().remove();
                }
            })

        })
    </script>
</body>

</html>
运行实例 »

评论点赞删除功能练习.jpg

案例中使用的 on( ) 方法在被选元素及子元素上添加一个或多个事件处理程序。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！