1. JAVASCRIPT - 簡介
跨瀏覽器，
DOM + CSS，需要 FrameWork

2. JQUERY - 簡介
The Write Less, Do More-寫得少做的多
加強輕鬆控制，非同步傳輸AJAX、事件Event
目前有上百個 plugins，jQuery UI，jQuery Mobile

3. JQUERY GETTING START
$ dc m n ) ra y hn l r)
( o ue t .e d( a de
$ )r ay h nl r) (h si n t rc me dd
( .e d ( a de
t i s o eo mn e )
$ hn l r)
( a de
=
>
$ fn to ({ )
( uc i n) };

4. 常用 JQUERY 範例
選擇Tag
修改Tag
表單驗證
Element Style List
AJAX

5. Q1. 如何選擇特定的 TAG
< i i= bd "
d v d" oy >
<2<h>
h>/ 2
<i c as "o tn s >
dv l s=cn e t"
<>/>
p<p
<>/>
p<p
<dv
/i>
<dv
/i>
=
>
$ " i " / 選取 d v 的元素
( dv ) /
i
$ "i ". eg h
( dv ) ln t
$ " b d " / 選取 i 為 b d 的元素
( #o y ) /
d
oy
$ " c n e t " / 選取 c a s 為 c n e t 的元素
( .o t ns ) /
ls
o tn s
$ " " . s ( " a k r u d : # 0 " ) / 改變 p 的背景色
( p) c s{ bc go n" " F0 }; /
簡單選取能力 => CSS語法
批次處理能力

6. Q2. TAG 操作
選取有 TARGET 屬性並加入文字後的結果
< he = ht :/ se r. o "j Ga s/ >
a r f" tp /j g as cm >s e r< a
< he = ht :/ og ec m tr e =_ ln "G ol <a
a r f " tp /g o l. o" a gt "b ak > og e/ >
< he = ht :/ mz nc m tr e =_ ln "A ao <a
a r f " tp /a a o. o" a gt "b ak > mz n/ >
=
>
< he = ht :/ se r. o "j Ga s/ >
a r f" tp /j g as cm >s e r< a
< he = ht :/ og ec m tr e =_ ln " G ol ( lc ) />
a r f" tp /g o l. o" a gt "b ak > og e Ci k< a
< he = ht :/ mz nc m tr e =_ ln " A ao ( lc ) />
a r f" tp /a a o. o" a gt "b ak > mz n Ci k< a
$("a[target]").append(" (Click)");
$("a[target]").prepend(" (Click)");
$("a[target]").html(" (Click)");
$("a[target]").text(" (Click)");

7. Q3. ELEMENT 顯示 / 隱藏
表單驗證
< tl t p= tx /s "
s ye y e " et c s>
.e p {ip a :n n}
hl ds ly o e
<sy e
/tl >
< om
f r>
<a e fr "s ra e >
l b l o = u e n m " 請輸入大名< l b l
/ae>
<n u tp =t x" i=u en m" nm =u e nm "
ip t ye "e t d "s ra e a e" sr ae >
<p nc as "e p >
s a l s = h l " 這個欄位必填喔< s a >
/ pn
<fr >
/om
$"n u# sr ae ) ca g( uc i n) {
(ip t ue nm ". hn e fn to (
i (( ip tu en m". a( = ")
f $" nu #s r ae)v l) = "
$"p nh l" . hw )
(s a. ep )s o( ;
};
)

8. Q4. ELEMENT STYLE LIST
JQUERY + CSS
< tl t p= tx /s "
s ye y e " et c s>
a
{
d sl y bo k
i p a: lc ;
w dh 1 0x h ih : 1 0;
i t : 0 p; e gt 0%
}
.i { br e :1p s ld#0 ; }
bg
od r 0 x o i F 0
.m l {br e :1 xs ld#0 ;}
sa l o dr p o i F 0
<sy e
/tl >
< li =m n"
u d " eu >
<i < he =# >
l > a r f " " 控制面板首頁< a < l >
/>/ i
<i < he =# >
l > a r f " " 編輯個人資料< a < l >
/>/ i
<i < he =# >
l > a r f " " 個人空間管理< a < l >
/>/ i
<i < he =# >
l > a r f " " 個人空間管理< a < l >
/>/ i
<u>
/l
$"i ao d ) ad l s( bg)
( l : d " . d C a s " i ";
$"i ae e" .d C as "m l" ;
(l : vn )a dl s( s al )
$"i ae e" .e o el s( sa l )
(l : vn )r mv Ca s "m l" ;

9. Q5. AJAX
取得 html tag 並將找出文件內所有 div 下一層的 h1 填入
div.content 內
|
< i>
dv
<1 Hl ow rd <h>
h>e l ol !/1
<2 Ti i H <h>
h > h s s 2 /2
<1 jG as cm <h>
h>s er .o !/1
<dv
/i>
< i c a s" ot n" < d v
d v ls =c ne t >/ i>
$ " c n e t ) l a ( a . t l d v h ";
( .o t n" .o d" ah m i 1)

10. JQUERY ANIMATION

11. PROBLEM
$("#body p").length = ?
< i i= bd "
d v d" oy >
< > aa rp 0 />
pp r ga h <p
<i c as "o tn s >
dv l s=cn e t"
<>a ar p 1/ >
pp rg ah <p
<>a ar p 2/ >
pp rg ah <p
<dv
/i>
<dv
/i>

12. COLORBOX GETTING START
< ikrl "t ls e t h e=c lr o. s"
l n e =s ye he " rf"o o bx cs >
< ci ts c" tp : /j xg ol a i. o/ jx lb / qe y1 1. /q e ym nj "< s rp >
s rp r= ht s/ aa . og ep sc ma a /i sj ur / .0 2j ur .i . s> /c it
< ci ts c" .j u r. oo bx j "< sr p >
s rp r= ./ qe yc l ro .s >/ ci t

13. COLORBOX
<>aca s " ru 1 he = ./ ot n/ ho e 1j g tt e " ea dm g ad a hr o te O
p< l s= go p" r f" .c n et oo pe .p " il = M n y rn ft e n h
<>aca s " ru 1 he = ./ ot n/ ho e 2j g tt e " nt eO o pe a ac id>r
p< l s= go p" r f" .c n et oo pe .p " il = O h ho e s
h l "G o
< > a ca s " ru 1 he = ./ ot n/ ho e 3j g tt e " nt eO o pe a a a u t> r
p< l s= go p" r f" .c n et oo pe .p " il = O h ho e s n dl "G
$ "g op ". oo b x{ e: go p ')
( .r u 1) cl ro (r l 'r u1 };
v rh m =' ;
a tl
'
h m + ' h> el C lr o ~/ 1'
t l = <1 Hl o oo Bx <h > ;
v rw = 30 h =1 0
a w
8, h
5;
$ cl ro (
. oo b x{
hm :h m,
tl tl
se d 30
pe : 5,
wd h w,
it : w
hi h: h,
eg t h
oe :t u,
pn re
oa iy 0 8
pc t : . ,
oC ml t: fn t o( {a et ' pn d' ;}
no p ee u ci n) lr (o ee !)
};
)

14. GREENSOCK
GETTING START
< ci ts c" we M xm nj "< s rp >
s rp r= Te na .i . s> /c it
T en a. o Ee et s ed { "s " cs sy e "e a" d ly " no pe e :o Cm })
w eM x t( lm n , p e ,
c s: s_ t l, d ly : ea , o C ml t" n o
;

15. DEMO2
$ wn o )m ue o ef nt o( e et ){
( i dw . os mv (u c in v n
vr p =e et pg X
a x
v n. a e;
vr p =e et pg Y
a y
v n. a e;
Te na .o $ "m " , s ed { cs { " e t: p, "o " p }} )
we M xt ( ( i g) p e,
s:
lf " x t p: y
;
};
)