jQuery常見選擇器

2021-10-14 06:36:17 字數 2890 閱讀 1655

$("#id") //id選擇器

$(「div」) //元素選擇器

$(".classname") //類選擇器

$(".classname,.classname1,#id1") //組合選擇器

$("#id>.classname 「) //子元素選擇器

$(」#id .classname 「) //後代元素選擇器

$(」#id + .classname 「) //緊鄰下乙個元素選擇器

$(」#id ~ .classname ") //兄弟元素選擇器

find(exp) 			返回匹配給定選擇器的後代元素 			功能跟 ancestor descendant 一樣

children(exp) 返回匹配給定選擇器的子元素 功能跟 parent>child 一樣

next() 返回當前元素的下乙個兄弟元素 功能跟 prev + next 功能一樣

nextall() 返回當前元素後面所有的兄弟元素 功能跟 prev ~ siblings 功能一樣

nextuntil() 返回當前元素到指定匹配的元素為止的後面元素

parent() 返回父元素

prev(exp) 返回當前元素的上乙個兄弟元素

prevall() 返回當前元素前面所有的兄弟元素

prevuntil(exp) 返回當前元素到指定匹配的元素為止的前面元素

3.1位置過濾選擇器$(「li:first」) //第乙個li

$(「li:last」) //最後乙個li

$(「li:even」) //挑選下標為偶數的li

$(「li:odd」) //挑選下標為奇數的li

$(「li:eq(4)」) //下標等於 4 的li(第五個 li 元素)

$(「li:gt(2)」) //下標大於 2 的li

$(「li:lt(2)」) //下標小於 2 的li

$(「li:not(#runoob)」) //挑選除 id=「runoob」 以外的所有li

eq() 				獲取給定索引的元素 			功能跟 :eq() 一樣

first() 獲取第乙個元素 功能跟 :first 一樣

last() 獲取最後乙個元素 功能跟 :last 一樣

has(exp) 返回包含有匹配選擇器的元素的元素 功能跟 :has 一樣

not(exp) 刪除匹配選擇器的元素 功能跟 :not 一樣

3.2內容過濾選擇器$(「div:contains(『runob』)」) // 包含 runob文字的元素

$(「td:empty」) //不包含子元素或者文字的空元素

$(「div:has(selector)」) //含有選擇器所匹配的元素

$(「td:parent」) //含有子元素或者文字的元素

siblings(exp) 		返回所有兄弟元素

add() 把 add 匹配的選擇器的元素新增到當前 jquery 物件中

filter(exp) 留下匹配的元素

is(exp) 判斷是否匹配給定的選擇器,只要有乙個匹配就返回,true

3.3可見性過濾選擇器$(「li:hidden」) //匹配所有不可見元素,或type為hidden的元素

$(「li:visible」) //匹配所有可見元素

3.4屬性過濾選擇器

$(「div[id]」) //所有含有 id 屬性的 div 元素

$(「div[id=『123』]」) // id屬性值為123的div 元素

$(「div[id!=『123』]」) // id屬性值不等於123的div 元素

$(「div[id^=『qq』]」) // id屬性值以qq開頭的div 元素

( "d

iv[i

d("div[id

("div[

id=『zz』]") // id屬性值以zz結尾的div 元素

$(「div[id*=『bb』]」) // id屬性值包含bb的div 元素

( "i

nput

[id]

[nam

e("input[id][name

("inpu

t[id

][na

me=『man』]") //多屬性選過濾,同時滿足兩個屬性的條件的元素

3.5狀態過濾選擇器

$(「input:enabled」) // 匹配可用的 input

$(「input:disabled」) // 匹配不可用的 input

$(「input:checked」) // 匹配選中的 input

$(「option:selected」) // 匹配選中的 option

$(":input") //匹配所有 input, textarea, select 和 button 元素

$(":text") //所有的單行文字框

$(":password") //所有密碼框

$(":radio") //所有單選按鈕

$(":checkbox") //所有核取方塊

$(":submit") //所有提交按鈕

$(":reset") //所有重置按鈕

$(":button") //所有button按鈕

$(":file") //所有檔案域

jQuery常見選擇器

以下內容都是我讀 鋒利的jquery 的筆記,記錄下來,沒事多看看。id為one,class為one的div class為mini id為two,class為one,title為test的div class為mini,title為other class為mini,title為test class為m...

jquery 常見選擇器

1 一切的核心,可以跟4種引數 expression 比如 id class 等,返回jquery物件,或者jquery物件的集合 html 比如 hello world 返回jquery物件,或者jquery物件的集合 element 比如 document.body 返回jquery物件,或者j...

jQuery中選擇器(常見)

null zgx 2018 01 17 16 49 22 39329 收藏 10 分類專欄 jquery 文章標籤 jquert 前端一 基本選擇器 基本選擇器是jquery中最常用也是最簡單的選擇器,它通過元素的id class和標籤名等來查詢dom元素。1 id選擇器 id 描述 根據給定的id...