zAccordion

http://www.armagost.com/zaccordion/

一般電腦上傳圖片的方式也可以同樣抓取手機裡的圖片

http://www.plupload.com/examples/

jQuery圖表測試

http://at1968.com/lynn/debar/

八月二十一日-動態測試

http://at1968.com/lynn/autonav/

八月十五日-好用工具

http://codecanyon.net/item/formify/full_screen_preview/8552608?ref=jqueryrain

判斷手機而轉址的方法

關於判斷手機版而轉址，有兩種方式：

1) 有導頁

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var ismobile=navigator.userAgent.match(/J2ME|Opera Mini|SonyEricsson|Nokia|iPhone|iPod|BB10|PlayBook|android|webOS|BlackBerry|Windows Phone|Windows CE/i) != null;
if (ismobile) {
var redirect = confirm('您的手機適合手機版網頁，是否要轉到手機版網頁呢？');
if (redirect)
window.location = '你的網址';
}
});
</script>

2) 沒有導頁

<script type="text/javascript">
(function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,'你的網址');
</script>

GreenSock範例

GreenSock包含TweenLite、TweenMax、TimelineLite、TimelineMax，
這四個類別庫有什麼不一樣？
TweenMax包含全部的資料庫，TimelineMax加上時間軸的概念。

向下移動
http://at1968.com/lynn/greensock/TweenLite/

向下移動+放大+透明度
http://at1968.com/lynn/greensock/TweenMax/

時間軸+向下移動
http://at1968.com/lynn/greensock/TimelineLite/

時間軸+向下移動+放大+透明度
http://at1968.com/lynn/greensock/TimelineMax/

八月七日-壞皇后的魔鏡

http://at1968.com/lynn/clothes/

七月十七日-SVG

SVG放大不失真

http://www.jqueryrain.com/?uUorcOQO

insertBefore & prepend & before 的差異

如圖所示，insertBefore 等同 before ?

outerWidth & innerWidth & width 的差別

取得元素高度或寬度的方法，此圖一目了然。

PS：可以對照「一定學會JQuery的36堂關鍵課程」P111頁。

七月十六日 - jQuery Flickr Photoset with Bootstrap

http://www.jqueryrain.com/?e8CVQ4N8

:last 與 :last-child 的差別

: fisrt / :last 是從整組元素取出最初與最後的元素；

: fisrt-child / :last-child 是以父元素為基準，分別每個父元素下層的最初與最後的子元素。

換句話說，只要同時存在多個父元素，就會取出同等數量的最初/最後的子元素。

一定學會jQuery的36堂關鍵課程 第二章

利用階層指定元素的選擇器

(1) 取出某個元素底下的元素

$('#eva a').css(...);

(2) 取得某個元素最親近一層的元素

$('#eva > a').css(...);

(3) 取得某一個元素的下一個元素

$('#eva + li').css(...);

(4) 取得某個元素之後的所有元素

$('#eva ~ li').css(...);


依照出現順序取得目標元素

(1) 取出最初/最後的元素

$('#eva > li:first').css(...);
$('#eva > li:last').css(...);

(2) 取出偶數編號或奇數編號元素

$('#eva  li:even').css(...);
$('#eva  li:odd').css(...);

(3) 取出第n個元素

$('#eva > li:eq(2)').css(...);

(4) 取出第n個元素之前/之後的元素

$('#eva > li:lt(2)').css(...);
$('#eva > li:gt(2)').css(...);


利用子元素與字元作為篩選元素的條件

(1) 取出下層裡含有特定字元的元素

$('li:contains("xml")').css(...);

(2) 篩選擁有/空白內容的元素

$('td:empty').css(...);

(3)  以吻合特定選擇器的子元素作為篩選目標元素的條件

$('p:has(cite)).css(...);


專門取得子元素的篩選器

(1) 取得開頭或結尾的子元素

$('ul  li:first-child').css(...);
$('ul  li:last-child').css(...);

(2) 每隔n個取出子元素

$('ul  > li:nth-child(3n)').css(...);

(3) 取得唯一的子元素

$('p img:only-child').css(...);


利用屬性值篩選目標元素

(1) 以擁有特定屬性為條件篩選目標元素

$('a[target]').css(...);

(2) 以特定屬性是否等於/不等於某值為篩選元素條件

$('a[target="_blank"]').css(...);

(3) 篩選屬性值部分一致的元素

a. 以屬性值開頭符合某字串為條件篩選目標元素(開頭一致)

$('[屬性名稱^=值]').css(...);

b. 以屬性值開頭符合某字串為條件篩選目標元素(結尾一致)

$('[屬性名稱$=值]').css(...);

c. 以屬性值含有某字串為條件篩選目標元素(部分一致)

$('[屬性名稱*=值]').css(...);

(4) 同時使用多個屬性篩選器

$('a[target^="http:/"][target]').css(...);


其他篩選器

(1) 只篩選標題的篩選器

$(':header').css(...);

(2) 取得與選擇器不一致的元素

$('a:not([target])').css(...);

(3) 取出特定的表單

a. 所有的表單元素(<input>、<textarea>、<button>、<select>元素)

$(':input').css(...);

b.  文字框

$(':text').css(...);

c. 密碼輸入框

$(':password').css(...);

d. 單選按鈕

$(':radio').css(...);

e. 勾選框

$(':checkbox').css(...);

f. 檔案勾選框

$(':file').css(...);

g. 送出按鈕

$(':submit').css(...);

h. 圖片按鈕

$(':image').css(...);

i. 重設按鈕

$(':reset').css(...);

j. 所有的按鈕(<button>、<input type="button">元素)

$(':button').css(...);

k. 隱藏的欄位以及未顯示於螢幕上的元素

$(':hidden').css(...);

(4) 篩選出應存取的元素

a. 表單元素呈現有效的的狀態下

$(':enabled').css(...);

b. 表單元素呈現無效的狀態下

$(':disabled').css(...);

c. 選單按鈕或勾選框被勾選的狀態下

$(':checked').css(...);

d. 選取框被選取的狀態下

$(':selected').css(...);

e. 元素處於隱藏的狀態下

$(':hidden').css(...);

f. 元素處於顯示的狀態下

$(':visible').css(...);

g. 元素位於動態之中的狀態下

$(':animated').css(...);

一定學會jQuery的36堂關鍵課程 第一章

替超連結設計進階的樣式

虛擬類別

link(尚未連結)
visited(已連結)
hover(滑鼠移入)
active(已點選)

* 請務必以 link -> visited -> hover -> active的順序指定，
一旦順序有誤就無法正確套用樣式。

提供常用數學功能的Math物件

abs(計算絕對值)
pow(計算次方值)
ceil(進行小數點的四捨五入計算)
floor(進行小數點的無條件捨去計算)
sqrt(計算平方根)