選擇器的一些筆記,還有整理成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的意思
- *(選擇全部)
- .class
- element
- #id
- select1,select2(同時選擇多個)
- selector>child-子元素(table>tr)
- ancestor descendant-同時符合兩個甚至三個元素才成立(form input or form field input)
- prev + next-下個元素
- prev ~ siblings-所有符合的兄弟元素
- :animated-有套上動畫的
- :eq(int)-就是equal的意思,函數可以帶入td:eq(0)代表選中第一個td
- :even-偶數的意思,td:even代表選中所有單數的td
- :first
- :gt(int)-大於的意思,td:gt(1)選中所有大於1的td
- :header-h1系列標籤裡面的東西
- :lang(string)-有帶lang的標籤
- :last
- :lt(int)-小於,td:lt(10)選中所有小於10的td
- :not(:attribute)-符合not條件的
- :odd-單數的意思
- :root-document的意思
- :target-取得點中的tag是什麼
- :contains(string)-選中包含相關字的元素
- :empty-選中每值的tag
- :has(html tag)
- :parent-所有同層底下有內容的
- :hidden-選中所有input為hidden的
- :visible-選中所有顯示的元素(div:visible)
- [name|="value"]-attribute必須要全部字串符合或者包含-的擇其一
- [name*=”value”]-類似like的方式
- [name~=”value”]-單字要全符合或必須是有空白而獨立的單字
- [name$=”value”]-單字結尾有符合的
- [name=”value”]-字串全部符合
- [name!=”value”]-也就是不等於的意思
- [name^=”value”]-字串開頭符合
- [name]-比如[id]就會找到有定義id此attribute的都符合
- [name=”value”][name2=”value2″]-比對兩個attribute甚至更多個
- :first-child-選中第一個子元素
- :first-of-type-選中第一個元素,如果第一個不是也會往下找到為止
- :last-child
- :last-of-type
- :nth-child(int)-帶入參數選中第幾個子元素
- :nth-last-child(int)-從後面算過來
- :nth-last-of-type(int)-同上,但是找到為止
- :nth-of-type(int)-同上,從前面算過來找到為止
- :only-child-唯一子元素
- :only-of-type(int)-找到唯一一個,找到為止
- :button-找到全部button控制項
- :checkbox
- :checked-找到checkbox or radio button checked的
- :disabled
- :enabled-也就是找出所有沒有disabled的
- :focus
- :file
- :image
- :input
- :password
- :radio
- :reset
- :selected
- :submit
- :text