kinanson的技術回憶

前言

想不到風水輪流轉，從2014年開始就不太有大量碰jquery的經驗了，早期寫jquery當專案一大其實維護的挺痛苦的，之後看到了angularjs眼睛為之一亮，馬上去使用看看，然後就回不來沒有framework的前端世界了，不過因為筆者現在接觸的專案有大量的jquery，雖然目標是漸漸的把整個網站翻成vue的版本，有新需求一定是以vue下去做，但是新舊交替的同時，如果看不懂或搞不定jquery，又如何能痴心妄想的翻成vue呢?偏偏筆者在2013年的時候對jquery也只是中等程度而已，現在都只剩一些初階用法還記得而已，那不如下定決心來個溫故知新的系列吧，反正jquery應該要死都很困難，見面的機率太大了，做個筆記幫助一下自己，如果也能幫助到更多讀者就更好了。

這系列會比較偏向於cheat sheet，所以大部份就是說明而已，而底下的使用列表，如果有連結的話則是直接連到筆者的codepen或jquery的官網，以便可以直接操作而不是使用腦補的方式，如果沒有連結的話可能就是筆者覺得太簡單了，一看就知道的情境就沒補了。

使用列表

注意一下有()的代表可以帶入參數，比如eq(int)，int則是數字，string就是字串，那attribute就是<input type>的這個type的意思

1. *(選擇全部)
2. .class
3. element
4. #id
5. select1,select2(同時選擇多個)
6. selector>child-子元素(table>tr)
7. ancestor descendant-同時符合兩個甚至三個元素才成立(form input or form field input)
8. prev + next-下個元素
9. prev ~ siblings-所有符合的兄弟元素
10. :animated-有套上動畫的
11. :eq(int)-就是equal的意思，函數可以帶入td:eq(0)代表選中第一個td
12. :even-偶數的意思，td:even代表選中所有單數的td
13. :first
14. :gt(int)-大於的意思，td:gt(1)選中所有大於1的td
15. :header-h1系列標籤裡面的東西
16. :lang(string)-有帶lang的標籤
17. :last
18. :lt(int)-小於，td:lt(10)選中所有小於10的td
19. :not(:attribute)-符合not條件的
20. :odd-單數的意思
21. :root-document的意思
22. :target-取得點中的tag是什麼
23. :contains(string)-選中包含相關字的元素
24. :empty-選中每值的tag
25. :has(html tag)
26. :parent-所有同層底下有內容的
27. :hidden-選中所有input為hidden的
28. :visible-選中所有顯示的元素(div:visible)
29. [name|="value"]-attribute必須要全部字串符合或者包含-的擇其一
30. [name*=”value”]-類似like的方式
31. [name~=”value”]-單字要全符合或必須是有空白而獨立的單字
32. [name$=”value”]-單字結尾有符合的
33. [name=”value”]-字串全部符合
34. [name!=”value”]-也就是不等於的意思
35. [name^=”value”]-字串開頭符合
36. [name]-比如[id]就會找到有定義id此attribute的都符合
37. [name=”value”][name2=”value2″]-比對兩個attribute甚至更多個
38. :first-child-選中第一個子元素
39. :first-of-type-選中第一個元素，如果第一個不是也會往下找到為止
40. :last-child
41. :last-of-type
42. :nth-child(int)-帶入參數選中第幾個子元素
43. :nth-last-child(int)-從後面算過來
44. :nth-last-of-type(int)-同上，但是找到為止
45. :nth-of-type(int)-同上，從前面算過來找到為止
46. :only-child-唯一子元素
47. :only-of-type(int)-找到唯一一個，找到為止
48. :button-找到全部button控制項
49. :checkbox
50. :checked-找到checkbox or radio button checked的
51. :disabled
52. :enabled-也就是找出所有沒有disabled的
53. :focus
54. :file
55. :image
56. :input
57. :password
58. :radio
59. :reset
60. :selected
61. :submit
62. :text