[jquery]選擇器-Selector(重溫jquery系列1)

選擇器的一些筆記,還有整理成codepen可以線上測試

前言

想不到風水輪流轉,從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