Blogger Information
Blog 18
fans 0
comment 0
visits 11555
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jQuery基础学习3---五期线上学习班
风行的博客
Original
483 people have browsed it

1操作属性

attr( )返回备选元素的属性值  *必须是自带属性

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

2添加元素

  • 从内部添加

    append( )在被选元素的末尾插入内容

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

  • 从外部添加

    after( )被选元素之后插入内容

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

3删除元素

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

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

2实例 微博说说评论点赞功能

心得:this的使用,on( )方法

实例

<!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 type="text/javascript" src="static/jquery-3.3.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/11.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="4" style="display: block;">4个人觉得很赞</div>
<!--评论内容-->           
            <div class="comment-list">
           <!--   每次评论要添加的内容跟标签   -->
                <div class="comment-box clearfix" user="self">
                    <img class="myhead" src="static/images/44.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="1" my="0" style="display: inline-block">1赞</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/22.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/33.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 type="text/javascript">
  $(function(){
    $('.comment').on('keyup',function(){//绑定事件,动态绑定
      var len=$(this).val().length;
      $(this).parents('.text-box').find('.length').text(140-len);
    })
    $(document).on('click','.btn',function(){ //点击回复按钮
      var val=$(this).prev().val();  //遍历方法 获取元素紧邻前一个同胞元素;
      if(val!=''){
        var date=new Date();
        var y=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/44.jpg" alt=""><div class="comment-content"><p class="comment-text"><span class="user">我:</span>'+val+'你说的都对……</p><p class="comment-time">'+y+'<a href="javascript:;" class="comment-praise" total="0" my="0" style="display: inline-block">赞</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-operate').on('click',function(){
    //     if (confirm('确定删除吗?')) {
    //         $(this).parents('.comment-box').remove();
    //     }

    // })
    $(document).on('click','.comment-operate',function(){
        if (confirm('确定删除吗?')) {
            $(this).parents('.comment-box').remove();
        }
    })
    //评论框加高度
    $(document).on('click','.comment',function(){
        $(this).height(80);
    })
    //评论点赞
    $(document).on('click','.comment-praise',function(){
        var num=parseInt($(this).attr('total'))+1;
        $(this).attr('total',num);
        $(this).html(num+'赞');
    })
    // 说说点赞
    $(document).on('click','.praise',function(){
        var num=parseInt($('.praises-total').attr('total'))+1;
        $('.praises-total').attr('total',num);
        $('.praises-total').html('有'+num+'人觉得很赞');
    })
    //删除说说
    $('.close').on('click',function(){
        if (confirm('确定删除吗?')) {
            $(this).parents('.box').remove();
        }
    })

  })

    
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


Correction status:Uncorrected

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