關於JQuery選擇器的型別

2021-09-20 04:39:23 字數 2194 閱讀 3972

jquery選擇器大概分為四大類:基本選擇器,層次選擇器,過濾選擇器,表單選擇器;

一:基本選擇器

基本選擇器一般包括id,元素名,類名,以及顯示頁面所有元素。前面三個都好理解,顯示所有元素用$("*")即可,需要說明的一點,可以合併匹配元素,如

$("div ,span")表示選擇div 和span 元素。

二:層次選擇器

dom元素間的主要層次關係包括後代、父子、相鄰、兄弟關係

例子: $("div span") 匹配div下面的所有span元素,

$("div>span")匹配div的子元素span,

$("div").next() 匹配div相鄰的元素,也可以用$("div+next")表示,

$("div").nextall()匹配div之後的所有兄弟元素,也可以用$("div~siblingd)表示,需要說明的是,$("div").siblings("div")獲取所有的相鄰div元素。

三:過濾選擇器

過濾選擇器根據過濾規則進行元素的匹配,書寫時都以冒號(:)開頭。

例子:基本過濾器:$("li:first") 匹配第乙個li元素,

$("li:last")  匹配最後乙個li元素,

$("li:not(.notclass)") 匹配除了類為notclass的所有li元素,

$('li:even")匹配所有索引值為偶數的li元素,

$('li:odd")匹配所有索引值為奇數的li元素,

$('li:eq(1)")匹配指定索引值得li元素,從0開始計數,

$('li:gt(1)")匹配所有大於指定索引值的li元素,從0開始計數,

$('li:lt(1)")匹配所有小於指定索引值的li元素,從0開始計數,

內容過濾器: $('div:contains('a')")匹配包含指定文字的div元素,區分大小寫

$('div:empty")匹配不包含元素或者文字的div元素,

$('div:has(span)")匹配包含有span元素的div元素,

$('div:parent")匹配含有子元素或者文字的div元素,

可見性過濾器: $("div:hidden")匹配所有隱藏的div元素,包括display=none,visibility=hidden,type=hidden,

$("div:visible")匹配所有顯示的div元素,

屬性過濾器:屬性過濾器包括''

$("div[title='a']")匹配title屬性等於a的div元素,

$("div[title!='a']")匹配title屬性不等於a的div元素,

$("div[title^='a']")匹配title屬性為a開始的div元素,

$("div[title$='a']")匹配title屬性為a結束的div元素,

$("div[title*='a']")匹配title屬性包含有a的div元素,

$("div[title='a'][name='b']")匹配title屬性為a,同時name屬性為b的div元素,

子元素過濾器:$("li:nth-child(4)")匹配li元素下的第四個子元素,

$("li:first-child")匹配li元素下的第乙個子元素,

$("li:last-child")匹配li元素下的最後乙個子元素,

$("li:only-child")匹配只有乙個子元素的li元素,

表單物件屬性過濾選擇器:$("input:enabled")匹配表單中所有屬性可用的input元素,

$("input:disabled")匹配表單中所有屬性不可用的input元素,

$("input:checked")匹配表單中所有被選中的input元素,

$("option:selected")匹配表單中所有被選中的option元素

四:表單選擇器

使用表單選擇器,可以更加方便的、高效的使用表單,基本都是通過type型別確定

:input  獲取所有input、 textarea 、select元素,

:text    獲取所有單行文字框,

:password 獲取所有密碼框,

:radio 獲取所有單選按鈕,

:checkbox 獲取所有核取方塊,

:submit 獲取所有的提交按鈕,

:image 獲取所有影象域,

:reset 獲取所有重置按鈕,

:button 獲取所有按鈕,

:file 獲取所有檔案域

jQuery選擇器型別

jquery選擇器應該是學習jquery的最基本的知識了,下面介紹一下各個型別的選擇器的怎麼寫。1 基本選擇器 這是最常用的選擇器 id 根基給定的id匹配乙個元素 class 根據類名匹配元素 element 直接寫出標籤名,根據給定的元素名匹配元素 萬用字元 selector1,selector...

關於JQuery的選擇器

1.id 根據給定的id來匹配元素 如果選擇器包含特殊字元,可以用兩個斜槓表示轉義 比如 查詢id為 mydiv 的元素 mydiv 這樣寫就可以查詢到所有id為 mydiv 的元素了。2.element 根據元素名來匹配所有元素 比如 查詢所有div元素就可以這樣寫 div 3.根據給定的類來匹配...

元素型別jQuery選擇器

在本篇文章中,我們主要介紹元素型別的內容,自我感覺有個不錯的建議和大家分享下 基本選擇器 次層選擇器 第一層景致 第二層第三層 表單選擇器 簡略濾過選擇器 大家講演不要念稿,請說普通話 內容濾過選擇器 性屬濾過選擇器 第一層 第二層第三層 第四層 子元素濾過選擇器 選擇器綜合訓練 導航條 掛起 簡化...