css和jquery選擇器

2021-10-06 21:43:46 字數 2575 閱讀 5215

基本

id選擇器(#):

類選擇器(.):

萬用字元(*):

元素選擇器(element)

並集選擇器(,):#div1,#div2

交集選擇器(無):#div1#div2

層級後代(空格):所有後代元素

子代(>):所有子元素

相鄰的下乙個兄弟元素(+):ul+div(ul相鄰的下乙個元素且為div)

後面的所有兄弟元素(~):ul~div(ul後面的所有兄弟元素且為div)

篩選:first:獲取第乙個元素

:last:獲取最後乙個元素

:not(selector):

:even:index為偶數(從0開始)

:odd:index為奇數(從0開始)

:eq(index):等於index(從0開始)

:gt(index):大於index(從0開始)

:lt(index):小於index(從0開始)

:header:匹配h1,h2,h3之類的標題元素

:animated:在、匹配正在執行動畫效果的元素

:focus:匹配獲取焦點的元素

:root:選擇文件的根元素

:target

:lang

內容:empty:不包含子元素或者文字

:parent:含有子元素或者文字

:has(selector):包含選擇器匹配元素的

:contains(text):包含text文字的

可見性:visible

:hidden

屬性[attr]:包含給定屬性

[attr=val]:attr等於***的

[attr!=val]:attr不等於***的

[attr*=val]:attr包含***的

[attr^=val]:attr以***開始的

[attr$=val]:attr以***結束的

[attrsel1][attrsel2][attrseln]:多個屬性選擇器同時滿足。[name=『lin』][type=『text』][value*=『***』]

子元素:first-child

:last-child

:nth-child

:nth-last-child

:only-child

:first-of-type

:last-of-type

:nth-of-type

:nth-last-of-type

:only-of-type

表單:input:匹配所有 input, textarea, select 和 button 元素

:radio:匹配所有單選按鈕。

:checkbox:匹配所有核取方塊。

:file:匹配所有檔案域。

:text:匹配所有的單行文字框。

:password:匹配所有密碼框。

:image:匹配所有影象域。

:button:匹配所有按鈕。

:submit:匹配所有提交按鈕,理論上只匹配 type=「submit」 的input或者button,但是現在的很多瀏覽器,button元素預設的type即為submit,所以很多情況下,不設定type的button也會成為篩選結果。

:reset:匹配所有重置按鈕。

表單物件屬性

:enabled:匹配所有可用元素

:disabled:匹配所有不可用元素

:selected:select中的option中被選中的

:checked:(核取方塊、單選框等,select中的option)中被選中的

混淆$.escapeselector(selector):這個方法通常被用在類選擇器或者id選擇器中包含一些css特殊字元的時候,這個方法基本上與css中css.escape()方法類似,唯一的區別是jquery中的這個方法支援所有瀏覽器。

span class=".box"

$( 「div」 ).find( 「.」 + $.escapeselector( 「.box」 ) );

# . * element , 無

空格 > + ~

[attr] [attr=val] [attr!=val] [attr^=val] [attr$=val] [attr~=val] [attr*=val]

:link :visited :hover :active :focus

:first-line :first-letter :before :after :root :empty :target :not

:first-child :last-child :only-child :nth-child :nth-last-child

:first-of-type :last-of-type :only-of-type :nth-of-type :nth-last-of-type

:enabled :disabled :checked ::selection 被使用者選中或處於高亮狀態的部分

:in-range :out-of-range :read-write :read-only :required

:optional 可選的輸入元素 :valid 輸入值為合法的元素 :invalid 輸入值為非法

jquery選擇器和css選擇器

今天開發中碰到乙個問題。class maindiv class mydiv name id div class mydiv name id div class mydiv name id div class mydiv name id div div 是這樣,我獲取class mydiv 下面的某乙...

CSS和jQuery選擇器

css選擇器主要包括 標籤選擇器,id選擇器,類選擇器,臨近選擇器,後代選擇器,子 選擇器,屬性選擇器,群組選擇器,通配選擇器,偽類選擇器 jquery選擇器主要包括 基本選擇器,層次選擇器,過濾選擇器,表單選擇器 1基本選擇器,例如 id class div div,span,p.myclass ...

JQuery選擇器之CSS選擇器

語法描述 選擇所有元素 選擇特定型別的元素 選擇具有特定class的元素 選擇具有特定class的某類元素 id 選擇具有特定id屬性值的元素 語法描述 attr 選取定義了attr屬性的元素,即使這個屬性值為空 attr val 選擇attr屬性值等於字串val的元素 attr val 選擇att...