jQuery 選擇器簡(jiǎn)介
創(chuàng)新互聯(lián)自2013年創(chuàng)立以來(lái)，先為十堰鄖陽(yáng)等服務(wù)建站，十堰鄖陽(yáng)等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢(xún)服務(wù)。為十堰鄖陽(yáng)企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
jQuery 選擇器允許對(duì) HTML 元素組或單個(gè)元素進(jìn)行操作。
jQuery 選擇器基于元素的 id、類(lèi)、類(lèi)型、屬性、屬性值等"查找"（或選擇）HTML 元素。 它基于已經(jīng)存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。
jQuery 中所有選擇器都以美元符號(hào)開(kāi)頭：$()。
1 .基本選擇器
$("#test")???????????? ?? 選擇id值為test的元素，id值是唯一的所以返回單個(gè)元素。
$("div")?????????????? ?? 選擇所有的div標(biāo)簽元素，返回div元素?cái)?shù)組
$(".myclass")????????? ?? 選擇使用myclass類(lèi)的css的所有元素
$("*")???????????????? ?? 選取所有元素。
$("#test,div,.myclass")? ??? 選取多個(gè)元素。
2.層次選擇器
$("div span") ? 選取div里的所有span元素
$("div span")?? ? 選取div元素下元素名是span的子元素
$("#one +div")?? ? 選取id為one的元素的下一個(gè)div同輩元素??? 等同于$("#one").next("div")
$("#one~div")??? ? 選取id為one的元素的元素后面的所有div同輩元素??? 等同于$("#one").nextAll("div")
$("#one").siblings("div") ?? 獲取id為one的元素的所有div同輩元素（不管前后）
$("#one").prev("div") 獲取id為one的元素的前面緊鄰的同輩div元素
所以 獲取元素范圍大小順序依次為：
$("#one").siblings("div")$("#one~div")$("#one +div")
或是
$("#one").siblings("div")$("#one").nextAll("div")$("#one").next("div")
3.基本過(guò)濾選擇器
$("div:first")?????????????? 選取所有div元素中第1個(gè)div元素
$("div:last")?????????????????? 選取所有div元素中最后一個(gè)div元素
$("input:not(.myClass)")??????? 選取class不是myClass的input元素
$("input:even")???????????????? 選取索引是偶數(shù)的input元素(索引從0開(kāi)始)
$("input:odd")????????????????? 選取索引是基數(shù)的input元素(索引從0開(kāi)始)
$("input:eq(2)")??????????????? 選取索引等于2的input元素
$("input:gt(4)")??????????????? 選取索引大于4的input元素
$("input:lt(4)")??????????????? 選取索引小于4的input元素
$(":header")??????????????????? 過(guò)濾掉所有標(biāo)題元素，例如：h1、h2、h3等
$("div:animated")?????????????? 選取正在執(zhí)行動(dòng)畫(huà)的div元素
$(":focus")???????????????????? 選取當(dāng)前獲取焦點(diǎn)的元素
4.內(nèi)容過(guò)濾選擇器
$("div:contains('Name')")?????? 選取所有div中含有'Name'文本的元素
$("div:empty")????????????????? 選取不包含子元素（包括文本元素）的div空元素
$("div:has(p)")???????????????? 選取所有含有p元素的div元素
$("div:parent")???????????????? 選取擁有子元素的（包括文本元素）div元素
5.可見(jiàn)性過(guò)濾選擇器
$("div:hidden")???????????????? 選取所有不可見(jiàn)的div元素
$("div:visible")??????????????? 選取所有可見(jiàn)的div元素
6.屬性過(guò)濾選擇器
$("div[id]")????????????? 選取所有擁有屬性id的元素
$("input[name='test']")???? 選取所有的name屬性等于'test'的input元素
$("input[name!='test']")? 選取所有的name屬性不等于'test'的input元素
$("input[name^='news']")??????? 選取所有的name屬性以'news'開(kāi)頭的input元素
$("input[name$='news']")??????? 選取所有的name屬性以'news'結(jié)尾的input元素
$("input[name*='news']")??????? 選取所有的name屬性包含'news'的input元素
$("div[title|='en']")?????????? 選取屬性title等于'en'或以'en'為前綴(該字符串后跟一個(gè)連字符'-')的div元素
$("div[title~='en']")?????????? 選取屬性title用空格分隔的值中包含字符en的div元素
$("div[id][title$='test']")???? 選取擁有屬性id,并且屬性title以'test'結(jié)束的div元素
7.子元素過(guò)濾選擇器
$("div .one:nth-child(2)")?????? 選取class為'one'的div父元素下的第2個(gè)子元素
$("div span:first-child")??????? 選取每個(gè)div中的第1個(gè)span元素
$("div span:last-child")???????? 選取每個(gè)div中的最后一個(gè)span元素
$("div button:only-child")?????? 在div中選取是唯一子元素的button元素
8.表單對(duì)象屬性過(guò)濾選擇器
$("#form1 :enabled")???????????? 選取id為'form1'的表單內(nèi)所有可用元素
$("#form2 :disabled")??????????? 選取id為'form2'的表單內(nèi)所有不可用元素
$("input :checked")????????????? 選取所有被選中的input元素
$("select option:selected")????? 選取所有的select 的子元素中被選中的元素
9.表單選擇器
$(":input")????????????????????? 選取所有input,textarea,select 和 button元素
$(":text")??????????????????? 選取所有的單行文本框
$(":password")?????????????????? 選取所有的密碼框
$(":radio")????????????????????? 選取所有單的選框
$(":checkbox")?????????????????? 選取所有的多選框
$(":submit")???????????????????? 選取所有的提交按鈕
$(":image")????????????????????? 選取所有的圖像按鈕
$(":reset")????????????????????? 選取所有的重置按鈕
$(":button")???????????????????? 選取所有的按鈕
$(":file")?????????????????????? 選取所有的上傳域
$(":hidden")???????????????????? 選取所有不可見(jiàn)元素
已經(jīng)測(cè)試#36;('#div1,#div2').attr('class','waring');
是正確的
還有一種就是多個(gè)DIV你可以給他們加一些無(wú)用的屬性比如：
div id="div1" title="haha"/divdiv id="div2" title="haha"/divdiv id="div3" title="haha"/div#36;("div [titile=haha]").attr('class','waring');
在HTML頁(yè)面引入jQuery文件
!-- 1. 引入jQuery文件 --
script src="jquery-1.11.3.js"/script
在HTML頁(yè)面定義元素
!-- 定義HTML頁(yè)面元素 --
input type="text" value="請(qǐng)輸入你的用戶(hù)名" id="username"
使用jQuery的選擇器定位元素
// 2. 使用jQuery選擇器定位HTML頁(yè)面元素
var $username = $("#username");
jQuery選擇器是jQuery庫(kù)中非常重要的部分之一。它支持網(wǎng)頁(yè)開(kāi)發(fā)者所熟知的CSS語(yǔ)法快速輕松地對(duì)頁(yè)面進(jìn)行設(shè)置。了解jQuery選擇器是打開(kāi)高效開(kāi)發(fā)jQuery之門(mén)的鑰匙。一個(gè)典型的jQuery選擇器句法形式：
$(selector).methodName();
selector是一個(gè)字符串表達(dá)示，用于識(shí)別DOM中的元素，然后使用jQuery提供的方法集合加以設(shè)置。
大多數(shù)情況下jQuery支持這樣的操作：
$(selector).method1().method2().method3();
這個(gè)實(shí)例表示隱含DOM中id=”goAway”的元素，然后為其添加一個(gè)class=”incognito”屬性。
$(’#goAway’).hide().addClass(’incognito’);
提示一下：當(dāng)選擇器表達(dá)示匹配多個(gè)元素時(shí)，可以象JavaScritp數(shù)組操作一樣，方便靈活地利用數(shù)組指針進(jìn)行選取。這是例子：
var element = $(’img’)[0];
匹配表達(dá)示的元素中，第一個(gè)元素對(duì)象將賦給變量element。
jQuery選擇器的分類(lèi)
有三種分類(lèi)：基本選擇器，位置選擇器和自定義選擇器?？梢詫⒒具x擇器理解為“發(fā)現(xiàn)型選擇器”，事實(shí)上它用于搜索DOM中的元素。位置選擇器和自定義選擇器更像是“篩選型選擇器”。
基本選擇器
這里提供了一份基本選擇器的參考實(shí)例。這些選擇器都支持CSS3語(yǔ)法準(zhǔn)標(biāo)和語(yǔ)議。
$(‘div’) 選取所有div元素。
$(‘fieldset a’) 選擇在fieldset元素內(nèi)出現(xiàn)的所有a元素。
$(‘lip’) 選取在li標(biāo)記中直接出現(xiàn)的所有p元素。
$(‘div~p’) 選取位為div標(biāo)記之后出現(xiàn)的所有p元素。
$(‘p:has(b)’) 選取p元素內(nèi)包含有b的所有元素。
$(‘div.someClass’) 選取div元素中出現(xiàn)class=”someClass”屬性的所有元素。
$(‘.someClass’) 選取出現(xiàn)class=”someClass”屬性的所有元素。
$(‘#testButton’) 選取id=”testButton”的元素。元素id屬性值在當(dāng)前DOM中是唯一的。因此我很好奇出現(xiàn)了兩個(gè)id=”testButton”的元素時(shí)它會(huì) 怎么選。實(shí)驗(yàn)證明它只會(huì)選取第一個(gè)元素。真正的開(kāi)發(fā)過(guò)程中，我們絕對(duì)不要在一個(gè)DOM中出現(xiàn)多個(gè)id相同的元素。
$(‘img[alt]’) 選取具有alt屬性的所有img元素。
$(‘a(chǎn)[href$=.pdf]’) 選取具有href屬性，而且屬性的值以.pdf結(jié)尾的所有a元素。
$(‘button[id*=test]’) 選取所有的按鈕，但按鈕的id屬性要包含”test”。
提示一下：在同一個(gè)$()結(jié)構(gòu)中可以用“,”來(lái)連接多個(gè)不同的選擇器，比如這樣：
$(’div,p’)
以下是匹配所有具有title屬性的div元素，和所有具有alt屬性的img元素：
$(’div[title],img[alt]‘)
位置選擇器
這種類(lèi)型的選擇器可以附加到任何基本選擇器上，用于進(jìn)行基于元素位置的篩選。如果缺省基本選擇器，則將被視為所有元素。
舉一些例子吧。
$(’p:first’) 選取頁(yè)面中第一個(gè)出現(xiàn)的p元素。
$(’img[src$=.png]:first’) 選取頁(yè)面中第一個(gè)出現(xiàn)src屬性值以.png結(jié)尾的img元素。
$(’button.small:last’) 選取頁(yè)面中最后一個(gè)出現(xiàn)class=”small”的按鈕元素。
$(’li:first-child’) 選取頁(yè)面中所有l(wèi)i列表的第一項(xiàng)元素。
$(’a:only-child’) 選取頁(yè)面中所有a元素，但這些元素只能位于一個(gè)父級(jí)元素內(nèi)。比如lia href=”url”An url/a/li，此時(shí)li內(nèi)的a是匹配的。
$(‘li:nth-child(2)’) 選取父級(jí)元素中第二個(gè)li元素。li也一家要位于一個(gè)父級(jí)元素內(nèi)。比如ul
li1/li
li2/li
/ul
此時(shí)li2/li是匹配的。
$(’tr:nth-child(odd)’) 選取表格中所有為奇數(shù)的行元素。
$(‘li:nth-child(3n)’) 在父級(jí)元素中有很多個(gè)li元素，但只選取隔3次出現(xiàn)的li元素。比如
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
/ul
其中l(wèi)i3/li,li6/li匹配。
$(’li:nth-child(3n+5)’) 帶有偏移量的選取。在父級(jí)元素中只選取從第5個(gè)li元素開(kāi)始每隔3次出現(xiàn)的li元素。比如
ul
li1/li
li2/li
li3/li
li4/li
li5/li
li6/li
li7/li
li8/li
/ul
其中l(wèi)i5/li,li8/li匹配。
$(‘.someClass:eq(1)’) 選取頁(yè)面中class=”someClass”的第二個(gè)元素。jQuery以0為基準(zhǔn)，因此(1)表示相當(dāng)于第2個(gè)。
$(‘.someClass:gt(1)’) 選取頁(yè)面中所有class=”someClass”的元素，除了開(kāi)頭兩個(gè)。
$(‘.someClass:lt(4)’) 只選取頁(yè)面中所有class=”someClass”元素中最先的4個(gè)元素。
自定義選擇器
jQuery提供這類(lèi)的選擇器用于在并不期望有CSS明確規(guī)定時(shí)，對(duì)元素進(jìn)行方便快捷地選取。自定義選擇器有可能會(huì)被組合起來(lái)，來(lái)看一看這些強(qiáng)大的選擇器實(shí)例。
$(’img:animated’) 選取所有剛剛經(jīng)歷完動(dòng)畫(huà)方法調(diào)用的img元素。
$(’:button:hidden’) 選取所有被hide()方法隱含的按鈕類(lèi)型元素。
$(’input[name=myRadioGroup]:radio:checked’)選取name=”myRadioGroup”的單選框內(nèi)被選中的項(xiàng)目。
$(’:text:disabled’) 選取所有被禁用的文本框元素。
$(’#xyz :header’) 選取id=”xyz”元素內(nèi)的所有h元素。
$(’option:not(:selected)’) 選取沒(méi)有被選中的所有的option元素。
$(’#myForm button:not(.someClass)’) 選取id=”myForm”的表單內(nèi)不具有class=”someClass”屬性的所有按鈕。
$(’select[name=choices] :selected’) 選取name=”choices”的select元素中所有被選中的option項(xiàng)。
$(’p:contains(coffee)’) 選取所有內(nèi)容包含有coffee的p元素。
無(wú)論是單一的或是組合，jQuery選擇器能創(chuàng)建強(qiáng)大而簡(jiǎn)便的一套方案，便于jQuery內(nèi)置的一些方法地行極富想像力的WEB開(kāi)發(fā)。
每次申明一個(gè)jQuery對(duì)象的時(shí)候，返回的是jQuery.prototype.init
對(duì)象，很多人就會(huì)不明白，init明明是jQuery.fn的方法啊，實(shí)際上這里不是方法，而是init的構(gòu)造函數(shù)，因?yàn)閖s的prototype對(duì)象可
以實(shí)現(xiàn)繼承，加上js的對(duì)象只是引用不會(huì)是拷貝，new
jQuery,new
jQuery.fn和new
jQuery.fn.init的子對(duì)象是一樣的，只是有沒(méi)有執(zhí)行到init的不同，這里就不講原因了，等下一篇再講為什么會(huì)是這樣。
當(dāng)我們使用選擇器的時(shí)候$(selector,content)，就會(huì)執(zhí)行
init(selectot,content)，我們看看inti中是怎樣執(zhí)行的：
復(fù)制代碼
代碼如下:
if
(
typeof
selector
==
"string"
)
{
//正則匹配，看是不是HTML代碼或者是#id
var
match
=
quickExpr.exec(
selector
);
//沒(méi)有作為待查找的
DOM
元素集、文檔或
jQuery
對(duì)象。
//selector是#id的形式
if
(
match
(match[1]
||
!context)
)
{
//
HANDLE:
$(html)
-
$(array)
//HTML代碼,調(diào)用clean補(bǔ)全HTML代碼
if
(
match[1]
){
selector
=
jQuery.clean(
[
match[1]
],
context
);
}
//
是:
$("#id")
else
{
//判斷id的Dom是不是加載完成
var
elem
=
document.getElementById(
match[3]
);
if
(
elem
){
if
(
elem.id
!=
match[3]
)
return
jQuery().find(
selector
);
return
jQuery(
elem
);//執(zhí)行完畢return
}
selector
=
[];
}
//非id的形式.在context中或者是全文查找
}
else{
return
jQuery(
context
).find(
selector
);
}
}
這里就說(shuō)明只有選擇器寫(xiě)成$(‘#id')的時(shí)候最快，相當(dāng)于執(zhí)行了一次
getElementById，后邊的程序就不用再執(zhí)行了。當(dāng)然往往我們需要的選擇器并不是這么簡(jiǎn)單，比如我們需要id下的CSS為className，
有這樣的寫(xiě)法$(‘#id.className')和$(‘#id').find(‘.className');這兩種寫(xiě)法的執(zhí)行結(jié)果都是一樣的，比
如div
id=”id”span
class=”className”/span/div，返回的肯定都是span
class=”className”/span，但是執(zhí)行的效率是完全不一樣的。
在分析一下上邊的代碼，如果不是$(‘#id')這樣的簡(jiǎn)單選擇器的話，都會(huì)執(zhí)行find函
數(shù)，那我們?cè)倏纯磃ind到底是做用的：
復(fù)制代碼
代碼如下:
find:
function(
selector
)
{
//在當(dāng)前的對(duì)象中查找
var
elems
=
jQuery.map(this,
function(elem){
return
jQuery.find(
selector,
elem
);
});
//下邊的代碼可以忽略，只是做一些處理
//這里應(yīng)用了js的正則對(duì)象的靜態(tài)方法test
//indexOf("..")需要了解一下xpath的語(yǔ)法,就是判斷selector中包含父節(jié)點(diǎn)的寫(xiě)法
//本意就是過(guò)濾數(shù)組的重復(fù)元素
return
this.pushStack(
/[^+]
[^+]/.test(
selector
)
||
selector.indexOf("..")
-1
?
jQuery.unique(
elems
)
:
elems
);
}
如果這樣寫(xiě)$(‘#id
.className')，就會(huì)執(zhí)行到擴(kuò)展的find(‘#id
.className',document)，因?yàn)楫?dāng)前的this是document的jQuery數(shù)組，那我們?cè)诳纯磾U(kuò)展的find他的實(shí)現(xiàn)，代碼比較
多，就不列出來(lái)，總之就是從第二個(gè)參數(shù)傳遞進(jìn)行的dom第一個(gè)子節(jié)點(diǎn)開(kāi)始找，遇見(jiàn)#比對(duì)id，遇見(jiàn).比對(duì)ClassName，還有：+-等處理。
那我們要優(yōu)化，是不是就要想辦法讓第二個(gè)參數(shù)context的范圍最小，那樣遍歷是不是就很少了？
如果我們這樣寫(xiě)$(‘#id').find(‘.className')，那程序只這樣執(zhí)行
的，第一次init的時(shí)候執(zhí)行一步getElementById，就return了，接著執(zhí)行
find(‘.className',divDocument)，divDocument就是我們第一次選擇的是div標(biāo)簽，如果document下有很
多dom對(duì)象的時(shí)候，這次只遍歷divDocument是不是少了很多次，而且在第一次選擇id的速度也要比遍歷快的多。
現(xiàn)在大家應(yīng)該是明白了吧。就是說(shuō)第一層選擇最好是ID，而是簡(jiǎn)單選擇器，目的就是定義范圍，
提高速度，這次就說(shuō)這些，選擇寫(xiě)法的優(yōu)化，其他的優(yōu)化，下次再說(shuō)。
1、基本選擇器：
#id 、element 、.class 、* 、selector1,selector2,selectorN
2、層次選擇器：
ancestor descendant 、parent child 、prev + next 、prev ~ siblings
3、基本過(guò)濾器選擇器
:first 、:last 、:not 、:even 、:odd 、:eq 、:gt 、:lt 、:header 、
:animated
4、內(nèi)容過(guò)濾器選擇器
:contains 、:empty 、:has 、:parent
5、可見(jiàn)性過(guò)濾器選擇器
:hidden 、:visible
6、屬性過(guò)濾器選擇器
[attribute] 、[attribute=value] 、[attribute!=value] 、[attribute^=value] 、[attribute$=value] 、[attribute*=value] 、[attrSel1][attrSel2][attrSelN]
7、子元素過(guò)濾器選擇器
:nth-child 、:first-child 、:last-child 、:only-child
8、表單選擇器
:input 、:text 、:password 、:radio 、:checkbox 、:submit 、:image 、:reset 、:button
、:file 、:hidden
9、表單過(guò)濾器選擇器
:enabled 、:disabled 、:checked 、:selected
其實(shí)jQuery選擇器就只有一種$()函數(shù)或jQuery()函數(shù)，$只是jQuery的縮寫(xiě)。$("")的引號(hào)中，以點(diǎn)開(kāi)頭，說(shuō)明是選擇Class。以井號(hào)開(kāi)始，說(shuō)明是選擇ID，直接寫(xiě)入標(biāo)簽，則證明是選擇指定的元素。最主要就是篩選器。比如：我有個(gè)需求，在表格中每隔一行設(shè)置一個(gè)背景色。怎么辦？就可以這樣$("tr:odd").css("background-color","#f00"); 篩選器，就是在選擇器之后加冒號(hào)。odd是選擇 選擇器中索引為奇數(shù)(也就是偶數(shù)行)。其實(shí)更多的篩選器我這也沒(méi)辦法說(shuō)清楚，你可以下載jQuery的API幫助文檔，里面的目錄中有專(zhuān)門(mén)的篩選器介紹，所有的篩選器和選擇器在里面都有介紹
重慶分公司
重慶分公司
