Jquery的ready和Dom的onload的区别及freemarker分页

今天改一bug，项目有一共通分页，需要改变当前页的颜色以示区别 发现用jquery 的ready()方法出现问题，有的页面没效果、看了半天代码感觉是因为出问题的那几个页面jquery导入的包在页面底部，致使用ready()方法失败。随修改onload方法。OK

分页方法、、freemarker：

<#--分页-->
<#macro pageTag formName="pageForm" showHidden="true"> 
  <#if (page.pageCount gt -1)> 
  <#if showHidden=="true">
<input type="hidden" name="page.total" value="${page.total}"/>
<input type="hidden" name="page.perPage" id="perPage" value="${page.perPage}"/>
<input id="pageNo" type="hidden" name="page.index" value="${page.index}"/>
<#list sortParas as sort>
<input type="hidden" name="orders[${sort.property},,]" value="${sort.order}"/>
<input type="hidden" id="orderBy" value="${sort.property}"/>
</#list>
</#if>

<div class="page_s" >
共<span class="page_green">${page.total}</span>条记录&nbsp;&nbsp;&nbsp;
第<span class="page_orange" style=" color:red; ">${page.index}</span>/<span class="page_fbr">${page.pageCount}</span>页&nbsp;&nbsp;&nbsp;
<a href="javascript:chanagePageNO(1)"><img src="${path}/images/common/p_1.png"/></a>
<a href="javascript:chanagePageNO(${page.upNo})"><img src="${path}/images/common/p_2.png" /></a>

<span>
   <#if (page.pageCount lt 10)>
    <#list 1..page.pageCount as num>
     <a href="javascript:chanagePageNO(${num})" class="page_s" id="page_${num}">${num}</a>
    </#list>
   <#else>
        <#if (page.index gt 6)>
           <#if ((page.index+4) gt page.pageCount)>
              <#list (page.index-5)..page.pageCount as num>
      <a href="javascript:chanagePageNO(${num})" class="page_s" id="page_${num}">${num}</a>
      </#list>
    <#else>
    <#list (page.index-5)..(page.index+4) as num>
    <a href="javascript:chanagePageNO(${num})" class="page_s" id="page_${num}">${num}</a>
      </#list>
           </#if>
         <#else>
            <#list 1..10 as num>
        <a href="javascript:chanagePageNO(${num})" class="page_s" id="page_${num}">${num}</a>
         </#list>
         </#if>
   </#if>
</span>

<a href="javascript:chanagePageNO(${page.nextNo})"><img src="${path}/images/common/p_4.png"/></a>
<a href="javascript:chanagePageNO(${page.pageCount})"><img src="${path}/images/common/p_5.png"/></a>&nbsp;&nbsp;&nbsp;
<!--每页显示-->
每页
            <select name="pageSize" id="pageSize" οnchange="chanagePageSize(this.value);">
              <option value="10" <#if page.perPage==10>selected</#if> >10</option>
              <option value="20" <#if page.perPage==20>selected</#if> >20</option>
              <option value="50" <#if page.perPage==50>selected</#if> >50</option>
              <option value="100" <#if page.perPage==100>selected</#if> >100</option>
              <option value="200" <#if page.perPage==200>selected</#if> >200</option>
            </select>
                                           条
            &nbsp;&nbsp;&nbsp;
       </div>


<#if showHidden=="true">
<script type="text/javascript">
window.οnlοad=function(){
var pageId="page_"+${page.index};
var pageID=document.getElementById(pageId);
pageID.style.color ="red";
} 

//换页
function chanagePageNO(pageIndex){
if(${page.index}==pageIndex){
// return;
}
var pageNo = document.getElementById("pageNo");
pageNo.value = pageIndex;
document.forms['${formName}'].submit();
}
//改变页大小 
function chanagePageSize(pageSize){
var perPage = document.getElementById("perPage");
perPage.value = pageSize; 
   // 写入cookie
   //setCookie("pageSize",pageSize);
//document.forms['${formName}'].submit();
//最得表单的target属性
var reponseTarget =document.forms['${formName}'].target;
if(!reponseTarget){//如果没有则提交表单
document.forms['${formName}'].submit();
}else{//如果有则异步提交表单,注意主页面要引入:jquery.form.js
$("#pageForm").ajaxForm({ 
url:document.forms['${formName}'].action,    
   type:     'post',    
   success:function(msg){  
    $("#"+reponseTarget).html(msg);
    $(".dzlist tr:odd").css("background-color","#f4ffff");  
    }
});  
   $("#pageForm").submit(); 
} 
}

function setOrder(e){
var ename=e.name;
orderby(ename);
}
//排序
function orderby(title){
var pageform=document.forms['${formName}'];
var order = $("input[name*='orders']");
var orderValue = order.val();
if(orderValue=="desc"){
order.val("asc");
}else{
order.val("desc");
}
order.attr("name","orders["+title+",,]");
pageform.submit();
}

//在document加载中,需要设置排序的图片.
function setOrderImg(){
var order = $("input[name*='orders']");
var orderValue = order.val();
var orderName=jQuery("#orderBy").val();
if(orderName==""){
return;
}
if(jQuery("a[name='"+orderName+"']")==null){
return;
}
if (orderValue == "desc"){
jQuery("a[name='"+orderName+"'] span").html("<img src='${path}/images/arrows/arrow1_down.gif'/>");
}else if(orderValue == "asc"){
jQuery("a[name='"+orderName+"'] span").html("<img src='${path}/images/arrows/arrow1_up.gif'/>");
}
}
</script> 
</#if>
  </#if>
</#macro>

onload是所有dom元素创建完毕，图片、css等都加在完毕后才触发 ready则是dom元素创建完毕后就被触发 

所以相对来说jquery的ready可以提高网页的响应速度; 
jquery:ready的标准写法： 
复制代码 代码如下:
$(document).ready(function() { 
alert("加载结束"); 
}); 


一个$(document)将dom对象的document转化为jquery对象，继而可以调用jquery的方法ready();因为dom对象是不可以调用jquery的方法的，虽然他们的关系很亲密； 
jquery:ready的简写形式： 
复制代码 代码如下:
$(function() { 
alert("加载结束"); 
}); 


ready函数的一个主要作用就是为dom对象注册事件： 
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<script src="../myjs/jquery-1.4.2.js" type="text/javascript"></script> 
<script type ="text/javascript" > 
$(function() { 
$("#clickme").click(function() { 
alert("我被点击了"); 
}); 
}); 
</script> 
</head> 
<body> 
<input type ="button" id="clickme" value ="点击我" /> 
</body> 
</html>