HTML中常用的js技巧和方法

来源：互联网发布：兄弟连培训php学费多少编辑：程序博客网时间：2024/05/16 07:49

以评论功能为例

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代替

0 0