jQuery中選擇器(包含例項)

2021-08-20 20:51:03 字數 2874 閱讀 2843

因為我查了一下,發現網上別人總結的確實也都不錯了,所以我下面主要是對選擇器的使用(其實主要還是為了督促自己多練習使用啦)

推薦兩個我覺得不錯的關於選擇器的總結:jquery選擇器、w3c-jquery選擇器

jquery中的選擇器,主要也就分為:基本選擇器、屬性選擇器、內容選擇器、過濾選擇器、子元素選擇器、表單元素選擇器等

基本選擇器,也是我們用的最多的,我就不再舉例了

[attribute]

$("[href]")

所有帶有 href 屬性的元素

[attribute=value]

$("[href='#']")

所有 href 屬性的值等於 "#" 的元素

[attribute!=value]

$("[href!='#']")

所有 href 屬性的值不等於 "#" 的元素

所有 href 屬性的值包含以 ".jpg" 結尾的元素

使用:html:

注意:如果裡面和外面的引號不要使用一樣的,盡量外面的使用雙引號,裡面的使用單引號

內容選擇器和視覺化選擇器的使用:

:contains(text)

$(":contains('w3school')")

包含指定字串的所有元素

:empty

$(":empty")

無子(元素)節點的所有元素

:hidden

$("p:hidden")

所有隱藏的 元素

:visible

$("table:visible")

所有可見的**

使用:

$(":contains('leo')").css('color','red')

$(':empty').remove();

$('h1:hidden').css('display','block');

$('table:visible').css('background','#eee');

基本過濾選擇器:

:first

$("p:first")

第乙個 元素

:last

$("p:last")

最後乙個 元素

:even

$("tr:even")

所有偶數 元素

:odd

$("tr:odd")

所有奇數 元素

:eq(index)

$("ul li:eq(3)")

列表中的第四個元素(index 從 0 開始)

:gt(no)

$("ul li:gt(3)")

列出 index 大於 3 的元素

:lt(no)

$("ul li:lt(3)")

列出 index 小於 3 的元素

:not(selector)

$("input:not(:empty)")

所有不為空的 input 元素

:header

$(":header")

所有標題元素

表單選擇器:這個其實就很簡單了,乙個會了,其他的都一樣

:input

$(":input")

所有 元素

:text

$(":text")

所有 type="text" 的 元素

:password

$(":password")

所有 type="password" 的 元素

:radio

$(":radio")

所有 type="radio" 的 元素

:checkbox

$(":checkbox")

所有 type="checkbox" 的 元素

:submit

$(":submit")

所有 type="submit" 的 元素

:reset

$(":reset")

所有 type="reset" 的 元素

:button

$(":button")

所有 type="button" 的 元素

:image

$(":image")

所有 type="image" 的 元素

:file

$(":file")

所有 type="file" 的 元素

:enabled

$(":enabled")

所有啟用的 input 元素

:disabled

$(":disabled")

所有禁用的 input 元素

:selected

$(":selected")

所有被選取的 input 元素

:checked

$(":checked")

所有被選中的 input 元素

$(':input').width(200);

$(':button').width(80);

$(':text').width(200);

其實選擇器本來也挺簡單,最重要的就是要多使用多練習,自然就掌握

jQuery中選擇器(常見)

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

jQuery 選擇器例項

選擇器 例項選取 所有元素 id lastname id lastname 的元素 class intro 所有 class intro 的元素 element p 所有 元素 class.class intro.demo 所有 class intro 且 class demo 的元素 first ...

jQuery中選擇器有哪些,選擇器都怎麼用?

jquery中選擇器有哪些以及使用方法?jquery的基本選擇器 jquery常用的選擇器 群組選擇器 div,span 使用逗號對選擇器進行分隔 後代選擇器 main 選擇id值為main的所有的後代元素 子代選擇器 div span 選擇div標籤的所有子代span元素 相鄰選擇器 label ...