Tad 教材網 - 線上書籍

:::

\[1012\]PHP進階開發及TadTools工具應用
============================

[![](http://tad0616.net/uploads/dl.gif)](http://www.tad0616.net/uploads/tad_book3/file/1012/01.zip)

### 一、 講義直送您的電腦

1. 講義：[http://www.tad0616.net/modules/tad\_book3/index.php?tbsn=26](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. 建議善用站台管理員，把常用的連線加入（此外，建議把樹狀目錄關閉）。  
   ![](http://www.tad0616.net/uploads/tad_book3/image/1012/aaa.png)
 
###   
 五、 開發工具：PSPad

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

1. 方法有二，一般法（離線意可用，但得自行更新版本）： 
  - (1) 先到 <http://jquery.com/> 下載最新版檔案，如：jquery-1.8.1.min.js
  - (2) 然後再網頁或程式中引入該檔案即可：
   
  ```
  <pre class="brush: xhtml;" title="code">
  <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
  ```
2. 直接連線法（需連線才能用，方便，可隨意切換版本）： 
  - (1) 直接遠端引用
   
  ```
  <pre class="brush: xhtml;" title="code">
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  ```
3. (2) 或是用Google的Loader：
 ```
<pre class="brush: xhtml;" title="code">
<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. 基本概念：什麼元件在什麼時候要做什麼事。
 ```
<pre class="brush: xhtml;" title="code">
<script type="text/javascript">
  $(document).ready(function(){
    //jquery語法
  });
</script>
```

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

:::