您的位置:时时app平台注册网站 > 彩世界网址 > 页面加载完成后再执行JS的jquery写法以及区别说明

页面加载完成后再执行JS的jquery写法以及区别说明

2019-11-28 03:06

${smUser.userId }

复制代码 代码如下:

还有一种简写的方式: 复制代码 代码如下:$ { // 任何需要执行的js特效 $("table tr:nth-child.addClass;

用户名称图片 1图片 2

页面代码:

一般的加载页面时调用js方法如下: 复制代码 代码如下:window.onload = function() { $("table tr:nth-child.addClass; //这个是jquery代码 }; 这段代码会在整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js效果就会让用户感觉失效了。

创建人图片 3图片 4

具体代码如下:
引用js和css文件有:

1、$.click{ //adding your code here }); }); 2、$.ready.click{ //adding your code here }); }); 3、window.onload = function.click{ //adding your code here }); } html代码为点击,且页面需要引用jquery的js文件

菜单集名称图片 5图片 6

运用jquery实现表格分页打包

但是用jquery的方法: 复制代码 代码如下:$.ready { // 任何需要执行的js特效 $("table tr:nth-child.addClass; 就仅仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行js效果。包括在加载外部图片和资源之前。

选择

引用js和css文件有: 复制代码 代码如下: link ID="skin" rel="stylesheet" type="text/css" href="css/config.css" script type="text/javascript" src="...

页面代码: 复制代码 代码如下:

<table id="userTable" align="center" class="listtable" width="100%" bgcolor="#CCCCCC" cellSpacing="1" cellpadding="1" style="margin-top:5px;" >
<thead>
<tr class="fixheader">
<td noWrap width="5%">选择</td>
<td noWrap width="10%">用户ID<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap width="10%">用户名称<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td noWrap width="10%">所在科室<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>创建时间<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>创建人<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>菜单集名称<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
<td width="10%" noWrap>是否有效<img src="images/up.png" style= "cursor:hand " alt="升序" align="absmiddle"><img src="images/down.png" style= "cursor:hand " alt="降序"align="absmiddle"></td>
</tr>
</thead>
<tbody style="display:">
<c:forEach items="${userList}" var="smUser">
<tr height="22px" bgcolor="#F9FDFF" onmouseover="javascript:this.style.backgroundColor='#FFFFCC'; return true;" onMouseOut="javascript:this.style.backgroundColor='#F9FDFF'; return true;">
<td align="center"><input type="checkbox"></td>
<td class="tdc">${smUser.userId }</td>
<td class="tdc">${smUser.userName }</td>
<td class="tdc">${smUser.organCode }</td>
<td class="tdc">${smUser.createTime }</td>
<td class="tdc">${smUser.creator }</td>
<td class="tdc">${smUser.menusId }</td>
<td class="tdc">${smUser.valid }</td>
</tr>
</c:forEach>
</tbody>
</table>
<script language="javascript" type="text/javascript">
$("#userTable").tablePaging();
</script>

是否有效图片 7图片 8

<link ID="skin" rel="stylesheet" type="text/css" href="css/config.css">
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/skin.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.table.js"></script>

${smUser.valid }

此处要特别注意的是要讲table的表头加上<thread></thread>标签,且注意此处的table的id为userTable,这个在后面Js文件的引用中十分重要,一句$("#userTable").tablePaging();会去执行jquery.table.js中的代码。
后台action的代码如下:

所在科室图片 9图片 10

public ActionForward listUser(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response){
List<POJO> pojos = serviceSmUserImpl.findAll();
List<SmUser> smUserList = new ArrayList<SmUser>();
for(POJO pojo:pojos){
smUserList.add((SmUser)pojo);
}
request.setAttribute("userList",smUserList);
return mapping.findForward("smUserList");
}

${smUser.menusId }

复制代码 代码如下:

创建时间图片 11图片 12

复制代码 代码如下:

${smUser.creator }

具体代码如下: 引用js和css文件有: 复制代码 代码如下:

此处要特别注意的是要讲table的表头加上标签,且注意此处的table的id为userTable,这个在后面Js文件的引用中十分重要,一句$.tablePaging();会去执行jquery.table.js中的代码。 后台action的代码如下: 复制代码 代码如下: public ActionForward listUser(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response){ List pojos = serviceSmUserImpl.findAll(); List smUserList = new ArrayList(); for{ smUserList.add; } request.setAttribute("userList",smUserList); return mapping.findForward; } 运用jquery实现表格分页打包

${smUser.createTime }

${smUser.userName }

用户ID图片 13图片 14

${smUser.organCode }

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:页面加载完成后再执行JS的jquery写法以及区别说明

关键词: