HTML中常用的js技巧和方法

版权声明：Copyright@董亮亮的开发笔记 https://blackist.org/ https://blog.csdn.net/dong161114/article/details/70045147

以评论功能为例

1.ajax动态加载评论列表
js:

// 加载评论列表
    var postId = $("#postId").html();
    $.post("post/commentList.action?postId="+postId, function(data) {
        $("#comment-list").html(data);
    });

html:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%--comment list--%>
<c:forEach items="${page.beanList}" var="comment" varStatus="status">
    <li class="media">
        <a class="pull-left" href="ta/show.action?userId=${comment.userId}">
            <img class="thumbnail img-responsive center-block" src="${comment.portrait}" style="width: 65px"/>
        </a>
        <div class="media-body">
            <a href="javascript:;" class="btn btn-primary btn-xs pull-right reply"
               onclick="replyComment('回复 #${(page.pageIndex-1)*10 + status.index + 1} ${comment.trueName}：')">回复
            </a>
            <h4>#${(page.pageIndex-1)*10 + status.index + 1} &nbsp;&nbsp; ${comment.trueName}</h4>
            <small class="text-muted"><fmt:formatDate value="${comment.createTime}" pattern=" Y-M-d  HH:mm "></fmt:formatDate></small>
            <p>${comment.content}</p>
        </div>
    </li><!-- media -->
</c:forEach>
<%--btn-load-more--%>
<c:if test="${page.beanList.size()>=10}">
<button class="btn btn-default btn-sm btn-block" onclick="loadMoreComment(${page.pageIndex+1})" id="btn-load-more">
    <i class="fa fa-plus-square-o"></i> 加载更多
</button>
</c:if>

2.点击评论按钮，页面滚动到评论框，评论框获取焦点

$("html,body").animate({scrollTop:$("#comment-content").offset().top},500);//500是ms,也可以用slow代替