萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> 使用JQ來編寫最基本的淡入淡出效果附演示動畫

使用JQ來編寫最基本的淡入淡出效果附演示動畫

 jQuery是一個JavaScript 庫,也就是對JavaScript的擴展,用來滿足各種日益增加的不同特效需求。其實質就是JavaScript

下面來編寫一個最基本的JQ程序來說明JQ。

一、基本目標

網頁中有如下三個按鈕,一個只能隱藏文本,一個只能顯示文本,一個同時能隱藏與顯示文本,點擊一下顯示,再點擊一下隱藏,無限循環。

二、制作過程

1.首先你要到JQ官網中下載一個JQ支持文件放入你的站點文件夾。這個支持文件是jQuery1.11,可以到jQuery官網中下載兼容舊浏覽器IE6的jQuery1.11,而不是不兼容舊浏覽器IE6的jQuery2。

2.整個網頁代碼如下,再分片段進行說明:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 <!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>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  <script>  $(document).ready(function() {  $("#hide").click(function() {  $("#text").hide();  });  $("#show").click(function() {  $("#text").show();  });  $("#toggle").click(function() {  $("#text").toggle();  });  });  </script>     <!--     <style type="text/css">  #text{  display:none  }  </style>     -->     <title>JQ淡出與顯示</title>     </head>  <body>     <p id="text">  被折騰的文本  </p>     <button id="hide">  隱藏  </button>  <button id="show">  顯示  </button>  <button id="toggle">  隱藏/顯示  </button>     </body>     </html>

(1)<body>部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <head>部分主要是實現核心代碼部分,放在後面來講,先說<body>部分    <body>  <!--這是定義一段ID為text的文本,便於腳本控制-->  <p id="text">  被折騰的文本  </p>     <!--分別設置ID為hide,show,toggle的按鈕-->  <button id="hide">  隱藏  </button>  <button id="show">  顯示  </button>  <button id="toggle">  隱藏/顯示  </button>     </body>

(2)<head>部分

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 <head>  <!--網頁的編碼,聲明要使用JQ-->  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <script type="text/javascript" src="js/jquery-1.11.1.js"></script>  <script>  <!--JQ的代碼編寫首先要用$(document).ready(function() {});去定義一個總函數,缺少這個函數提供的框架之後的東西無法執行-->  $(document).ready(function() {  <!--之後再於這個函數內編寫需要的函數-->  <!--對於ID為hide這個按鈕的click動作進行函數的調用,之後的動作依舊放在這個一個函數的裡面-->  $("#hide").click(function() {  <!--隱藏ID的為text的文本-->  $("#text").hide();  });  $("#show").click(function() {  <!--顯示ID的為text的文本-->  $("#text").show();  });  $("#toggle").click(function() {  <!--在隱藏與顯示之間切換ID的為text的文本-->  $("#text").toggle();  });  });  </script>     lt;!--這段控制默認是顯示還是不顯示     <style type="text/css">  #text{  display:none  }  </style>     ->     <title>JQ淡出與顯示</title>     </head>
copyright © 萬盛學電腦網 all rights reserved