jQuery常用選擇器

2021-07-23 12:16:04 字數 3233 閱讀 8149

1.所有的函式大體分為四組:

(1)dom操作函式 (2)事件處理函式 (3)動畫函式 (4)ajax操作

2.jquery函式的特性:

(1)幾乎所有的函式都自帶迴圈功能,可以對選中的元素進行遍歷

(2)幾乎所有的函式都返回jquery物件本身,可以實現方法的鏈式呼叫

(3)jquery物件轉換為dom物件:

$('div')[0].style.color = '#f00'; //可以轉換字串 | html片段

(4)dom物件轉換為jquery物件:

$(domobj).css('color', '#f00'); //注意$()裡邊不能使用引號

3.jquery查詢元素 ——重點

jquery中查詢元素,使用函式: jquery('選擇器') 或其別名 $('選擇器')

其中的引數選擇器支援css中所有的選擇器,並進行了擴充套件。(選擇器都是對所選元素的描述語言)

(1)basic(基本選擇器)

#id .class div * s1,s2,s3

(2)hierarchy(層級選擇器)

parent > child

子元素選擇器,選擇父元素下的指定型別的直系子元素

parent  child

後代選擇器,選擇父元素下指定型別的後代元素

prev + nextsibling

相鄰兄弟選擇器,選擇元素後乙個指定型別的兄弟元素

prev ~ nextallsibling

通用兄弟選擇器,選擇某元素後的所有指定型別的兄弟元素

(3)attribute(屬性選擇器)

[屬性名]

選擇帶有指定屬性的元素

[屬性名="值"]

選擇有指定屬性和值的元素

[屬性名!="值"]

(反選)選擇指定屬性的值不為指定值的元素

[屬性名^="值"]

選擇指定屬性的值由某個單詞開頭的元素

[屬性名$="值"]

選擇指定屬性的值由某個單詞結尾的元素

[屬性名*="值"]

選擇指定屬性的值中包含某字元(段)的元素

[屬性名~="值"]

選擇指定屬性的值有某個單詞組成的元素

(4)form(表單元素選擇器)

1.   例:$(':text')選定 的元素

:text

單行文字

:radio

單選按鈕

:submit

提交按鈕

:hidden

隱藏域:password

密碼域:checkbox

核取方塊:reset

重置按鈕

:file

檔案域:image

影象域:button

按鈕2.選定具有特定屬性的表單元素

:disabled

不可用:enabled

可用的:checked

單選多選被選中的

:selected

被選中的option

(5)basic filter(基本過濾選擇器)

注意:基本過濾選擇器把選定的所有元素放在乙個大的集合中!下標從0開始分配。

:first

所有元素中指定型別的首個元素

:last

所有元素中指定型別的最後乙個元素

:odd

匹配所有索引值為奇數的元素,從 0 開始計數

:even

匹配所有索引值為奇數的元素,從 0 開始計數

:eq(i)

匹配指定索引值為i的元素

:lt(i)

匹配所有小於索引值i的元素

:gt(i)

匹配所有大於索引值i的元素

(6)child filter(子元素過濾選擇器)

:first-child

父元素下的首個子元素

:last-child

父元素下最後乙個子元素

:nth-child(2 / odd / even / 3n+1)

父元素下第n個子元素(可用於指定奇 偶)

:only-child

父元素下的唯一子元素(其沒有兄弟元素)

注意:子元素過濾選擇器把選定的元素按照所在父元素進行分組!下標從1開始分配。

(7)content filter(內容過濾選擇器)

:contains(txt)

匹配包含指定文字的元素

:has(selector)

匹配含有引數選擇器所匹配的元素的元素

:empty

匹配空元素(不包含文字或子元素)

:parent

匹配含有文字或子元素的元素

(8)visibility filter(可見性過濾選擇器)

head / meta / script / title標籤或屬性display:none都為不可見元素

opacity:0 / visibility:hidden的元素並不是不可見元素

:hidden

匹配所有不可見的元素,或者type為hidden的元素

:visible

匹配頁面中所有可見元素

jquery 常用選擇器

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

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 ...

JQuery常用選擇器

1 匹配包含有某個屬性的所有元素 div id 檢索出所有具有id屬性的div元素,用法如下 div id one click function 2 匹配具有特定屬性值的所有元素 input name newsletter 匹配name為newsletter的input元素,用法如下 input n...