<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        


    
	
  

	
 


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


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

    

    
制作雙色表格例子：
    
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引進(jìn) -->
    
     7<script src="js/jquery.js" type="text/javascript"></script>
    
     8<!--將javascript.js引進(jìn) -->
    
     9<script  src="js/javascript.js"type="text/javascript"></script>
    
    10<!--將stylecss.css引進(jìn) -->
    
    11<link href="css/stylecss.css" rel="stylesheet" type="text/css" />
    
    12</head>
    
    13<body>
    
    14<!--用class="stripe"來(lái)標(biāo)識(shí)需要使用該效果的表格-->
    
    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    //鼠標(biāo)移到class為stripe的表格tr上時(shí)，執(zhí)行函數(shù)
    
     4        $(".stripe tr").mouseover(function(){
    
     5            //給這行添加class值為over，并且當(dāng)鼠標(biāo)移除時(shí)執(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;/*鼠標(biāo)滑過(guò)高亮行的背景色*/
    
    28}
    
    29
    
 
    
	
    


    
	    
    

    Feedback
    
	
			
    
				
    
					
    
						# re: jQuery基礎(chǔ)ready  回復(fù)  更多評(píng)論
						  
					
    
					2009-01-03 14:57 by 山風(fēng)小子
				
    
				
    不錯(cuò)！
    有個(gè)小小建議，展示代碼時(shí)請(qǐng)不要使用‘行號(hào)’，這樣讀者才能方便地其驗(yàn)證正確性并反饋 ;)
    
			
    
		




    





    


    

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


    

		    		
		
    
		
    			
		
		
		
		
    
		
    
		
		
    
		
    
			網(wǎng)站導(dǎo)航:
		
		
    
		
    
			


		
    	
		
    
			 
		
    
		
    
			
		
    
		
    
			
				
		
    		
	
    	

    



    

				
    
	
	
	

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

    

    



    







    
        
	



主站蜘蛛池模板：
亚洲乱码国产一区三区|
男女超爽刺激视频免费播放|
四虎精品成人免费视频|
色窝窝亚洲AV网在线观看|
亚洲国产无线乱码在线观看|
亚洲AV日韩综合一区尤物|
亚洲精品综合在线影院|
亚洲综合色区中文字幕|
亚洲国产区男人本色在线观看|
亚洲免费观看网站|
亚洲av永久无码嘿嘿嘿|
亚洲xxxx18|
久久亚洲AV成人无码国产电影|
久久精品熟女亚洲av麻豆|
精品视频免费在线|
五月天国产成人AV免费观看|
岛国精品一区免费视频在线观看|
国产在线国偷精品免费看|
久久精品视频免费播放|
亚洲无砖砖区免费|
久久久久久99av无码免费网站|
成年私人影院免费视频网站|
日韩伦理片电影在线免费观看|
四虎永久免费地址在线观看|
亚洲AV之男人的天堂|
亚洲永久无码3D动漫一区|
亚洲成a人片在线观看中文动漫|
中文字幕亚洲综合精品一区|
亚洲宅男精品一区在线观看|
久久亚洲AV成人无码国产最大|
人体大胆做受免费视频|
久久久久久免费一区二区三区
|
亚洲国产精品无码久久一区二区|
久久久无码精品亚洲日韩蜜桃
|
卡一卡二卡三在线入口免费|
亚洲Av无码乱码在线znlu|
亚洲动漫精品无码av天堂|
亚洲三级视频在线|
老湿机一区午夜精品免费福利|
a毛片视频免费观看影院|
日韩精品免费一级视频|