[1012]PHP進階開發及TadTools工具應用
1. jQuery的用法
一、 講義直送您的電腦
- 講義：http://www.tad0616.net/modules/tad_book3/index.php?tbsn=26
- 請申請Dropbox（雲端磁碟機https://www.dropbox.com），一旦發布講義，您的電腦會馬上收到。（有帳號的可不用再申請）
- 您也可以直接連上Dropbox網站，只要有網路，都可直接下載教材。
二、 關於本課程
- 本課程是系列中的第五個學程，屬最高階部份，因此，有任何聽不懂的：拜託您問！
- 上課歡迎隨時起來走動，互相觀摩交流，盡量別保持安靜。飲食部份請至走廊食用。
- 上課時間為7:00～7:15，由於教室電腦是全部還原，故軟體需要每次都安裝一次，留15分鐘時間給各位裝軟體及發問。休息時間為8:10~8:30，課程於9:50結束。
- 上課要拍照、錄音、錄影都隨便您～～能和同學分享更好。
- 座位沒有強制性，但也不建議每次都換來換去，盡量於第三次上課後即固定座位。
三、 申請學生練習主機空間（http://163.26.52.243）
- 學生練習主機為Linux主機，僅社大學員可以申請（FTP及MySQL帳號）。
- 若已經有了可不需再申請，當然要再申請一個新的也無妨。
- 使用期限為本學期，學期結束後，可能隨時會清除舊資料，故請自行備份。
- 申請後，您的網站網址為：「http://163.26.52.243/~帳號」
- 資料庫和FTP帳號、密碼是一樣的！
四、 務必學會FileZilla檔案傳輸軟體
- FTP用來把檔案傳到主機，FTP port為22（ssh加密通道）。
- 建議善用站台管理員，把常用的連線加入（此外，建議把樹狀目錄關閉）。
五、 開發工具：PSPad
- 可直接從163.26.52.243下載可攜版，裡面已經幫各位做好設定。
- 解壓縮後，直接執行pspad.exe即可。
- 請開啟「檢視→行號」。
六、 套用jquery
- 方法有二，一般法（離線意可用，但得自行更新版本）：
- (1) 先到 http://jquery.com/ 下載最新版檔案，如：jquery-1.8.1.min.js
- (2) 然後再網頁或程式中引入該檔案即可：
<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
- 直接連線法（需連線才能用，方便，可隨意切換版本）：
- (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基本用法
- 基本概念：什麼元件在什麼時候要做什麼事。
- $() 就是用來指定元件的挑選器（什麼元件）， $(document) 或$()代表此網頁。
- (1) 指定標籤：$("button") →抓到的是→ <button>
- (2) 指定id：$("#aa")→抓到的是→ id="aa"
- (3) 指定class：$(".bb")→抓到的是→ class="bb"
- ready()是事件，事件中通常會執行某函數，因為函數大多只用一次，所以，通常直接在()中寫 function(){} 即可，不另外命名，稱之為匿名函數（或lambda函數）
- 完整事件或功能建議參考：http://www.css88.com/jqapi-1.7/
<script type="text/javascript">
$(document).ready(function(){
//jquery語法
});
</script>
八、 jquery事件（event）用法
- 基本概念：什麼元件在什麼時候要做什麼事，底下以一些常用的事件為例。
- (1) click()：點按時
- (2) change()：值改變時
九、 jquery效果（Effects）
- 隱藏：$("#tbl").hide(); 顯示：$("#tbl").show();
- 滑下：$("#tbl").slideDown("slow"); 滑上：$("#tbl").slideUp("slow");
- 隱出：$("#tel").fadeOut("slow"); 隱入：$("#tel").fadeIn("slow");
- 加上CSS：$("#tbl").css("border","1px solid black");
- 套用class：$("body").addClass("girl");
- 移除class：$("body").removeClass();
- 加到裡面：$(".box").append("<b>嗨！</b>");
- 取值：$("input[name=my_name]").val();
十、 TadTools中呼叫jquery
- $jquery=get_jquery($ui=false,$mode="local",$theme='base');
- $ui：是否引入jquery ui
- $mode：引入方式，其值有：none（不引入jquery）、google（使用Google的jquery）、local（引入TadTools中的jquery）
- $theme：ui使用的佈景，有base和ui-lightness兩種。