1. jQuery的用法

一、 講義直送您的電腦

1. 講義：http://www.tad0616.net/modules/tad_book3/index.php?tbsn=26
2. 請申請Dropbox（雲端磁碟機https://www.dropbox.com），一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
3. 您也可以直接連上Dropbox網站，只要有網路，都可直接下載教材。

二、 關於本課程

1. 本課程是系列中的第五個學程，屬最高階部份，因此，有任何聽不懂的：拜託您問！
2. 上課歡迎隨時起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
3. 上課時間為7:00～7:15，由於教室電腦是全部還原，故軟體需要每次都安裝一次，留15分鐘時間給各位裝軟體及發問。休息時間為8:10~8:30，課程於9:50結束。
4. 上課要拍照、錄音、錄影都隨便您～～能和同學分享更好。
5. 座位沒有強制性，但也不建議每次都換來換去，盡量於第三次上課後即固定座位。

三、 申請學生練習主機空間（http://163.26.52.243）

1. 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
2. 若已經有了可不需再申請，當然要再申請一個新的也無妨。
3. 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
4. 申請後，您的網站網址為：「http://163.26.52.243/~帳號」
5. 資料庫和FTP帳號、密碼是一樣的！

四、 務必學會FileZilla檔案傳輸軟體

1. FTP用來把檔案傳到主機，FTP port為22（ssh加密通道）。
2. 建議善用站台管理員，把常用的連線加入（此外，建議把樹狀目錄關閉）。
   

五、 開發工具：PSPad

1. 可直接從163.26.52.243下載可攜版，裡面已經幫各位做好設定。
2. 解壓縮後，直接執行pspad.exe即可。
3. 請開啟「檢視→行號」。

六、 套用jquery

1. 方法有二，一般法（離線意可用，但得自行更新版本）：
   • (1)  先到 http://jquery.com/ 下載最新版檔案，如：jquery-1.8.1.min.js
   • (2)  然後再網頁或程式中引入該檔案即可：

   <script type="text/javascript" src="jquery-1.8.1.min.js"></script>

2. 直接連線法（需連線才能用，方便，可隨意切換版本）：
   • (1) 直接遠端引用

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

   • (2)  或是用Google的Loader：

   <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   <script type="text/javascript">
    google.load("jquery", "1.8.1");
    google.load("jqueryui", "1.7.2");
   </script>

七、 jquery基本用法

1. 基本概念：什麼元件在什麼時候要做什麼事。

<script type="text/javascript">
  $(document).ready(function(){
    //jquery語法
  });
</script>

2. $() 就是用來指定元件的挑選器（什麼元件）， $(document) 或$()代表此網頁。
   • (1)  指定標籤：$("button")    →抓到的是→ <button>
   • (2)  指定id：$("#aa")→抓到的是→ id="aa"
   • (3)  指定class：$(".bb")→抓到的是→ class="bb"
3. ready()是事件，事件中通常會執行某函數，因為函數大多只用一次，所以，通常直接在()中寫 function(){} 即可，不另外命名，稱之為匿名函數（或lambda函數）
4. 完整事件或功能建議參考：http://www.css88.com/jqapi-1.7/

八、 jquery事件（event）用法

1. 基本概念：什麼元件在什麼時候要做什麼事，底下以一些常用的事件為例。
   • (1)  click()：點按時
   • (2)  change()：值改變時

九、 jquery效果（Effects）

1. 隱藏：$("#tbl").hide(); 顯示：$("#tbl").show();
2. 滑下：$("#tbl").slideDown("slow"); 滑上：$("#tbl").slideUp("slow");
3. 隱出：$("#tel").fadeOut("slow"); 隱入：$("#tel").fadeIn("slow");
4. 加上CSS：$("#tbl").css("border","1px solid black");
5. 套用class：$("body").addClass("girl");
6. 移除class：$("body").removeClass();
7. 加到裡面：$(".box").append("<b>嗨！</b>");
8. 取值：$("input[name=my_name]").val();

十、 TadTools中呼叫jquery

1. $jquery=get_jquery($ui=false,$mode="local",$theme='base');
2. $ui：是否引入jquery ui
3. $mode：引入方式，其值有：none（不引入jquery）、google（使用Google的jquery）、local（引入TadTools中的jquery）
4. $theme：ui使用的佈景，有base和ui-lightness兩種。