jQuery基礎摘要1

Source:
http://www.w3schools.com/jquery/default.asp
http://api.jquery.com/ 

1.
jQuery語法： $(selector).action()

2.
$(document).ready(function(){ //... });
可以縮寫成
$(function(){ //... });

3.
$("*") 選擇所有元素

$("ul li:first") 選擇第1個ul的第1個li
$("ul li:first-child") 選擇每個ul的第1個li

$("[href]") 選擇含有href屬性的所有元素
$("a[target!='_blank']") 選擇「含有target屬性且其值為'_blank'的a元素」以外的元素

$(":button") 選擇所有button元素跟含有type屬性且其值為'button'的input元素

4.
一些常見DOM事件:
Mouse Event:
click, dbclick, hover, mouseenter, mouseleave, mousedown(左鍵), mouseup(左鍵)

Keyboard Event:
keypress, keydown, keyup

Form Event:
focus, blur(lose focus), change, submit

Document/Window Event:
load, unload, scroll, resize

5.
Effect
- hide, show, toggle
- fadeIn, fadeOut, fadeToggle
- slideDown, slideUp, slideToggle
ex: $(selector).effect([speed], [callback]);
speed - "fast", "slow", or time in milliseconds
callback - 當method完成後要執行的function

-  fadeTo
ex:$(selector).fadeTo(speed, opacity, [callback]);
opacity - 可見度, 其值0~1之間

 - animate
$(selector).animate({params}, [speed], [callback]);
{params} - 動畫最終目標的CSS性質參數
ex: $("div").animate({left:'250px'});
要變動元素位置，記得在CSS中將position設為relative, fixed, or absolute，否則預設是無法更動
{params}中的CSS性質參數需要是camel-cased，ex: paddingLeft,  marginRight
而color animation需要其他plugin

ex: 指定絕對值
$("div").animate({left:'250px', opacity:'0.5', height:'150px', width:'150px'});
ex: 指定相對值
$("div").animate({left:'250px', height:'+=150px', width:'-=50px'});
ex:指定預定值
$("div").animate({height:'toggle' /*'show', 'hide'*/});

animate預設啟用queue功能，也就是執行完一個animate後才會再執行下一個

(未完待續...)