jQuery選擇器的優化選擇

2022-09-01 02:15:06 字數 3867 閱讀 4408

1.1 屬性選擇器

var $div=$("[id]"); 選中擁有該屬性的元素

var $div=$("[id=div]");  選中該屬性值為div的元素

var $div=$("[id!=div]"); 選中該屬性值不為div的元素  (html body 等節點也會被選中)

var $div=$("[id^=div]"); 選中該屬性值以div開頭的元素

var $div=$("[id$=div]"); 選中該屬性值以div結尾的元素

var $div=$("[id*=div]");選中該屬性值中含有div的元素

2.1 過濾選擇器

:first 選取第乙個元素

var $div=$("#div:first")     / $("#div div:first")

:last 選取最後乙個元素

var $div=$("#div":last)     /$("#div div:last")

:not(selector)除去所有與給定選擇器匹配的元素

var $div=$("#div div:not(div)")

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

var $div=$("#div div:even")

:odd選取索引是從奇數的所有元素(從0開始)

var $div=$("#div div:odd")

:eq(index)選取索引是從index的元素(從0開始)

var $div=$("#div div:eq(6)") 如果標籤中有巢狀其他div標籤,則這些標籤也會被計算

:gt(index)選取索引大於index的元素(從0開始)

var $div=$("#div div:gt(6)") 如上

:lt(index)選取索引小雨index的元素(從0開始)

var $div=$("#div div:lt(6)")如上

:header選取所有的標題元素  (h1~h6)

var $div=$("#div *:header")

:focus選取當前獲取焦點的元素

var $div=$("input:focus")

2.2子元素選擇器

:nth-child(index)選取每個父級元素下的下標為index的元素(index從1計算)

:nth-child(even)選取每個父級元素下的索引是偶數的元素

:nth-child(odd)選取每個父級元素下的索引是奇數的元素

:nth-child(xn)選取每隔父級元素下的索引是x的n倍數的元素 

如:nth-child(3n)   n從1開始計算

:nth-child(3n+1)  n從0開始計算

2.3 內容選擇器

:contents(text)選取文字中包含text的元素

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

:has(selector)選取包含有選擇器匹配的元素

:parent選取包含子元素或文字的元素

2.4 可見性選擇器

:hidden 選取所有不可見的元素。

\\("input:hidden")表示所有隱藏的input元素

:visible選取所有可見的元素

2.5 表單選擇器

:input 選取表單中所有的元素

:text 選取表單中所有的單行文字框

:password 選取表單中所有的密碼框

:radio 選取表單中所有的單選框

:checkbox 選取表單中所有的核取方塊

:submit 選取表單中所有的提交按鈕

:image 選取表單中所有的按鈕

:reset 選取表單中所有的重置按鈕

:button 選取表單中所有的按鈕

:file 選取表單中所有的上傳域

:hidden 選取表單中的不可見元素

(type值為hidden的元素)

1.1 屬性選擇器

var $div=$("[id]"); 選中擁有該屬性的元素

var $div=$("[id=div]");  選中該屬性值為div的元素

var $div=$("[id!=div]"); 選中該屬性值不為div的元素  (html body 等節點也會被選中)

var $div=$("[id^=div]"); 選中該屬性值以div開頭的元素

var $div=$("[id$=div]"); 選中該屬性值以div結尾的元素

var $div=$("[id*=div]");選中該屬性值中含有div的元素

2.1 過濾選擇器

:first 選取第乙個元素

var $div=$("#div:first")     / $("#div div:first")

:last 選取最後乙個元素

var $div=$("#div":last)     /$("#div div:last")

:not(selector)除去所有與給定選擇器匹配的元素

var $div=$("#div div:not(div)")

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

var $div=$("#div div:even")

:odd選取索引是從奇數的所有元素(從0開始)

var $div=$("#div div:odd")

:eq(index)選取索引是從index的元素(從0開始)

var $div=$("#div div:eq(6)") 如果標籤中有巢狀其他div標籤,則這些標籤也會被計算

:gt(index)選取索引大於index的元素(從0開始)

var $div=$("#div div:gt(6)") 如上

:lt(index)選取索引小雨index的元素(從0開始)

var $div=$("#div div:lt(6)")如上

:header選取所有的標題元素  (h1~h6)

var $div=$("#div *:header")

:focus選取當前獲取焦點的元素

var $div=$("input:focus")

2.2子元素選擇器

:nth-child(index)選取每個父級元素下的下標為index的元素(index從1計算)

:nth-child(even)選取每個父級元素下的索引是偶數的元素

:nth-child(odd)選取每個父級元素下的索引是奇數的元素

:nth-child(xn)選取每隔父級元素下的索引是x的n倍數的元素 

如:nth-child(3n)   n從1開始計算

:nth-child(3n+1)  n從0開始計算

2.3 內容選擇器

:contents(text)選取文字中包含text的元素

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

:has(selector)選取包含有選擇器匹配的元素

:parent選取包含子元素或文字的元素

2.4 可見性選擇器

:hidden 選取所有不可見的元素。

\\("input:hidden")表示所有隱藏的input元素

:visible選取所有可見的元素

2.5 表單選擇器

:input 選取表單中所有的元素

:text 選取表單中所有的單行文字框

:password 選取表單中所有的密碼框

:radio 選取表單中所有的單選框

:checkbox 選取表單中所有的核取方塊

:submit 選取表單中所有的提交按鈕

:image 選取表單中所有的按鈕

:reset 選取表單中所有的重置按鈕

:button 選取表單中所有的按鈕

:file 選取表單中所有的上傳域

:hidden 選取表單中的不可見元素

(type值為hidden的元素)

優化jQuery選擇器

選擇優化比以前更加重要,因為越來越多的瀏覽器實現了queryselectorall 並承擔了將jquery選擇器轉移到瀏覽器的責任。記住這些小技巧可以讓你輕鬆突破學習選擇器時的瓶頸。如果可能的話,避免使用jquery擴充套件選擇器。這些擴充套件無法在效能讓原生的queryselectorall do...

JQuery選擇器 選擇器簡介

在開始學習jquery選擇器之前,有必要了解一下css 層疊樣式表 技術。css是一項出色的技術,它使得網頁的結構和表現樣式完全分離。利用css選擇器能夠輕鬆的對某個元素新增樣式而不改變html結構,只需通過新增不同的css規則,就可以得到各種不同樣式的網頁。常用的css選擇器分類如下表 選擇器語法...

Jquery選擇器 基本選擇器

jquery作為我們常用前端工具之一,實際專案中常用的的選擇器有id選擇器 id 元素選擇器 element 樣式選擇器 class 概述 根據給定的id匹配乙個元素。使用任何的元字元 如 作為名稱的文字部分,它必須被兩個反斜槓轉義 引數 id,用於搜尋的,通過元素的 id 屬性中給定的值。示例 查...