jQuery基礎(chǔ)ready
			
          
 			Posted on 2009-01-02 15:48 胡娟 閱讀(677) 評論(1)  編輯  收藏  所屬分類: jQuery 
			
			


		
          
		
          window.onload()函數(shù)執(zhí)行的時候，要說明所有東西已經(jīng)載入，包括圖像和橫幅。要知道較大的圖片下載速度會比較慢，因此用戶必須等待大圖片下載完畢才能看到window.onload()執(zhí)行的代碼效果，需要很長等待的時間。
          
$(document).ready(function(){  });當DOM載入就可以查詢及操縱時綁定一個要執(zhí)行的函數(shù)。這是事件模塊中最重要的一個函數(shù)，因為它可以極大地提高web應用程序響應速度。這個方法純粹是對向window.load事件注冊事件的替代方法。通過這個方法可以在DOM載入就緒能夠讀取并操縱時立即調(diào)用你所綁定的函數(shù)。
          
(document)：獲取整個網(wǎng)頁文檔對象(類似于window.document)；
          
$(document).ready:獲取文檔對象就緒的時候。
          

          

          
制作雙色表格例子：
          
html：
          

           1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
          
           2<html xmlns="http://www.w3.org/1999/xhtml">
          
           3<head>
          
           4<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
          
           5<title>jquery</title>
          
           6<!--將jquery.js引進 -->
          
           7<script src="js/jquery.js" type="text/javascript"></script>
          
           8<!--將javascript.js引進 -->
          
           9<script  src="js/javascript.js"type="text/javascript"></script>
          
          10<!--將stylecss.css引進 -->
          
          11<link href="css/stylecss.css" rel="stylesheet" type="text/css" />
          
          12</head>
          
          13<body>
          
          14<!--用class="stripe"來標識需要使用該效果的表格-->
          
          15<table  class="stripe" border="0" cellspacing="0" cellpadding="0">
          
          16<thead>
          
          17  <tr>
          
          18    <th >姓名</th>
          
          19    <th >年齡</th>
          
          20    <th >MSN</th>
          
          21    <th >Email</th>
          
          22  </tr>
          
          23</thead>
          
          24<tbody>
          
          25  <tr>
          
          26    <td>樊凱</td>
          
          27    <td>23</td>
          
          28    <td>fankai2008@gmail.com</td>
          
          29    <td>35622334@qq.com</td>
          
          30  </tr>
          
          31  <tr>
          
          32    <td>胡娟</td>
          
          33    <td>23</td>
          
          34    <td>hujuan2008@gmail.com</td>
          
          35    <td>hujuan2008@gmail.com</td>
          
          36  </tr>
          
          37  <tr>
          
          38    <td>qq</td>
          
          39    <td>24</td>
          
          40    <td>aa@126.com</td>
          
          41    <td>aa@126.com</td>
          
          42  </tr>
          
          43  <tr>
          
          44    <td>bb</td>
          
          45    <td>23</td>
          
          46    <td>bb@163.com</td>
          
          47    <td>bb@163.com</td>
          
          48  </tr>
          
          49  <tr>
          
          50    <td>cc</td>
          
          51    <td>14</td>
          
          52    <td>cc@qq.com</td>
          
          53    <td>cc@qq.com</td>
          
          54  </tr>
          
          55  <tr>
          
          56    <td>dd</td>
          
          57    <td>38</td>
          
          58    <td>dd@sina.com</td>
          
          59    <td>dd@sina.com</td>
          
          60  </tr>
          
          61 </tbody>
          
          62</table>
          
          63</body>
          
          64</html>
          
          65
          

          
JavaScript：
          

           1// JavaScript Document
          
           2$(document).ready(function(){
          
           3    //鼠標移到class為stripe的表格tr上時，執(zhí)行函數(shù)
          
           4        $(".stripe tr").mouseover(function(){
          
           5            //給這行添加class值為over，并且當鼠標移除時執(zhí)行函數(shù)
          
           6            $(this).addClass("over");}          ).mouseout(function(){
          
           7            //移除該行的class
          
           8            $(this).removeClass("over");}          )
          
           9        //給class為stripe的表格的偶數(shù)行添加class值為alt
          
          10        $(".stripe tr:even").addClass("alt");
          
          11            
          
          12}          );
          
css：
          

           1@charset "utf-8";
          
           2th {
          
           3    font-size: 18px;
          
           4    background-color: #339933;
          
           5    line-height: 20px;
          
           6    color: #FFFFFF;
          
           7    height: 30px;
          
           8}
          
           9td {
          
          10    padding:6px 11px;
          
          11    vertical-align:top;
          
          12    text-align:center;
          
          13    border-bottom-width: 1px;
          
          14    border-bottom-style: solid;
          
          15    border-bottom-color: #006600;
          
          16}
          
          17 
          
          18td * {
          
          19        padding:6px 11px;
          
          20}
          
          21 
          
          22tr.alt td {
          
          23    background-color: #99FF99;/*這行將給所有的tr加上背景色*/
          
          24}
          
          25 
          
          26tr.over td {
          
          27    background-color: #FFCC66;/*鼠標滑過高亮行的背景色*/
          
          28}
          
          29
          
 
          
	
          


          
	    
    

          Feedback
          
	
			
          
				
          
					
          
						# re: jQuery基礎(chǔ)ready  回復  更多評論
						  
					
          
					2009-01-03 14:57 by 山風小子
				
          
				
          不錯！
          有個小小建議，展示代碼時請不要使用‘行號’，這樣讀者才能方便地其驗證正確性并反饋 ;)
          
			
          
		




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發(fā)表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網(wǎng)站導航:
		
		
          
		
          
			


		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
          
	
	
	

          
	
          
posts - 28, comments - 5, trackbacks - 0, articles - 1
          
	
          Copyright © 胡娟
          

          

          



    







          
        
	




主站蜘蛛池模板：
习水县|
珠海市|
武邑县|
庐江县|
林州市|
沽源县|
沁水县|
荆州市|
镶黄旗|
竹山县|
边坝县|
吴桥县|
连江县|
平顶山市|
石嘴山市|
温州市|
嘉义县|
黄大仙区|
安溪县|
休宁县|
方正县|
双城市|
牡丹江市|
满洲里市|
米泉市|
孟州市|
当阳市|
汽车|
蓝田县|
漯河市|
凉山|
阳春市|
东丽区|
大埔区|
泰宁县|
台湾省|
新河县|
垦利县|
察雅县|
融水|
南城县|