win7安裝XAMPP免安裝版心得

目的：把程式放到雲端資料夾上，使得重灌電腦或換電腦時程式還會在，且不用另外設定httpd.conf、資料庫（只需要設hosts）

http://www.apachefriends.org/zh_tw/xampp-windows.html
下載 XAMPP portable lite 1.8.3 PHP 5.5
解壓縮後直接執行xampp_start.exe或使用xampp-control.exe 開啟控制面板

啟動apache時出現以下錯誤：
16:50:25  [Apache]  Status change detected: running
16:50:26  [Apache]  Status change detected: stopped
16:50:26  [Apache]  Error: Apache shutdown unexpectedly.
16:50:26  [Apache]  This may be due to a blocked port, missing dependencies,
16:50:26  [Apache]  improper privileges, a crash, or a shutdown by another method.
16:50:26  [Apache]  Press the Logs button to view error logs and check
16:50:26  [Apache]  the Windows Event Viewer for more clues
16:50:26  [Apache]  If you need more help, copy and post this
16:50:26  [Apache]  entire log window on the forums

http://stackoverflow.com/questions/18300377/xampp-apache-error-apache-shutdown-unexpectedly
httpd.conf和httpd-ssl.conf 基本上已經和上面回答的一樣，設定為80和443 port了
如果之前有開啟過ASP.NET的IIS服務的話
去 "開始" -> "控制台" -> "程式和功能" -> "開啟或關閉Windows功能" -> 將"Internet Information Services"取消

Skype要把 80和443 替代port關掉

不能把他放在"Google 雲端硬碟"，因為會有路徑的錯誤
C:\Users\user\Google 雲端硬碟\xampp\apache\bin>httpd.exe
httpd.exe: Syntax error on line 37 of C:/Users/user/Google \xe9\x9b\xb2\xe7\xab\
xaf\xe7\xa1\xac\xe7\xa2\x9f/xampp/apache/conf/httpd.conf: ServerRoot must be a v
alid directory

解法：放Dropbox

在控制面板中點右邊的Shell ，可以開啟XAMPP專屬的Windows console，在這邊可以用perl和mysql指令

http://www.mysitetestyes.altervista.org/work-with-xampp-on-dropbox/
Install xampp in a directory in a primary level (ex. c:\xampp). Be careful not to install xampp with the installer but copy the files from the zipped archive.
因為在c槽下還需要放置xampp，所以還是使用appserv的方案做，用vhost指到雲端硬碟的程式，並手動備份httpd.conf, vhost.conf, hosts, MySQL資料

Apache 2 如何排除 client denied by server configuration 問題 ? ( 由error_log看 )
http://www.arthurtoday.com/2011/07/apache-2-client-denied-by-server.html#.UsPiitIW214
<VirtualHost *:80>
    DocumentRoot "c:/arthurtoday"
    ...
    ...
    <Directory "c:/arthurtoday">
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

vhost的 ServerName 請勿設 xx.localhost ，否則內網公司其他人連你的 xx.localhost 會連不上： Err_Connection_Refused （即便打開port和防火牆，只有192.168.1.xx連得上，但vhost連不上）。可以設成 bo.example.com 。這邊與打開skype無關，因為8.36.0.52 的skype已經沒有advanced options了

HTML 常見問題

避免&ltb;  &rtb; &#91;  &#93;  &lt;  &gt;
在瀏覽器中自動被轉成特定符號

解法1：
寫在js函數註解裡面
var getHtml = function(){
 /* >>>{{$value}}<<<*/
}

alert( getHtml.toString().match(/>>>([\s\S]+)<<</)[1] )
缺點：
{{$value}}內容含有 */ 時，js會出錯

解法2：
寫在html註解裡面
<div id="textarea_value">
  <!--{{$value}}-->
</div>
$("#textarea").val($("#textarea_value").html().match(/<!--([\s\S]+)-->/)[1]);
因為該頁面後端有檔<和>的符號，所以暫時無{{$value}}內容含有HTML註解的問題

區網設定

Router：D-Link DI-604 和
無線AP：ASUS RT-N10E

如果區網孔直接接電腦的網路要設固定ip，則router接上去的router也要設ip
重新載入
裝router ，router ip 192.168.0.1
帳號admin，密碼空的或admin
用迴紋針搓小孔reset
點管理頁面左邊的DHCP讓他變成"靜態 DHCP 用戶列表" => 以後就固定了
重新刷頁讓router 自動去抓然後設ip
抓不到用寫網卡卡號進去和ip進去直接設定

Dell的網卡： 00-14-22-5A-2A-DD

ASUS-F81se
打開無線網路功能
http://vip.asus.com/forum/view.aspx?board_id=3&model=F81Se&id=20090831103558031&page=1&SLanguage=zh-tw
在筆電的前面(SD卡插槽旁邊), 有一個無線網路及藍牙的開關. 要確定將這個開關放在 ON 的位置. 按 Fn+F2 就可以打開或關閉無線網路及藍牙.

因為要裝vpn所以敗了RT-N12HP
http://benjr.tw/11765 (從Windows Client開始做)
安裝：
下載 OpenVPN GUI 軟體,OpenVPN 的網站可以下載到 http://openvpn.se/files/install_packages/ 目前最新的是 openvpn-2.0.9-gui-1.0.3-install.exe .
連阿山的vpn
將xxx.tar.gz解壓縮到 C:\Program Files\OpenVPN\config\nuface_client1
xxx.ovpn改名  nuface_client1.ovpn
內容要改的地方:
cert xxx.crt
key xxx.key
proto tcp => proto udp
最後加入這兩行 ( http://mugurel.sumanariu.ro/windows/vista-and-win-7-openvpn-route-problem/ ，錯誤訊息： ROUTE: route addition failed using CreateIpForwardEntry: 有一些引數不正確。  )
route-method exe
route-delay 2
最後點右下角圖示connect
檢查有無成功：去 http://www.whatismyip.com.tw/ 看ip是不是175.182.64.xx
測速：
去 http://www.speedtest.net/ ，我家hinet adsl 8m 測出來是http://www.speedtest.net/my-result/3311260878

perl的debugger模式

湯姆大叔：The service I ran was in perl -d and I traced through some of the requests to see where they were blowing up.

$ man perldebug
( also see $ man perldebtut )

$ perl -d xxx.pl
進入  DB<1>
n =>執行下一行
p print "test"; =>執行一行程式，亦可在此改變變數
h => 指令說明書
R =>重頭開始

Max: 可以看變數執行的過程變化跟設定中斷點跟測試等等
Max: 不過 perl -d 也只適合單機的程式
Max: 網頁的話要加工
Max: 不實用

Harry的debugger模式重點：

List/search source lines:               Control script execution:

  l [ln|sub]  List source code            T           Stack trace

  - or .      List previous/current line  s [expr]    Single step [in expr]

  v [line]    View around line            n [expr]    Next, steps over subs

  f filename  View source in file         <CR/Enter>  Repeat last n or s

  /pattern/ ?patt?   Search forw/backw    r           Return from subroutine

  M           Show module versions        c [ln|sub]  Continue until position

Debugger controls:                        L           List break/watch/actions

  o [...]     Set debugger options        t [expr]    Toggle trace [trace expr]

  <[<]|{[{]|>[>] [cmd] Do pre/post-prompt b [ln|event|sub] [cnd] Set breakpoint

  ! [N|pat]   Redo a previous command     B ln|*      Delete a/all breakpoints

  H [-num]    Display last num commands   a [ln] cmd  Do cmd before line

  = [a val]   Define/list an alias        A ln|*      Delete a/all actions

  h [db_cmd]  Get help on command         w expr      Add a watch expression

  h h         Complete help page          W expr|*    Delete a/all watch exprs

  |[|]db_cmd  Send output to pager        ![!] syscmd Run cmd in a subprocess

  q or ^D     Quit                        R           Attempt a restart

Data Examination:     expr     Execute perl code, also see: s,n,t expr

  x|m expr       Evals expr in list context, dumps the result or lists methods.

  p expr         Print expression (uses script's current package).

  S [[!]pat]     List subroutine names [not] matching pattern

  V [Pk [Vars]]  List Variables in Package.  Vars can be ~pattern or !pattern.

  X [Vars]       Same as "V current_package [Vars]".  i class inheritance tree.

  y [n [Vars]]   List lexicals in higher scope <n>.  Vars same as V.

  e     Display thread id     E Display all thread ids.

For more help, type h cmd_letter, or run man perldebug for all docs.

apache 與 nginx

http://ithelp.ithome.com.tw/question/10122157?tag=ithome.nq

Rellik: 之前跟你談到 nginx ..
Rellik: 大概要從 apache1 介紹起才會比較清楚..
Rellik: 傳統的 apache 1.x 是走的是 multi process 模型
Rellik: 意思是一個連線，就 fork 一個獨立的 proces 處理 ..
Rellik: 這樣的模型程式寫起來沒啥問題，也不容易出錯, 但可想而知效率不好
Rellik: 因為 fork 一個 process ， fork 需要成本， process 也需要記憶體
Rellik: 雖然 linux 核心後來大幅優化 fork 的成本，使其和 thread 差不多，但有人實測，還是有差 ...
Rellik: 而且他無法面對海量的連線，比如同時 10000 個連線 <---- 要 10000 個 process
Rellik: 所以後來演變成 multi thread . . .
Rellik: thread 和 fork 最大的差別在於 thread 其實是同一個 process，但是每個 thread 可以用不同的 CPU 資源，因此 multi thread 優勢在於比較省記憶體
Rellik: 但 multi thread 由於會共用資源... 所以程式一但大起來很很頭痛，程式設計師必須處理多個 thread 同時存取同一份資源的問題
Rellik: 然後一樣， thread 有其數量限制，所以他依然不能處理 10000 這種海量同時連線 ...
Rellik: 所以後來就出現 event based 的 function ... 也就是 select / poll / epoll
Rellik: 前兩者算是 POSIX 標準，特別是 select 連 windows 都可以用 ...
Rellik: 但是前兩者各有限制，也是吃不了海量資料 = =
Rellik: 所以後來各種 os 乾脆自己在 kernel space 做自己的 event based function
Rellik: 像是 freebsd 有 kqueue , linux 有 epoll, windows 有 iocp
Rellik: 但程式寫起來不好寫，因為他是 event based ..
Rellik: nginx 和 light 就是基於 kernel event base 下開發的 http server
Rellik: apache 在 2 版開始也開始支援 event base
Rellik: 但是..效果不太好
Rellik: 面對 100k 海量連線的話可能就會死翹翹

linux C心得

linux版本 centos 6
如何開始？
http://linux.vbird.org/linux_basic/0520source_code_and_tarball.php#simple_ex_hello

正在試：
http://www.cyberciti.biz/tips/linux-unix-connect-mysql-c-api-program.html
http://www.cyberciti.biz/files/mysql-c-api.c.txt
要改寫成 #include <mysql/mysql.h>

執行a.out, 出現錯誤：
mytable.c:6:19: 錯誤：mysql.h：沒有此一檔案或目錄
mytable.c: In function 「main」:
mytable.c:10: 錯誤：「MYSQL」 未宣告 (在此函式內第一次使用)
mytable.c:10: 錯誤：(即使在一個函式內多次出現，每個未宣告的識別碼在其
mytable.c:10: 錯誤：所在的函式內只報告一次。)
mytable.c:10: 錯誤：「conn」 未宣告 (在此函式內第一次使用)
mytable.c:11: 錯誤：「MYSQL_RES」 未宣告 (在此函式內第一次使用)
mytable.c:11: 錯誤：「res」 未宣告 (在此函式內第一次使用)
mytable.c:12: 錯誤：「MYSQL_ROW」 未宣告 (在此函式內第一次使用)
mytable.c:12: 錯誤：expected 「;」 before 「row」
mytable.c:25: 警告：隱含宣告與內建函式 「exit」 不相容
mytable.c:31: 警告：隱含宣告與內建函式 「exit」 不相容
mytable.c:38: 錯誤：「row」 未宣告 (在此函式內第一次使用)


http://stackoverflow.com/questions/14604228/mysql-h-file-cant-be-found
The mysql.h file from the libmysqlclient-dev Ubuntu package is located at /usr/include/mysql/mysql.h.

在centos安裝libmysqlclient-dev方法
https://www.centos.org/forums/viewtopic.php?t=29620
# yum list \*mysql\* | grep dev

# yum install mysql-devel.i686
安裝成功 -
# sudo yum install mysql-server mysql mysql-dev
...
Setting up Install Process
Package mysql-server-5.1.71-1.el6.i686 already installed and latest version
Package mysql-5.1.71-1.el6.i686 already installed and latest version
Package mysql-devel-5.1.71-1.el6.i686 already installed and latest version
Nothing to do
( 有裝成功有這隻檔案 /usr/include/mysql/mysql.h )

錯誤：
# gcc mytable.c
/tmp/ccaOFT1h.o: In function `main':
mytable.c:(.text+0x3d): undefined reference to `mysql_init'
mytable.c:(.text+0x91): undefined reference to `mysql_real_connect'
mytable.c:(.text+0xa1): undefined reference to `mysql_error'
mytable.c:(.text+0xe8): undefined reference to `mysql_query'
mytable.c:(.text+0xf8): undefined reference to `mysql_error'
mytable.c:(.text+0x137): undefined reference to `mysql_use_result'
mytable.c:(.text+0x16c): undefined reference to `mysql_fetch_row'
mytable.c:(.text+0x183): undefined reference to `mysql_free_result'
mytable.c:(.text+0x18f): undefined reference to `mysql_close'
collect2: ld 回傳 1
http://lyxxiang.blog.163.com/blog/static/22846192011615105821150/
解法：
# gcc -o mytable $(mysql_config --cflags) mytable.c $(mysql_config --libs)

錯誤：
mytable.c:27: 警告：隱含宣告與內建函式 「exit」 不相容
解法：
加入 #include <stdlib.h>

要怎麼傳入參數？ ( # mytable note add "message" )
http://www.gnu.org/savannah-checkouts/gnu/libc/manual/html_node/Example-of-Getopt.html#Example-of-Getopt
或用for
http://stackoverflow.com/questions/498320/pass-arguments-into-c-program-from-command-line

int main(int argc, char *argv[])
{
    int i = 0;
    for (i = 0; i < argc; i++) {
        printf("argv[%d] = %s\n", i, argv[i]);
    }
    return 0;
}

美化縮排:
使用vim  gg=G

字串連結
http://stackoverflow.com/questions/308695/c-string-concatenation
char * sql = "INSERT INTO `mytable`.`note` (\
`message` ,\
)\
VALUES (\
'%s'
);";
char sql_buf[256];
snprintf(sql_buf, sizeof sql_buf, sql, message);
printf("sql_buf:%s\n", sql_buf);

字串比較：
http://www.programmingsimplified.com/c-program-compare-two-strings
if( strcmp(a,b) == 0 )
   printf("Entered strings are equal.\n");
else
   printf("Entered strings are not equal.\n");

寫Makefile：
http://kevincrazy.pixnet.net/blog/post/29780477-makefile%E7%B0%A1%E6%98%93%E6%95%99%E5%AD%B8...
# it is a test
all:hello.c
gcc hello.c -o hello
clean:
rm -f hello

錯誤：
Makefile:4: *** missing separator.  Stop.
http://www.wretch.cc/blog/awaysu/24890447
解法： 縮排使用tab而非空白

Makefile裡面錯誤再現
# make
gcc -o mytable  mytable.c
/tmp/ccxINA1O.o: In function `main':
mytable.c:(.text+0x85): undefined reference to `mysql_init'
原因：裡面看不懂 $(mysql_config --cflags) 和 $(mysql_config --libs)
解法：
在命令列中輸入mysql_config --cflags 和 mysql_config --libs 把值印出來
直接寫死在Makefile裡面

讀取conf檔
http://jax-work-archive.blogspot.tw/2011/03/c_28.html
錯誤：
test_config.c:13: 錯誤：expected 「=」, 「,」, 「;」, 「asm」 or 「__attribute__」 before 「readConfig」
解法：
http://stackoverflow.com/questions/13274230/how-to-work-with-boolean-function-in-c
新增 #include <stdbool.h>
bool readConfig()要寫在main()前面

將char * 轉化為數字
http://stackoverflow.com/questions/9610895/how-do-you-cast-a-char-to-an-int-or-a-double-in-c
int i = atoi(c);
/* int    note_id = atoi(argv[3]); */

C語言物件寫法
http://www.bolthole.com/OO-C-programming.html
錯誤：
FooOBJ.c: In function 「newFooOBJ」:
FooOBJ.c:20:21: 警告： 隱含宣告與內建函式 「malloc」 不相容 [enabled by default]
FooOBJ.c:21:2: 警告： 隱含宣告與內建函式 「bzero」 不相容 [enabled by default]
FooOBJ.c: In function 「deleteFooOBJ」:
FooOBJ.c:53:2: 警告： 隱含宣告與內建函式 「free」 不相容 [enabled by default]
解法：
bzero => 新增 #include <string.h>
malloc、free => 新增 #include <malloc.h>
編譯：
$ gcc test.c FooOBJ.c
執行：
$ ./a.out

透過malloc()所分配出來的空間必須由使用者呼叫free()才能歸還給系統。初學者常犯的錯誤之一,就是忘了用free()歸還空間,這會造成程式佔用太多記憶體,此現象稱為memory leakage。相反的,如果空間已用free()歸還了,卻還試著去使用那塊記憶體,則會發生Segmentation Fault (core dumped)的錯誤。

如果將mysql的操作移到FooOBJ.c後，$(mysql_config --libs)要移到FooOBJ.c後面
gcc -o mytable $(mysql_config --cflags) mytable.c FooOBJ.c $(mysql_config --libs)

把struct當參數傳入function （類似以物件方式傳入函數中）
http://stackoverflow.com/questions/10370047/passing-struct-to-function
void addStudent(struct student person) {

}
struct相關用法：
http://programming.im.ncnu.edu.tw/Chapter13.htm
http://openhome.cc/Gossip/CGossip/StructABC.html

getopt
http://people.cs.nctu.edu.tw/~yslin/library/linuxc/main.htm
http://www.gnu.org/software/libc/manual/html_node/Example-of-Getopt.html#Example-of-Getopt
傳入多個字串的參數
http://stackoverflow.com/questions/1973742/how-to-get-a-value-from-optarg
c = getopt(argc, argv, "i:p:") //一個參數後面就接一個冒號(:)

在ubuntu上安裝ansi c 的函數手冊(man)
http://superuser.com/questions/40609/how-to-install-man-pages-for-c-standard-library-functions-in-ubuntu
$ apt-get install manpages-dev manpages-posix-dev
問題：
$ man getopt
結果出現的是User Commands的文件
變成要使用 $ man --all getopt 一頁一頁看後面這兩種文件
Linux Programmer's Manual => getopt(3)
POSIX Programmer's Manual => getopt(3posix)
有方法直接看Linux Programmer's Manual裡面的getopt man page嗎？
答：
$ man 3 getopt
加-w可以找到該 manpage 的路徑
加-f列出清單

ubunut搜尋有哪些套件可以裝
http://www.techiecorner.com/320/how-to-use-apt-to-list-available-packages/
# this will list all packages available thru apt-get
$ apt-cache pkgnames

# this will only return you the relevant result
$ apt-cache search 'your search term here'

使用getopt_long 讀取參數
http://www.gnu.org/software/libc/manual/html_node/Getopt-Long-Option-Example.html

留言板參考：
http://yiyingloveart.blogspot.tw/2012/01/php.html

重灌心得

使用HD tune 測了舊硬碟發現有壞軌, 立碼買了SSD
使用SSD安裝win7出現錯誤=> 可能是記憶體有問題, 將兩條記憶體任意拆下來安裝 => 通過
來使用burnIn測試是哪一條記憶體有問題, 結果都沒問題
再使用兩條記憶體重裝一次 => 通過 ( 可當初SSD沒插好 )
將SSD放入原本筆電硬碟的外盒中->有避震功能
除了驅動，不用安裝華碩的應用軟體(ATK key除外)
裝好後安裝防毒, 小紅傘or 微軟免費防毒
安裝軟體:
chrome
LINE
新酷音(GOOGLE拼音)
google雲端硬碟桌機版
dropbox桌機板
把免安裝軟體放雲端上, 以減少下次重灌時安裝的軟體數

選用：
Daemon Tools Lite => 虛擬光碟掛載軟體(iso)

匯出 PuTTY 設定備份
http://www.phpini.com/linux/export-putty-setting-backup
每次重新安裝 Windows 後，其中一個必裝的軟件是 PuTTY，但每次也要將自己每一台主機加上去實在很麻煩，以下是匯出 PuTTY 設定備份的方法:
1. 按 "開始" -> "執行"，然後輸入 "RegEdt32" 並按確定。
2. 移到 HKEY_CURRENT_USER -> Software -> SimonTatham （新電腦會沒這個目錄）
3. 選擇 SimonTatham 後按 "檔案" -> "匯出"。
4. 儲存好匯出的登錄檔。
5. 將登錄檔放到需要匯入設定的電腦上，雙擊後即匯入。

備份MTPuTTY 設定
http://ttyplus.com/multi-tabbed-putty/faq.html
Does the program save the configuration in the system registry?
No, it saves the configuration in mtputty.xml file.
MTPuTTY不將設定存在系統登陸檔中，存在mtputty.xml
Where mtputty.xml resides?
The default location is %User Profile%\Application Data\TTYPlus\mtputty.xml
If MTPuTTY runs in portable mode, mtputty.xml should be located in the program folder.
mtputty.xml 位置在 C:\Users\user\AppData\Roaming\TTYPlus

Windows右下角時間改成24小時制
http://www.shijyuhaowu.com/2010/03/windows7clocksetting20100323.html
控制台 => 時鐘、語言和區域 => 更變日期、時間或數字格式 => 
簡短時間 改成 HH:mm
完整時間 改成 HH::mm::ss
如圖

備份sublime（含Package、Snippet）
直接將 C:\Program Files (x86)\Sublime Text 3 和 C:\Users\Administrator\AppData\Local\Sublime Text 3 和 C:\Users\Administrator\AppData\Roaming\Sublime Text 3 複製到新電腦相對應的位置
然後新電腦打開Sublime => Project => Open recent => Clear Items
否則在新電腦抓不到對應的 xxx.sublime-project 會lag很久
用這個方法備份的sublime可以執行、更新和安裝package

免安裝版的sublime/Data 下放了 Cache、Index、Installed Packages、Lib、Local、Packages（
內含：
Packages/User/Preferences.sublime-settings（設置）、Packages/User/Default (Windows).sublime-keymap（熱鍵）、Packages/User/Xdebug.sublime-settings（Xdebug設置）
 ）
而安裝版本則將 Installed Packages、Lib、Local、Packages 放在 C:\Users\user\AppData\Roaming\Sublime Text 3
Cache、Index 放在C:\Users\user\AppData\Local\Sublime Text 3
推薦一律使用installer安裝sublime，使用一種方法備份，避免免安裝版本sublime升級不了問題

斷網開發
只能使用面安裝版本（portable）的sublime + git版本控制
新下載packages時先commit再下載，看sublime資料夾因為下載packages多了哪些東西
然後再手動複製多的檔案回內網開發機，以安裝Laravel Blade Highlighter為例需複製的檔案是：
Data/Packages/User/Package Control.sublime-settings  // 沒複製會不能用
Data/Installed Packages/Laravel Blade Highlighter.sublime-package


嘗試解除安裝"xxx"時發生錯誤，它可能已經被解除安裝了 不能移除安裝
控制台 => 程式和功能( 解除安裝程式 ) =>出現 嘗試解除安裝"xxx"時發生錯誤，它可能已經被解除安裝了 不能移除安裝
而且 Lync 2016(商務用Skype)會閃退
解法：
Windows Update 把重要的更新裝一裝，重開

chrome備份OneTab頁籤
XMAPP 的httpd.conf, vhost.conf, php.ini（若XAMPP安裝在D槽，重灌免重裝XAMPP）
備份hosts


註：更多重灌記錄寫在evernote上（提醒我自己）

Handlebars常見問題

如何用{{if ..}} 去判斷兩運算元相不相等( == )
http://stackoverflow.com/questions/15088215/handlebars-js-if-block-helper

Handlebars.registerHelper('if_eq', function(a, b, opts) {
    if(a == b) // Or === depending on your needs
        return opts.fn(this);
    else
        return opts.inverse(this);
});

{{#if_eq this "some message"}}
    ...
{{else}}
    ...
{{/if_eq}}

編輯器常見問題

在vim中要移動到最靠近的大括號( brace(大括號), brackets, parenthesis )"{"
http://stackoverflow.com/questions/289342/eclipse-jump-to-closing-brace
Don't forget [{ and ]} to find the closest enclosing open or close brace. 
eclipse似乎沒有這個功能 => 用sublime的ctrl+m或ctrl+shift+m取代

vim列模式自動增加數字
安裝vim套件 VisIncr
http://vim.sourceforge.net/scripts/script.php?script_id=670
1. （vim 7.1以後版本可略）安裝 vimball
2. 下載 visincr.vba.gz
3. 安裝：(只安裝到該使用者的~/.vim 資料夾下)
$ vim visincr.vba.gz
:so %
:q
(在github上直接載源碼後解壓縮到家目錄.vim資料夾下應該有一樣效果(未試))
使用：
用ctrl+v進入列模式選取，然後:I （完成）， 用:help visinrc.txt 看教學
或使用純vim的功能替換
http://wjason.iteye.com/blog/341328
1. 写一行:INSERT INTO ME.SCHEDULE(..., DATETIME, ...) VALUES(..., '2009-01-01 01:00:00.0', ...)
2. Y
3. 58p
4. gg ctrl+v G
5. :'<,'>s/2009-01-01 01:\zs\d\d\ze:/\=line(".") - line("'<") + 1
下面是这条命令中每个元素的含义：

'<,'>        我们所选中的区域 (:help '<，:help '> )
s            在选中的区域中进行替换 (:help :s )
\zs          指明匹配由此开始 (:help /\zs )
\d*          查找任意位数的数字 (:help /\d )
\ze          指明匹配到此为止 (:help /\ze )
\=           指明后面是一个表达式 (:help :s\= )
line(".")    当前光标所在行的行号 (:help line() )
line("'<")   我们所选区域中第一行的行号 (:help line() ) 

eclipse中使用
With Ctrl + Shift + L you can open the "key assist", where you can find all the shortcuts.
eclipse 打開上一個關閉的分頁
http://stackoverflow.com/questions/2243561/undo-closed-tab-in-eclipse
Try Alt + ← that will go backward in history - if tab is closed it will reopen it.


看vim移動相關指令
:help motion.txt


使用notepad++內建的NppFTP(可走sftp)遠端編輯
點"外掛模組"->NppFTP-> Show NppFTPWindow
點面板右上角設定圖示->Profile settings-> 新增伺服器，填入帳號、密碼-> 即可點連線圖示

notepad++書籤
http://portable.easylife.tw/205
書籤
用戶可用滑鼠點擊書籤邊行(書籤邊行位於列數邊行右方)或使用鍵盤捷徑Ctrl+F2來標明或移除書籤。使用鍵盤捷徑F2到下一個書籤或Shift+F2到上一個書籤。如欲清除所有書籤，使用選單 尋找->清除所有書籤 。

notepad++列模式自動增加數字(內建就有)
選取列 => 編輯 => 列模式編輯(熱鍵 alt+c) => 輸入要的設定


sublime 自動縮排
http://blog.lackneets.tw/2013/11/Sublime-Reindent.html
Edit > Line > Reindent
sublime設定縮排空白或tab
https://plus.google.com/108388957557258766656/posts/1HdQRLRbUUj
1. Preferences -> Settings - Default  -> ( 設定為兩個空白縮排 )
{
...
  "translate_tabs_to_spaces": true,
  "tab_size": 2,
  "detect_indentation": false, // 加了後，新檔案才不會受複製貼上的程式碼影響縮排
...
}
如果要將檔案裡的所有 tab 字元轉成 space，或是所有 space 轉為 tab 字元，可以點一下右下角的「Tab Size: X」或「Spaces: X」，然後如圖選擇需要的選項動作。( ex. C語言為兩空白縮排，在這邊設成tab縮排 )

sublime列模式自動增加數字
解法：安裝套件Text-Pastry ( 用Package Control 直接搜尋安裝 )
使用方法：
先用列模式選取你要的範圍，ctrl+alt+n後sublime下面會出現界面，輸入2 1 (2空隔1)即可 => 由2開始每次增加1
ps. Package Control 安裝方法
1. 使用ctrl+` 進入sublime的console模式
2. 貼上下列文字 ( sublime text 3適用 )

import urllib.request,os,hashlib; h = '7183a2d3e96f11eeadd761d777e62404' + 'e330c659d4bb41d3bdf022e94cab3cd0'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

調整aptana 的php文件縮排距離
Preferences > Studio > Editors > PHP > Indentation. （設定Use Tabs和Tab size:4）

aptana自訂Snippet(代碼片段) => 如同Eclipse PDT 的PHP templates
Commands -> PHP -> Edit this bundle
aptana自動下載完後會在workspace的Project Explorer開專案 ex. PHP [master]
點選bundle.rb 編輯 ( https://wiki.appcelerator.org/display/tis/Creating+a+new+snippet )

snippet "Echo pre print_r" do |snip|
  snip.trigger = "epc"
  snip.expansion = "echo \"
\";\necho print_r(${1:method_name});\necho \"
\";"
end

snippet "echo one line" do |s|
  s.trigger = "epl"
  s.expansion = "echo \"
${1:method_name}:\".${2:method_name};"
end

缺點：在html裡面也能使用...

aptana 的jquery自動完成
https://wiki.appcelerator.org/display/tis/JavaScript+Library+Support

1. Commands > Install Bundle > jQuery
2. Right click on a project, select Properties > Project Build Path and select the checkbox for jQuery 1.6.2.

因為github上jquery自動完成只支援到jquery1.6.2 ( https://github.com/aptana/javascript-jquery.ruble )

改用eclipse(PDT 3.8) 的jquery自動完成
https://code.google.com/a/eclipselabs.org/p/jsdt-jquery/wiki/Installation
1. 安裝jsdt-jquery  - Use the following update site URL http://svn.codespot.com/a/eclipselabs.org/jsdt-jquery/updatesite
2. 在你的PHP Explore的Project上點右鍵-> Configure -> Add jQuery
3. Add a JavaScript Library Project → Properties → JavaScript → Include Path → Libraries → Add JavaScript Library...( 我選1.9才有$.on()的提示。選1.10似乎會吃到1.1，提示的不完整 )

Eclipse Standard 4.3.2（灌PDT）使用jquery自動完成
https://code.google.com/a/eclipselabs.org/p/jsdt-jquery/wiki/Installation
直接用網址 http://svn.codespot.com/a/eclipselabs.org/jsdt-jquery/updatesite 當update site更新會遇到錯誤
解法：
必須先安裝"JavaScript Development Tools"
Comment by edward.m...@gmail.com, Feb 23, 2014
1. Complete the following steps in Eclipse to get plugins for JavaScript? files:

-.Go to "Help" -> "Install New Software" -.Select the repository for your version of Eclipse. Kepler - http://download.eclipse.org/releases/kepler -.Go to "Programming Languages" -> Check the box next to "JavaScript Development Tools" -.Click "Next" -> "Next" -> Accept the Terms of the License Agreement -> "Finish" -.Wait for the software to install, then restart Eclipse -.Once Eclipse has restarted, open "Window" -> "Preferences" -> "General" -> "Editors" -> "File Associations" -> Add ".js" to the "File types:" list, if it is not already there -.In the same "File Associations" dialog, click "Add" in the "Associated editors:" section -.Select "Internal editors" -.Select "JavaScript Viewer". Click "OK" -> "OK"

2. folow steps in this page.

Now my eclipse with JSDT works perfectly. Thanks
翻譯：
1. 先用update site: http://download.eclipse.org/releases/kepler 安裝"JavaScript Development Tools"
2. 然後在"Window" -> "Preferences" -> "General" -> "Editors" -> "File Associations" 要把.js加到"File types"裡面（這步我沒做，因為打開已經設好了）
3. 在.js下方的"Associated editors:"對話框裡面新增"Internal editors"的"JavaScript Viewer" (估計是安裝 "JavaScript Development Tools" 後才有的 )
(以下照原文步驟做)
4. Use the following update site URL http://svn.codespot.com/a/eclipselabs.org/jsdt-jquery/updatesite
5. Convert you project to a JavaScript project if it is not already one Project → Configure → Convert to JavaScript Project..
6. Add a JavaScript Library Project → Properties → JavaScript → Include Path → Libraries → Add JavaScript Library... (中間jquery勾選 No conflict後，$()好像就不會運作，只有jQuery()才會運作)
7. 完成，在js, html, php檔都能正常提示（比PDT3.8安裝的強大）


ubuntu執行eclipse 4.3.2(kepler) 出現錯誤
jvm terminated exit code 13 usr bin java ...
解法：
$ uname -a #查linux版號是64位元
上網下載64-bit的eclipse

備份eclipse 3.8 PDT 的設定到 eclipse kepler 4.3.2 ( +PDT )
http://stackoverflow.com/questions/481073/eclipse-keybindings-settings => 熱鍵和各檔案的關聯(ex. ctp用php view開)都會備份到
export all your Eclipse prefs to a file.
File->Export->General->Preferences
Import has an option to import only key settings from this file.
File->Import->General->Preferences
直接在Window->Preferences->General->Keys裡面Export出來的CSV找不到地方可以Import

sublime 英文小寫轉大寫
http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/reference/keyboard_shortcuts_win.html
1. 選取你要的文字範圍
2.
Ctrl + KU => 轉大寫
Ctrl + KL =>轉小寫

sublime安裝gosublime後出現錯誤
MarGo: Missing required environment variables: GOPATH
https://github.com/DisposaBoy/GoSublime/issues/310
解法：
Preferences -> Package Settings -> GoSublimge -> Settings – User add {"env": {"GOPATH": "$HOME/go"}}
重開sublime就不會出現錯誤提示了


eclipse mars(4.5.0) 安裝 SVN team 套件
Help -> Eclipse Marketplace -> 搜尋svn -> 直接安裝
注意：
如果svn server版本是1.8，而eclipse安裝1.7的svn套件，拉下來後無法在命令行查log(svn log)
需在 Help-> Installation Details 裡面移除重裝svn 套件

css常見問題

line-height: 1的意思
http://stackoverflow.com/questions/1000398/what-is-line-height1
number:
Sets a number that will be multiplied with the current font-size to set the distance between the lines
FFN-Rei: 因為上一層有 line-height: 16px;
FFN-Rei: 繼承下來 1 = 16px
老天尊: 1是inherit?
FFN-Rei: 是 1em
FFN-Rei: 如果你寫1.5em 就會是 16px * 1.5 = 24px


IE7- div有position: absolute;且裡面元素有float: left(right); ，該div寬度會為100%
http://stackoverflow.com/questions/2799334/ie-div-with-absolute-positioning-width-goes-to-100-of-screen-when-it-has-a-floa
解法：對IE7設固定寬度。
You absolutely have to set the width of an absolutely positioned element if it contains an element floated right to get it to behave properly.

查IE屬性支援程度
http://msdn.microsoft.com/en-us/library/cc351024%28VS.85%29.aspx#positioning

content和:after(:before)屬性 =>IE7 不支援
http://www.w3school.com.cn/css/pr_gen_content.asp
http://www.w3school.com.cn/cssref/selector_after.asp
.clearfix:after { content:'';clear:both;display:block; }
請改使用
.clear { clear: both; }
<div class="clear" ></div>
，而非在外框div下clearfix屬性

display屬性=> IE7不支援table-cell方法
IE6 IE7 只有預設是 display : inline 的元素才可以設定為 display : inline-block 。 => div不行
http://www.w3school.com.cn/css/pr_class_display.asp
所以，上下置中請用position+margin做

:last-of-type =>IE9+
http://www.w3school.com.cn/cssref/selector_last-of-type.asp

IE9圓角+漸層bug (ex. http://jsfiddle.net/jancbeck/CJPPW/31/ )
http://stackoverflow.com/questions/4692686/ie9-border-radius-and-background-gradient-bleeding
解法：

HTML:

<div class="mask roundedCorners">
    <div class="roundedCorners gradient">
        Content
    </div>
</div>

CSS:

.mask
{
    overflow: hidden;
}

.roundedCorners
{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.gradient
{
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0065a4', endColorstr='#a0cf67',GradientType=0 ); /* IE6-9 */
}

在IE(7.8.9)中 top不吃%數=> 因為被display: table-cell影響到了
老天尊: 你上次說ie的table裡面不吃postion:absolute 是嗎?
Rei: 會吃 但是位置對不準

老天尊: ie7 img後面接div，中間會空白一點點... 看起來像img造成的高度
老天尊: 怎麼消除他
Rei: display: block
老天尊: 無效 = =
Rei: 在img 上面加
老天尊: 是的
Rei: 把中間的空白都拿掉
Rei: tag之間不要換行


IE9(未升10)對加载CSS数量及大小有限制
http://hi.baidu.com/teachmyself/item/832bddf597d032da521c2615
( 上限是32個 )
http://dancewithnet.com/2008/04/22/a-solution-of-limit-of-style-tags-in-ie/ (使用js去解)
雖然js解看起來可以，但實務上是不行的。當頁面一複雜的時候，仍會產生跑版問題。
解法二：整合各模板裡面的css。因為各模板獨立性高，整合後其他地方亦可能出現問題。而且此方法治標不治本，後面的人再創一個css 最後那個又沒效了。

結論：無解

表格格行換色
Alternate table row color using CSS?
http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css
CSS:
tr:nth-child(even) {
    background-color: #000000;
}
Note: No support in IE, even IE 8. =>使用jquery做

將float:left的 div置中(因為要自動設定div的寬度至最小寬度)
http://stackoverflow.com/questions/5523632/aligning-a-floatleft-div-to-center
使用 display:inline-block; 而不是float
(外層容器要設 text-align: center; )

調整FB Like box的寬度
http://fundesigner.net/fb-fluid-likebox/

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
    width: 100% !important;
}

移除IE 11 input自帶的"X"按鈕
http://stackoverflow.com/questions/14007655/remove-ie10s-clear-field-x-button-on-certain-inputs
那是個偽元素，在firefug中是觀察不到的
.someinput::-ms-clear {
    display: none;
}

cygwin使用心得

http://www.cygwin.com/
1. 下載安裝檔setup-x86_64.exe ( 我電腦是64bit )
2. 執行 Install from internet (要重裝package也是選這個)
路徑：C:\cygwin64
Local Package Directory： C:\cygwin64\Downloads
Direct Connection
選一個台灣的server。ex. ftp://ftp.ntu.edu.tw
出現Cygwin Setup，類似linux的yum 可以安裝要的package，ex. vim, screen, openssh, git

去C槽:
cd C:
檔案拉到視窗後會直接出現路徑

安裝完vim後:
$ vim .vimrc
set bg=dark
syntax on

git diff無高亮
No git color schemes under rxvt/cygwin
http://stackoverflow.com/questions/4185918/no-git-color-schemes-under-rxvt-cygwin
$ vim ~/.gitconfig
[color]
    ui = always
    status = always
    branch = always
    diff = always
    interactive = always

cygwin 的git svn dcommit出現錯誤：
Can't locate Memoize.pm ...
解法：
執行setup-x86_64.exe後更新perl，即可重新提交

安裝apt-cyg (類似apt-get)
https://github.com/transcode-open/apt-cyg
打開cygwin後輸入
$ lynx -source rawgit.com/transcode-open/apt-cyg/master/apt-cyg > apt-cyg install apt-cyg /bin
如果遇到權限不足
$ apt-cyg
-bash: /usr/bin/apt-cyg: Permission denied
則
$ chmod 777 /usr/bin/apt-cyg
使用：
$ apt-cyg install php-ctype (同使用setup-x86_64.exe GUI安裝php-ctype，cygwin如果只裝php沒裝php-ctype呼叫ctype_alnum() 會報錯 fatal error call to undefined function ctype_alnum()... )

cygwin安裝mtr
https://github.com/traviscross/mtr/issues/55#issuecomment-49270618
大意：
因為mtr使用raw sockets產生奇怪的網路封包，然而作業系統不允許一般使用者打開raw sockets(除非你是root)，在windows下提昇單一程式的權限rewolff表示他不知道，或許以administrator執行是一個選項。因setup-x86_64.exe的GUI裡面沒有mtr可以選，所以也無法安裝。
Windows要使用MTR還是另外用桌面程式測 http://winmtr.net/download-winmtr/ ，不要用cygwin測

移除cygwin 
因為git-svn出現Permission denied的問題無法修復，為了重新完整的安裝
http://problemsolv.in/how-to-remove-cygwin-permission-denied-problem/
打開cmd.exe
1. 讓cygwin資料夾及子資料夾的所有權不產生詢問
> takeown /r /d y /f cygwin
cygwin資料夾給予Everyone有Full Access
> icacls cygwin /t /grant Everyone:F
移除cygwin資料夾下所有東西
> rmdir /s /q cygwin

PHP cli連本機MySQL失敗
$ php connect_mysql.php
PHP Warning:  mysqli::connect(): (HY000/2002): No such file or directory in ...

在MySQL 連線設定時，主機不要寫 localhost，用 127.0.0.1
http://stackoverflow.com/questions/1676688/php-mysql-connection-not-working-2002-no-such-file-or-directory  PHP - MySQL connection not working: 2002 No such file or directory

screen下bash_completion不作用
沒開screen之前可以，
檢查.bashrc
[[ -f /etc/bash_completion ]] && . /etc/bash_completion
但是其實沒 /etc/bash_completion 這檔案
$ ls /etc/bash_completion
ls: cannot access '/etc/bash_completion': No such file or directory
其實在這裡
$ ls /etc/profile.d/bash_completion.sh
/etc/profile.d/bash_completion.sh
修改.bashrc
[[ -f /etc/profile.d/bash_completion.sh ]] && . /etc/profile.d/bash_completion.sh
解決


安裝完vim81後報錯
$ vim /etc/vimrc
Error detected while processing /etc/vimrc:
line   50:
E484: Can't open file /usr/share/vim/vim80/syntax/syntax.vim
Press ENTER or type command to continue
原因：找不到路徑
/usr/share/vim] $ ls
vim81
解法：
$ cp -r vim81 vim80

handlebar常見問題

http://stackoverflow.com/questions/10540176/how-to-implement-not-with-if-statement-in-ember-handlebar
how to implement not with if statement in ember handlebar?
解法：
{{#unless isValid}}
{{/unless}}

查DOM被哪js些事件綁定

http://stackoverflow.com/questions/446892/how-to-find-event-listeners-on-a-dom-node
使用chrome DOM右邊的的Event Listeners面板觀察
用jQuery榜定的事件無法觀察，用下面這方法的可以：
function abc(){ alert(1); };$j('body')[0].addEventListener('click', abc);

點click下面新增的事件裡面有：
listenerBody: "function abc(){ alert(1); }"

防止img被選擇

議題：在likebox中連點右邊按鈕後會把中間的img選起來，如何不讓他選起來

解法：
firefox要用css
-moz-user-select:none;
其他用onselectstart="return false"

用js一次解法：
Obj.style.MozUserSelect = 'none';
Obj.unselectable = 'on'; // for IE5.5 http://www.tohoho-web.com/html/attr/unselectable.htm
Obj.onselectstart = function() { return false; };
Obj.onmousedown  = function() { return false; };

http://stackoverflow.com/questions/2700000/how-to-disable-text-selection-using-jquery
$(el).attr('unselectable','on')
     .css({'-moz-user-select':'-moz-none',
           '-moz-user-select':'none',
           '-o-user-select':'none',
           '-khtml-user-select':'none', /* you could also put this in a class */
           '-webkit-user-select':'none',/* and add the CSS class here instead */
           '-ms-user-select':'none',
           'user-select':'none'
     }).bind('selectstart', function(){ return false; });

Firefox(部份，不確定什麼原因，似乎非firefox版本問題，我當時版本24，做不出來)在likebox(mask之上)按鈕顏色會異常（移動或縮放瀏覽器後更可明顯觀察）

原因：
box-shadow在作怪
http://stackoverflow.com/questions/5095253/box-shadow-in-firefox
解法：
.fubar {
    box-shadow: 10px 10px 30px #000;
    -moz-box-shadow:none !important; /* 在firefox24中-moz-box-shadow屬性無反應 */
}

@-moz-document url-prefix() {
    .fubar {
        box-shadow:none; /* 採用 */
    }
}

(js常見問題)javascript、jQuery 特定解法和函數

http://www.codebit.cn/javascript/javascript-replace.html
String.replace( ) 将所有字符首字母大写

var text = 'a journey of a thousand miles begins with single step.';
text.replace(/\b\w+\b/g, function(word) {
                           return word.substring(0,1).toUpperCase( ) +
                                  word.substring(1);
                         });
 
// 返回：A Journey Of A Thousand Miles Begins With Single Step.

http://stackoverflow.com/questions/8743026/how-to-use-in-jquery-not-and-hasclass-to-get-a-specific-element-without-a-cla
判斷某個dom有沒有該class名字
if(!$('#foo').hasClass('bar')) return;
..// do something if DOM has 'bar' className

http://www.w3school.com.cn/jquery/event_target.asp
e.target =>target 属性规定哪个 DOM 元素触发了该事件。

Cancelling previous ajax request jquery => 只顯示最後一次傳回來的內容
http://stackoverflow.com/questions/4342438/cancelling-previous-ajax-request-jquery/4342484#4342484

  
var fooXHR, fooCounter=0;
$(...).bind( 'someEvent', function(){
  // Do the Right Thing to indicate that we don't care about the request anymore
  if (fooXHR) fooXHR.abort();

  var token = ++fooCounter;
  fooXHR = $.get( ..., function(data){
    // Even aborted XHR may cause the callback to be invoked
    if (token != fooCounter) return;

    // At this point we know that we're using the data from the latest request
  });
});
  

查某個元素是否有顯示
http://stackoverflow.com/questions/8337186/jquery-isvisible-not-working-in-chrome/17489974#17489974
$("#makespan").is(":visible")

Remove all classes that begin with a certain string =>因addClass和removeClass一次會新增或刪除一個class的名字，要一次全刪除用下面這句
http://stackoverflow.com/questions/57812/remove-all-classes-that-begin-with-a-certain-string
$('#a')[0].className = $('#a')[0].className.replace(/\bbg.*?\b/g, '');

Detecting arrow key presses in JavaScript
http://stackoverflow.com/questions/5597060/detecting-arrow-key-presses-in-javascript

arrow keys are only triggered by onkeydown, not onkeypress

keycodes are:

• left = 37
• up = 38
• right = 39
• down = 40

Change by jquery css bottom & top more once
http://stackoverflow.com/questions/6498290/change-by-jquery-css-bottom-top-more-once

{ bottom: 250, top: 'auto' }
{ top: 100, bottom: 'auto' }

jQuery get mouse position within an element
http://stackoverflow.com/questions/4249648/jquery-get-mouse-position-within-an-element

$("#something").click(function(e){
   var parentOffset = $(this).parent().offset(); 
   //or $(this).offset(); if you really just want the current element's offset
   var relX = e.pageX - parentOffset.left;
   var relY = e.pageY - parentOffset.top;
});

prototype.js的ajax同步處理
http://www.wrox.com/WileyCDA/Section/Ajax-in-Prototype.id-306214.html

var oOptions = {
    method: "get",
    parameters: "name=Nicholas",
    asynchronous: false  //asynchronous =>非同步
};

http://api.jquery.com/load/
使用.load() 讓圖片完全載入後再執行callback的js

jQuery 的 live() 被 Deprecate 了
http://blog.timc.idv.tw/posts/deprecation-of-jquery-live-function/

// 舊
$('#myid').bind(event, fn);
// 新 (改名字就好)
$('#myid').on(event, fn);

// 舊
$('#not_in_dom_yet').live(event, fn)
// 新
$(document).on(event, '#not_in_dom_yet', fn);

JavaScript sort() 方法
http://www.w3school.com.cn/js/jsref_sort.asp

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "
")
document.write(arr.sort(sortNumber))

输出：

10,5,40,25,1000,1
1,5,10,25,40,1000

Firefox的'too much recursion' jQuery錯誤：(這邊非唯一解，只適用我這邊的狀況)
<div class="filter_box">
    <img src="xxx.jpg">
</div>

$('div.filter_box').live('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    $(this).children(":first").trigger('click');
});

將live改成on即解決，(儘量少用live)

傳參數到jQuery的trigger裡面
http://stackoverflow.com/questions/16401538/passing-parameters-on-jquery-trigger

$('body').trigger('this_works', [{data: [1, 2, 3]}, 'something']);

$('body').on('this_works', function (event, json, string) {
  controller.listen(event, json, string);
});

jQuery.extend的用法
http://blog.darkthread.net/post-2009-03-01-jquery-extend.aspx
以jQuery.extend(objA, objB)為例，你可以想像成objA與objB各有一些屬性(方法也會比照處理，在此只提屬性)，extend()會將objB有而objA沒有的屬性加到objA裡，如果objB裡的某個屬性，objA裡剛好也有同名的屬性，則會用objB的屬性值去覆寫objA原有的屬性。

找父元素最近有該class的元素
http://stackoverflow.com/questions/5333426/how-to-find-a-parent-with-a-known-class-in-jquery
$(this).closest('.class_name');

使用jquery複製div到另一個div
http://stackoverflow.com/questions/16068047/jquery-duplicate-div-into-another-div
$(function(){
  var $button = $('.button').clone();
  $('.package').html($button);
});

使用多種條件切開字串
http://stackoverflow.com/questions/650022/how-do-i-split-a-string-with-multiple-separators-in-javascript
>> "Hello awesome, world!".split(/[\s,]+/)   //遇到逗號(,)或空白就切開字串

只移除($.off)特定的事件
http://api.jquery.com/off/
Example: Unbind all delegated event handlers by their namespace:

var validate = function() {
  // Code to validate form entries
};
 
// Delegate events under the ".validator" namespace
$( "form" ).on( "click.validator", "button", validate );
 
$( "form" ).on( "keypress.validator", "input[type='text']", validate );
 
// Remove event handlers in the ".validator" namespace
$( "form" ).off( ".validator" );

刪除節點後面的字
http://stackoverflow.com/questions/6690445/how-to-remove-text-inside-an-element-with-jquery
HTML:
<li>
    <div>Some stuff</div>
    <a href="http://www.mysite.com/">New Item</a>
    (1 vote)
</li>
(要移除 (1 vote) )
This should work.

$("li").contents().filter(function(){ return this.nodeType != 1; }).remove();
or by specifying text nodes explicitly

$("li").contents().filter(function(){ return this.nodeType == 3; }).remove();
要加回字，用after：
$("li a").after("add text");

混合多個節點到jQuery 物件
http://stackoverflow.com/questions/1881716/merging-jquery-objects
使用 $.add

在前端排序資料套件( jQuery datatables )
http://datatables.net/download/
錯誤： TypeError: oColumn is undefined
http://stackoverflow.com/questions/12280900/typeerror-ocolumn-is-undefined-when-using-jquery-datatables-library
解法： table裡面必須使用 <thead> 和 <tbody> 標籤
錯誤： TypeError: nCell is undefined
http://stackoverflow.com/questions/12472726/datatables-ncell-is-undefined-error-with-valid-xhtml
解法： th和td的數量必須相等
修改分頁數量(預設為5)
http://stackoverflow.com/questions/12684328/rails-bootstrap-datatables
$.fn.dataTableExt.oPagination.iFullNumbersShowPages = 10;

移除特定class
http://stackoverflow.com/questions/15618005/jquery-regexp-selecting-and-removeclass

$("#foo").removeClass( function() { /* Matches even table-col-row */
     var toReturn = '',
         classes = this.className.split(' ');
     for(var i = 0; i < classes.length; i++ ) {
         if( /(Nice|Naughty|你要的class名字)/.test( classes[i] ) ) { /* Filters */
             toReturn += classes[i] +' ';
         }
     }
     return toReturn ; /* Returns all classes to be removed */
});

比較兩個object是否為同一個DOM
http://help.dottoro.com/ljlpvjmd.php
使用 isEqualNode ( IE9以上才支援， opera不支援)

小數點後二位四捨五入
http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-in-javascript?page=1&tab=votes#tab-top
Math.round(num * 100) / 100

物件轉字串
http://stackoverflow.com/questions/4162749/convert-js-object-to-json-string
var j={"name":"binchen"};
JSON.stringify(j); // '{"name":"binchen"}'

javascript 的if中有逗號(commas)
以最後一組傳回值為結果
Ex.
!!(a=2, b=3, a==b, a!==b)  // true

在submit時新增參數（非ajax）
http://stackoverflow.com/questions/2530635/jquery-add-additional-parameters-on-submit-not-ajax
var input = $("<input>").attr("type", "hidden").attr("name", "think_action").val(action);
$('#import_form').append($(input));

上傳檔案按鈕不使用file input原本樣式
http://stackoverflow.com/questions/8350927/file-upload-button-without-input-field
解法：把原本input file隱藏，然後再畫一個新按鈕去觸發事件
HTML:
<input type="file" name="somename" size="chars">
<button>Choose File</button>
CSS:
input[type='file'] {
    display: none;
}
JS:
$('button').click(function(){
    $('input').click();
});

讓第二個table寬度與第一個table前幾個寬度一樣
http://stackoverflow.com/questions/1865552/selecting-the-first-n-items-with-jquery  Selecting the first “n” items with jQuery
http://stackoverflow.com/questions/1015669/calculate-total-width-of-children-with-jquery  Calculate total width of Children with jQuery
http://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery  Total width of element (including padding and border) in jQuery
Ex.

code:

var width = 0;
$(".table1 th").slice(0,4).each(function() {
 width += $(this).outerWidth();
});
$('.table2').css('width', width);

說明：
使用 $(".table1 th").slice(0,4) 抓前四個元素，再用each跑迴圈，最後用$(this).outerWidth() 獲取每個th的寬度並加總
$(elem).outerWidth(); // Returns the width + padding + borders
$(elem).outerWidth( true ); // Returns the width + padding + borders + margins

jQuery 正規式選擇器
http://stackoverflow.com/questions/3568200/regular-expressions-in-a-jquery-selector
$('input').filter(function () { return /^[a-z]+_[1-9].*/.test(this.name); })

查該元素是父元素下的第幾個元素
http://stackoverflow.com/questions/3159372/how-determine-child-ordinal-position-need-parent-ordinalchildsome-chi
$('#parent').children().index('#some-child');

jQuery移除HTML字串中某個TAG
http://stackoverflow.com/questions/12109946/jquery-remove-tag-from-html-string
var removeElements = function(text, selector) {
    var wrapped = $("<div>" + text + "</div>");
    wrapped.find(selector).remove();
    return wrapped.html();
}
USAGE:
var removedSpanString = removeElements("<span>Some Text</span> Some other Text", "span");
// removedSpanString  = " Some other Text"