Jquery常用選擇器

2021-09-01 08:36:38 字數 2616 閱讀 9667

選擇器

1. 基本選擇器

#id —— 根據指定的id匹配乙個元素

element —— 根據「元素名」匹配元素

.class —— 根據指定的「類名」匹配元素

selector1,selector2,selector3... —— 組合選擇器,為並集關係

* —— 通用選擇器, 匹配所有元素

2. 層次選擇器

$('ancestor descendant') —— 匹配ancestor下的所有descendant元素, 包括子孫節點

$('parent > child') —— 匹配parent下的所有child元素, 注意child為parent的直接子節點, 即不包含子孫節點

$('prev + next') —— 匹配pre元素後的next元素

$('prev~siblings') —— 匹配prev元素後的所有siblings元素

3. 基本過濾選擇器(針對乙個集合的操作,可以把這個集合想象成arraylist)

:first —— 選擇第乙個元素, 如$('div:first'), 選擇第乙個div元素

:last —— 選擇最後乙個元素

:not(selector) —— 過濾掉所有與給定selector匹配的元素,如$('input:not(.myclass)')選取class不是myclass的input元素

:even —— 選取索引是偶數的所有元素, 索引從0開始

:odd —— 選取索引是奇數的所有元素

:eq(index)  —— 選取索引是index的元素

:gt(index) —— 選取索引大於index的所有元素

:header —— 選取所有的標題元素,如h1,h2,h3等

:animated —— 選取當前正在進行動畫的的所有元素

4. 子元素過濾器(父元素的第幾個孩子,故在使用時都會以父元素作為上下文)

:nth-child —— 選取父元素的第幾個孩子, 注意索引下標從1開始, 而:eq(index)是從0開始的

:nth-child(even) 選取父元素下索引值是偶數的子元素

:nth-child(odd) 選取父元素下索引值是奇數的子元素

:nth-child(index) 選取父元素下索引值為index的子元素

:nth-child(3n) 選取父元素下索引值是3的倍數的元素(n從0開始)

:nth-child(3n+1) 選取父元素下索引值是3n+1的元素 (n從0開始)

:first-child —— 父元素下的第乙個孩子

:last-child —— 父元素下的最後乙個孩子

:only-child —— 父元素下的唯一孩子(選中獨生子)

5. 內容過濾選擇器

:contains(text) —— 選取含有文字內容為"text"的元素

:empty —— 選取不包含子元素或文字的空元素

:has(selector) —— 選取含有選擇器所匹配的元素的元素,如$('div:has(p)')選取含有p元素的所有div元素

:parent —— 選取含有子元素或文字的元素,如$('div:parent')選取擁有子元素或文字元素的所有div元素

6. 可見性過濾選擇器

:hidden ——  選取所有不可見元素,包括hidden, display:none,visibility:hidden元素,若只想選擇input,則可用input:hidden

:visible —— 選取所有可見元素

7. 屬性過濾選擇器

[attribute] —— 選取擁有此屬性的元素

[attribute=value] —— 選取屬性值為value的元素

[attribute!=value] —— 選取屬性值不等於value的元素

[attribute^=value] —— 選取屬性值以value開頭的元素

[attribute$=value] —— 選取屬性值以vlue結尾的元素

[attribute*=value] —— 選取屬性值包含value的元素

[selector1][selector2][selector3] —— 復合屬性選擇器,交集關係, 如$("div[id][title$='test']")選取擁有屬性id,並且屬性title以"test"結尾的div元素

8. 表單物件屬性過濾器

:enabled —— 選取所有可用元素

:disabled —— 選取所有不可用元素

:checked —— 選取所有被選中的元素(單選和核取方塊)

:selected —— 選取所有被選中的select元素

9. 表單選擇器

:input —— 選取所有的input,textarea,select,button元素

:text —— 選取所有的單行文字

:password —— 選取所有的密碼框

:radio —— 選取所有的單選按鈕

:checkbox —— 選取所有的核取方塊

:submit —— 選取所有的提交按鈕

:image —— 選取所有的影象按鈕

:reset —— 選取所有的重置按鈕

:button —— 選取所有的按鈕

:file —— 選取所有的上傳檔案域

:hidden —— 選取所擁有不可見元素

jquery 常用選擇器

myelement 選擇id值等於myelement的元素,id值不能重複在文件中只能有乙個id值是myelement所以得到的是唯一的元素 div 選擇所有的div標籤元素,返回div元素陣列 myclass 選擇使用myclass類的css的所有元素 選擇文件中的所有的元素,可以運用多種的選擇方...

jQuery常用選擇器

1.所有的函式大體分為四組 1 dom操作函式 2 事件處理函式 3 動畫函式 4 ajax操作 2.jquery函式的特性 1 幾乎所有的函式都自帶迴圈功能,可以對選中的元素進行遍歷 2 幾乎所有的函式都返回jquery物件本身,可以實現方法的鏈式呼叫 3 jquery物件轉換為dom物件 div...

jquery 常用選擇器

層次選擇器 div p 選取div下的所有的p元素 div p css border 1px solid red 只選取div下的直接子元素 相鄰的元素 divp cs s b orde r 1pxs olid red 與 div nextall p 等價 表示div後面的 所有p兄弟元素 div ...