posts - 37, comments - 8, trackbacks - 0, articles - 0
          


          		
	
          
	
          
		
			
		
		
			
          
				
					
	
          
		
          
			
          
				jQuery筆記（1）
			
          
 			Posted on 2008-10-22 23:13 夢與橋 閱讀(281) 評論(0)  編輯  收藏  所屬分類: javascript 
			
			


		
          
		
          1、概述
          
    jQuery是一個了不起的javascript庫，它可以是我們用很少的幾句代碼就可以創建出漂亮的頁面效果，對DOM有強大的控制能力。
          
2、更快的一些載入
          
    jQuery有一個用來作為DOM快速載入javascript的得心應手的小函數，那就是ready… 他在頁面加載完成之后執行。

          $(document).ready(function(){
          
          // Your code here
          
          }          );
          
    你可以用他來載入任何你想要載入的javascript，并不一定要保留jQuery的編碼風格。讓jQuery同時去執行多個函數也是可以的。 
          
3、一個簡單的應用：制作雙色表格，關鍵代碼如下：

          <script src="jquery-latest.pack.js" type="text/javascript"></script> 
          
          <!--將jQuery引用進來-->
          
          <script type="text/javascript">
          
$(document).ready(          function(){  //這個就是傳說的ready
          
                  $(".stripe tr").mouseover(function(){  
          
                          //如果鼠標移到class為stripe的表格的tr上時，執行函數
          
                          $(this).addClass("over");}          ).mouseout(function(){ 
          
                                          //給這行添加class值為over，并且當鼠標一出該行時執行函數
          
                          $(this).removeClass("over");}          )  //移除該行的class
          
                  $(".stripe tr:even").addClass("alt");
          
                          //給class為stripe的表格的偶數行添加class值為alt
          
          }          );
          
          </script>
          

          <style type="text/css">
          
tr.alt td           {
          
        background          :#ecf6fc;  /*這行將給所有的tr加上背景色*/
          
          }
          
 
          
tr.over td           {
          
        background          :#bcd4ec;  /*這個將是鼠標高亮行的背景色*/
          
          }
          
</style>
          

          <table class="stripe" width="50%" border="0" cellspacing="0" cellpadding="0"> 
          
          <!--用class="stripe"來標識需要使用該效果的表格-->
          

          
在jQuery中，執行完mouseover或者mouseout等方法之后，都會返回當前的對象，所以可以進行鏈式操作，所以：

          $(".stripe tr").mouseover(function(){  
          
        $(          this).addClass("over");}          ) 
          
$(          ".stripe tr").mouseout(function(){  
          
        $(          this).removeClass("over"); }          )
          
寫成了：

          $(".stripe tr").mouseover(function(){  
          
             $(          this).addClass("over");}          ).mouseout(function(){ 
          
                 $(          this).removeClass("over");}          )
          
4、巧妙的偽裝鏈接
          

              我們要使用jQuery去創建一小段代碼,這段代碼會把一個頁面所有的超鏈接轉換并且偽裝起來. 要給所有我們想偽裝的鏈接添加一個class,class有助于jQuery幫我們找到需要偽裝的鏈接而撇開其它不需要偽裝的鏈接.title有兩個作用:當鼠標劃過鏈接的時候會有一個小小的盒狀提示顯示URL并且同樣的信息會顯示在瀏覽器的狀態欄(IE Only). 
          

          <p><a href="http://www.affsite.com?id=123" title="http://www.affsite.com"
          
class          ="affLink">Super Duper Product</a></p>
          

           
          

          <script src="jquery.js"></script>
          
          <script type="text/javascript">
          
$(document).ready(          function(){
          
$('a.affLink').mouseover(          function(){window.status=this.title;return true;})
          
.mouseout(          function(){window.status='Done';return true;});
          
}          );
          
          </script>
          
5、安全郵件列表(完整代碼暫缺)
          
    垃圾郵件制造者會使用自動化軟件從html源文件中尋找電子郵件鏈接,這種做法和google一樣:使用相關鏈接. 他么就和我們大部分人一樣懶惰.所以很難所他們不會拿個本子放在鍵盤旁邊記下你的電子郵件地址. 請查看我提供的示例的源代碼,你將不會在html里找到任何的郵件地址. 這幾堅實的保證了你絕對不會收到垃圾郵件,只會從朋友或者瀏覽者那里收到郵件.

          $(document).ready(function(){
          
$.post('mailtoInfo.jsp',          {
          
  pass:           "secret"
          
}          ,function(txt){
          
  $('div.email').html(txt);
          
  $('div.email').slideDown(          "slow");
          
}          );
          
}          );
          
6、用Jquery生成的HTML
          
 
          
	
          


          
	    
    




          





          


          

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


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
会泽县|
宁南县|
碌曲县|
恩施市|
上虞市|
新乡县|
宁波市|
中西区|
当阳市|
道真|
钟山县|
镇赉县|
柳河县|
玉林市|
阳泉市|
松溪县|
洛阳市|
吐鲁番市|
突泉县|
缙云县|
乐清市|
江城|
沽源县|
通渭县|
勐海县|
永兴县|
商城县|
临清市|
海伦市|
玉龙|
珠海市|
土默特右旗|
平南县|
桐乡市|
年辖：市辖区|
普兰县|
鄂伦春自治旗|
哈密市|
濉溪县|
雷州市|
灵台县|