線上書籍

Home

[982]PHP網站開發 進階應用技巧

一、套用jquery

1.方法有二,一般法(離線意可用,但得自行更新版本):
(1) 先到 http://jquery.com/ 下載jquery-1.3.2.min.js
(2) 然後再網頁或程式中引入該檔案即可
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
2.直接連線法(需連線才能用,方便,可隨意切換版本):
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" language="javascript">google.load("jquery", "1.3.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://visualjquery.com/

三、jquery事件(event)用法

1.基本概念:什麼元件在什麼時候要做什麼事,底下以一些常用的事件為例。
(1) click():點按時
(2) change():值改變時
2.完整的事件: http://webdesign.piipo.com/jquery/jquery_events

四、jquery效果(Effects)

1.基本概念:什麼元件在什麼時候要做什麼事,底下以一些常用的事件為例。
(1) 隱藏:$("#tbl").hide();
(2) 顯示:$("#tbl").show();
(3) 滑下:$("#tbl").slideDown("slow");
(4) 滑上:$("#tbl").slideUp("slow");
(5) 隱出:$("#tel").fadeOut("slow");
(6) 隱入:$("#tel").fadeIn("slow");
(7) 加上CSS:$("#tbl").css("border","1px solid black");
(8) 套用class:$("body").addClass("girl");
(9) 移除class:$("body").removeClass();
(10) 加到裡面:$("#box").append("<b>嗨!</b>");
(11) 取值:$("input[name=my_name]").val();