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 屬性中給定的值。示例 查...