over 2 years ago

00:01:00
偽Thread
setTimeout
setInternal/clearInternal
setInterval/setTimeout

00:16:00
window

00:24:00
JQuery

slector基本上跟CSS一樣。

(1) yoo
(2) moo
(3) woo
(4) coo

jQuery(function($){}); //這是ready的意思

jQuery(function($){
$('span') //上面四個span都會被選到
});

jQuery(function($){
$('span#moo') //只會選到(2)
});

jQuery(function($){
$('#moo') //只會選到(2),跟上面那個是一樣的
});

jQuery(function($){
$('span.woo') //只會選到(3)
});

特殊寫法
jQuery(function($){
$('[data-id='coo']') //只會選到(4)
});

00:27:00
$ === jQuery
所以$('[data-id='coo']') 跟jQuery('[data-id='coo']')
的意思是一樣的

set的操作
find/first/siblings/parent/parents/end

00:40:00
binding event:click/mouseover/mouseout/keyin/keyout/keypress/focus

jQuery(function($) {
$('span').mouseover(function(){
$(this).addClass('active');
}).mouseout(function(){
$(this).removeClass('active')
})

00:42:00
event.stopPropagation()

CSS設好之後,會變成一個一個的方框,按其中一個方框,卻會啟動所有方框都執行jQuery,所以要加event.stopPropagation()
jQuery(function($){
$('div').click(function(event){
$(this).addClass('active');
event.stopPropagation();
})

00:49:00
bind vs on(live)優缺點

(A)
jQuery(function($) {
$('span').mouseover(function(){
$(this).addClass('active');
}).mouseout(function(){
$(this).removeClass('active')
})

(A) (B)的效果是一樣的

(B)
jQuery(function($) {
$('span').bind('mouseover', function(){
$(this).addClass('active');
}).bind('mouseout', function(){
$(this).removeClass('active')
})

bind的功能

  1. 當javascript有新一個jQuery還沒有的新功能的時候,可以用bind加進來。 2.可以上namespace

00:54:00
實作一個動態增加欄位的form

  • 請輸入密碼 add del

1:00:00
railsfun params的包裝與使用

/?name=hihi&title=meow

=> params = {:name => 'hihi', title => 'meow'}

/?name=hihi&name=yoo

=> {:name => 'yooo}

hihi會遭到覆蓋

/?name[]=hihi&name[]=yoo

=> {:name => ['hihi','yoo']}

array建立法

/?name[]=yoo&title[]=hoo

=> {:name => ['yoo'], :title => ['hoo']}

array多層

/?name[title]=yoo&name[age]=18

=> {name => {:title => yoo', :age => '18'}}

Hash建立法

/?name[title][]=yoo&name[title][]=hoo

=> {:name => {:title => ['yoo', 'hoo']}}

Hash / Array混用

/?name[][] = yoo

=> {:name => nil}

用法錯誤,語意錯誤

1:03:00
Ajax簡單的實作

1:11:00
jQuery ajax
看jQuery的document
jQuery.ajax

1:24:00
無限分類下拉選單

1:27:00
JsonP

1:31:00
為何要用jQuery,為何要拋棄jQuery

1:39:00
推薦的書:
javascript Good part
Javescript Design pattern (不建議看)

1:41:00
其它lib的應用
jQeury UI

← RailsFun tw 新手教學 day5 HD RailsFun tw 新手教學 day5 HD →