前言:我們使用jQuery時(shí)，很常用的套路是兩步 第一步：選取元素 第二步：對(duì)選中的元素執(zhí)行需要的操作 這一章我們重點(diǎn)研究第一步，如何使用jQuery選取元素以及對(duì)選取的結(jié)果進(jìn)行各種篩選以滿足我們的需求。 一、jQuery中的選擇器 1、選擇器 什么是選擇器？怎么用 選擇器就是我們?cè)谑褂肅SS的時(shí)候那些用于選擇元素用的寫在{}之前的部分！ 在jQuery中要選擇元素，你只需要把選擇器以字符
我們使用jQuery時(shí)，很常用的套路是“兩步”
第一步：選取元素
第二步：對(duì)選中的元素執(zhí)行需要的操作
這一章我們重點(diǎn)研究第一步，如何使用jQuery選取元素以及對(duì)選取的結(jié)果進(jìn)行“各種篩選”以滿足我們的需求。
一、jQuery中的選擇器
1、選擇器
什么是選擇器？怎么用
選擇器就是我們?cè)谑褂肅SS的時(shí)候那些用于“選擇”元素用的寫在{}之前的部分！
在jQuery中要選擇元素，你只需要把選擇器以字符串形式傳遞給$函數(shù)即可，返回的結(jié)果是一個(gè)jQuery對(duì)象！
jQuery支持的選擇器相當(dāng)強(qiáng)大，我們?cè)贑SS里面使用的選擇器，在jQuery里面都可以使用，為了滿足更復(fù)雜的需求jQuery還擴(kuò)充了
一些選擇器，下面我們來(lái)系統(tǒng)的學(xué)習(xí)一下jQuery中的選擇器！
1）核心選擇器（應(yīng)用最廣泛的選擇器）
* 選擇所有元素
元素 選擇特定類型的元素
.類名 選擇具有特定class的元素
元素.類名 選擇具有特定class的某類元素
#id名 選擇具有特定id屬性值的元素
2）屬性選擇器（根據(jù)元素的屬性來(lái)選擇元素）
[attr] 選取定義了attr屬性的元素，即使這個(gè)屬性沒(méi)有值
[attr="val"] 選取attr屬性值等于字符串val的元素
[attr^="val"] 選取attr屬性值以字符串val開(kāi)頭的元素
[attr$="val"] 選取attr屬性值以字符串val結(jié)尾的元素
[attr*="val"] 選取attr屬性值包含字符串val的元素
[attr~="val"] 選取attr屬性其中一個(gè)值是字符串val的元素
[attr|="val"] 選取attr屬性值等于字符串val，或?qū)傩灾禐檫B字符分隔的值列表且第一個(gè)值是字符串val的元素
[selector1][selector2][selectorN] 復(fù)合屬性選擇器，需要同時(shí)滿足多個(gè)條件時(shí)使用
屬性選擇器可以配合其他選擇器使用！
3）關(guān)系選擇器
<selector1> <selector2> 在給定的祖先元素下匹配所有的后代元素
<selector1> > <selector2> 在給定的父元素下匹配所有的子元素
<selector1> + <selector2> 匹配所有緊接在 <selector1> 元素后的 <selector2>
<selector1> ~ <selector2> 匹配 所有在<selector1> 元素之后的所有同輩 <selector2> 元素
4）偽元素和偽類選擇器
:checked 用于表單，匹配所有被選中元素(復(fù)選框、單選框等，不包括select中的option)
:disabled 用于表單，匹配所有不可用元素
:enabled 用于表單，匹配所有可用元素
:focus 主要用于表單，選取得到焦點(diǎn)的元素
:required 用于表單，選取具有required屬性的元素
:optional 用于表單，選取缺少required屬性的元素
:empty 匹配所有既不包含子元素也不包含文本的空元素
:first-child 選取第一個(gè)子元素
:last-child 選取最后一個(gè)子元素
:nth-child(n) 選取元素的第n個(gè)子元素(從1開(kāi)始計(jì)數(shù))
n可為even或odd
:nth-last-child(n) 選取元素的倒數(shù)第n個(gè)子元素
:nth-of-type(n) 選擇同屬于一個(gè)父元素之下，并且標(biāo)簽名相同的元素中的第n個(gè)(注：從1開(kāi)始計(jì)數(shù))
:nth-last-of-type(n) 選擇同屬于一個(gè)父元素之下，并且標(biāo)簽名相同的元素中的倒數(shù)第n個(gè)
:only-child 如果某個(gè)元素是父元素中唯一的子元素，那將會(huì)被匹配
:only-of-type 選擇所有沒(méi)有兄弟元素，且具有相同的元素名稱的元素
:root 選取文檔的根元素，在html文檔中即是<html>元素
等等....
5）聯(lián)合選擇器和反選擇器
通過(guò)對(duì)選擇器的合理安排，我們幾乎能達(dá)成任何目標(biāo)。我們還可以利用選擇器組合實(shí)現(xiàn)聯(lián)合選擇和反選擇
<selector>,<selector>,<selector>.. 選取匹配第一個(gè)選擇器的元素和匹配第二個(gè)選擇器的元素
:not(selector) 選取不匹配指定選擇器的元素
6）jQuery擴(kuò)充的選擇器
上面是css中本身就提供的選擇器，為了滿足更復(fù)雜的需求，jQuery還額外的支持一些選擇器，這些選擇器不但給我們帶來(lái)方便，還能
實(shí)現(xiàn)更細(xì)的控制。
:animated 匹配所有正在執(zhí)行動(dòng)畫(huà)效果的元素
:contains(text) 如果元素內(nèi)或者后代元素內(nèi)包含指定的文本即被選中
:eq(n) 選擇第n個(gè)元素（從0開(kāi)始計(jì)數(shù)）
:first 選擇第一個(gè)匹配的元素
:last 選擇最后一個(gè)匹配的元素
:lt(n) 選擇序號(hào)小于n的所有元素（從0開(kāi)始計(jì)數(shù)）
:gt(n) 選擇序號(hào)大于n的所有元素（從0開(kāi)始計(jì)數(shù)）
:odd 選擇所有奇數(shù)元素(從0開(kāi)始計(jì)數(shù))
:even 選擇所有的偶數(shù)元素（從0開(kāi)始計(jì)數(shù)）
:has(選擇器) 匹配包含 選擇器所匹配的元素的元素
:text 用于表單，匹配所有的單行文本框
:button 匹配所有按鈕（input標(biāo)簽type為button以及<button>標(biāo)簽）
:checkbox 用于表單，選擇所有的復(fù)選框（匹配所有復(fù)選框）
:file 用于表單，選擇所有的文件上傳輸入框
:input 用于表單，選擇所有的input元素（匹配所有 input, textarea, select 和 button 元素）
:password 用于表單，選擇所有的密碼輸入框
:radio 用于表單，選擇所有的單選框
:submit 用于表單，選擇所有的表單提交按鈕
:image 用于表單，匹配所有圖像域
:reset 用于表單，選擇所有的表單重置按鈕
:selected 用于表單，匹配所有選中的option元素
:header 匹配如 h1, h2, h3之類的標(biāo)題元素
:hidden 選擇所有的被隱藏文件
:visible 選擇所有的可見(jiàn)元素
:parent 匹配含有子元素或者文本的元素
選擇器可以單獨(dú)使用，也可以配合其他選擇器使用！
7）限制搜索的范圍
默認(rèn)情況下jQuery是在整個(gè)頁(yè)面中搜索元素，多給$函數(shù)提供一個(gè)參數(shù)，我們便能夠限制搜索的范圍。
$(選擇器,$(選擇器))
2、理解選擇結(jié)果
使用$函數(shù)選擇元素返回的是一個(gè)對(duì)象，我們可以稱這個(gè)對(duì)象為jQuery對(duì)象（就是一種叫法）,我們?cè)趈Query執(zhí)行一些操作的時(shí)候很多情況
下都是返回的jQuery對(duì)象，下面我們來(lái)看一下jQuery對(duì)象里面的一些成員（還有很多成員我們后面慢慢講，這邊只列出部分）。
1）each(function)
在每個(gè)元素上運(yùn)行給定的function
遍歷jQuery對(duì)象中的所有元素，傳個(gè)一個(gè)函數(shù)
jQuery對(duì)象中有多少個(gè)元素，傳入的函數(shù)就會(huì)自動(dòng)的調(diào)用多少次！
調(diào)用這個(gè)函數(shù)時(shí)，會(huì)傳入當(dāng)前這個(gè)元素在 jQuery對(duì)象中的序號(hào)！我們使用一個(gè)參數(shù)即可獲?。?/div>
在函數(shù)內(nèi)部this代表當(dāng)前的html元素對(duì)象！
返回 'false' 將停止循環(huán) (就像在普通的循環(huán)中使用 'break')。
返回 'true' 跳至下一個(gè)循環(huán)(就像在普通的循環(huán)中使用'continue')
2）get(index)
返回給定索引值(index)對(duì)應(yīng)的HTMLElement對(duì)象
3）length
返回jQuery對(duì)象中包含元素的個(gè)數(shù)
4）selector 返回選擇器
5）size()
返回jQuery對(duì)象中包含元素的個(gè)數(shù)
6）toArray() 返回一個(gè)jQuery對(duì)象中包含的元素構(gòu)成的HTMLElement對(duì)象數(shù)組
jQuery對(duì)象內(nèi)包含大量有用的方法以及屬性，我們這邊暫時(shí)只介紹這幾個(gè)
目的就是讓大家感受一下即可！
問(wèn)題思考：
1）jQuery對(duì)象怎么得到普通HTMLElement對(duì)象
get(index)、toArray()
2）怎么由DOM對(duì)象生成jQuery對(duì)象
$(DOM對(duì)象)
3）迭代處理jQuery對(duì)象內(nèi)含的DOM對(duì)象
each(function)
3、方便之處-修改多個(gè)元素
幾乎jQuery對(duì)象的內(nèi)部的所有方法都是直接修改內(nèi)部含的全部元素
$("div").css('background','pink');
4、方便之處-鏈?zhǔn)椒椒ㄕ{(diào)用
jQuery對(duì)象另一個(gè)優(yōu)雅之處在于它靈活的API比如：
調(diào)用一個(gè)方法修改jQuery內(nèi)元素的內(nèi)容，這個(gè)方法的返回結(jié)果依然是一個(gè)jQuery對(duì)象。
二、向jQuery對(duì)象中添加更多元素
1、add方法
*注意點(diǎn)：add方法不會(huì)改變?cè)瓉?lái)的jQuery對(duì)象，而是返回新的jQuery對(duì)象
向jQuery對(duì)象中添加更多的元素主要就是使用jQuery對(duì)象中的add方法！
add(選擇器)、add(選擇器,上下文) 把匹配選擇器的所有元素添加到調(diào)用add方法的jQuery對(duì)象中
add(HTMLElement)、add(HTMLElement[]) 把一個(gè)或一組HTMLElement添加到j(luò)Query對(duì)象
add(jQuery對(duì)象) 把參數(shù)jQuery對(duì)象中的元素添加到當(dāng)前jQuery對(duì)象
三、對(duì)結(jié)果集進(jìn)行篩選
*注意點(diǎn)：這些操作不會(huì)改變?cè)瓉?lái)的jQuery對(duì)象，而是返回新的jQuery對(duì)象
1、從結(jié)果集中獲取某個(gè)元素
1）first()方法
得到第一個(gè)元素
2）last()方法
得到最后一個(gè)元素
3）eq(index)方法
得到第index個(gè)元素
當(dāng)index為正值時(shí)，從第一個(gè)元素開(kāi)始計(jì)數(shù)，為負(fù)數(shù)時(shí)則從jQuery中的最后一個(gè)元素開(kāi)始計(jì)數(shù)
2、獲取元素子集
slice()方法用來(lái)獲取特定一組子元素
slice(從第幾個(gè)開(kāi)始,結(jié)束的位置)如果不提供第二個(gè)參數(shù)則從第一個(gè)參數(shù)一直獲取到元素集合的末尾
3、過(guò)濾元素
1）使用filter方法可以將所有 不滿足 某個(gè)指定條件的元素剔除
filter(selector) 得到匹配選擇器的元素
filter(HTMLElement) 得到參數(shù)對(duì)應(yīng)的元素
filter(jQuery) 得到原始集合與參數(shù)jQuery對(duì)象所含元素集合的交集
filter(function(index))
每一個(gè)元素調(diào)用一次參數(shù)函數(shù)，若某個(gè)元素調(diào)用參數(shù)函數(shù)的返回值為false，就剔除該元素
它接受一個(gè)參數(shù)index，這是元素在jQuery集合的索引。在函數(shù)內(nèi)， this指的是當(dāng)前的DOM元素。
原來(lái)的jQuery對(duì)象里面含有多少個(gè)元素，傳入的函數(shù)就會(huì)被執(zhí)行多少次！
如果函數(shù)返回的是true，那么對(duì)于的元素就留下來(lái)
如果函數(shù)返回的false，或者不返回 那么對(duì)于的元素就剔除！
this
2）not方法與filter方法正好相反
not(選擇器) 刪除匹配選擇器的元素
not(HTMLElement[])、not(HTMLElement) 刪除指定的元素或者元素集合
not(jQuery) 刪除原始集合與參數(shù)jQuery對(duì)象所含元素集合的交集
not(function(index)) 每個(gè)元素調(diào)用一次參數(shù)函數(shù)
4、基于后代元素過(guò)濾結(jié)果集
我們可以使用has方法指定一個(gè)選擇器、一個(gè)或多個(gè)HTMLElement對(duì)象為參數(shù)，從而得到擁有指定后代的元素
保留包含特定后代的元素，去掉那些不含有指定后代的元素
has方法
如果jQuery對(duì)象中的元素里面含有匹配的后代元素，那么對(duì)應(yīng)的元素就留下來(lái)！
一個(gè)選擇器、
一個(gè)或多個(gè)HTMLElement對(duì)象為參數(shù)
四、檢測(cè)結(jié)果集
1、使用is()方法
如果元素內(nèi)部有符合傳入選擇器的元素那么返回的就是true否則返回的就是false
使用is方法確定jQuery對(duì)象中的某個(gè)或某些元素是否滿足測(cè)試條件
is(選擇器) 如果結(jié)果含有匹配選擇器的元素則返回true
is(HTMLElement[])、is(HTMLElement) 如果結(jié)果集中包含指定的HTMLElement或者至少含有指定HTMLElement[]中的一個(gè)元素，返回true
is(jQuery) 如果結(jié)果集中至少包含一個(gè)參數(shù)對(duì)象中的元素，返回true
is(function(index))
如果有一任意次參數(shù)函數(shù)返回true，則返回true
函數(shù)用來(lái)作為測(cè)試元素的集合。它接受一個(gè)參數(shù)index，這是元素在jQuery集合的索引。
在函數(shù)內(nèi)， this指的是當(dāng)前的DOM元素。
五、根據(jù)現(xiàn)有結(jié)果集得到另一個(gè)結(jié)果集
1、獲取后代元素
1）children()
不傳參數(shù)：得到結(jié)果集內(nèi)所有元素的子元素
傳入選擇器：得到結(jié)果集內(nèi) 元素的匹配傳入選擇器的子元素
2）find()
傳入選擇器：得到匹配選擇器的后代元素
傳入jQuery、HTMLElement、HTMLElement[]
得到結(jié)果集內(nèi)所有元素的后代元素與參數(shù)對(duì)象對(duì)應(yīng)元素的交集
2、獲取祖先元素
1）offsetParent()
返回祖先元素中第一個(gè)其position設(shè)為relative或者absolute的元素。
此方法僅對(duì)可見(jiàn)元素有效
2）parent()
取得結(jié)果集內(nèi)元素的父元素
可以通過(guò)一個(gè)可選的選擇器進(jìn)行篩選
3）parents()
取得結(jié)果集內(nèi)元素的祖先元素，可以通過(guò)一個(gè)可選的選擇器進(jìn)行篩選。
4）parentsUntil()
查找當(dāng)前元素的所有的祖先元素，直到（但不包括）遇到匹配的那個(gè)元素才停止
第一個(gè)傳入?yún)?shù)：html元素對(duì)象,jQuery對(duì)象，選擇器
第二個(gè)傳入?yún)?shù)（可選）：選擇器(對(duì)結(jié)果進(jìn)行篩選)
3、獲取兄弟元素
1）next()
取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的下一個(gè)同輩元素的元素集合
可以傳入選擇器進(jìn)行篩選
2）nextAll()
查找當(dāng)前元素之后所有的同輩元素
可以傳入選擇器進(jìn)行篩選
3）nextUntil()
查找當(dāng)前元素之后所有的同輩元素，直到（但不包括）遇到匹配的那個(gè)元素才停止。
第一個(gè)傳入?yún)?shù)：DOMElement,jQuery對(duì)象，選擇器
第二個(gè)傳入?yún)?shù)（可選）：選擇器(對(duì)結(jié)果進(jìn)行篩選)
4）prev()
取得一個(gè)包含匹配的元素集合中每一個(gè)元素緊鄰的前一個(gè)同輩元素的元素集合
可以傳入選擇器進(jìn)行篩選
5）prevAll()
查找當(dāng)前元素之前所有的同輩元素
可以傳入選擇器進(jìn)行篩選
6）prevUntil()
查找當(dāng)前元素之前所有的同輩元素，直到（但不包括）遇到匹配的那個(gè)元素才停止
第一個(gè)傳入?yún)?shù)：DOMElement,jQuery對(duì)象，選擇器
第二個(gè)傳入?yún)?shù)（可選）：選擇器(對(duì)結(jié)果進(jìn)行篩選)
7）siblings()
取得一個(gè)包含匹配的元素集合中每一個(gè)元素的所有同輩元素的元素集合
可以傳入選擇器進(jìn)行篩選
六、修改、回退結(jié)果集
1、end()方法
使用end方法得到上一個(gè)結(jié)果集
2、addBack()方法
使用addBack()可以得到原結(jié)果集與當(dāng)前結(jié)果的合集，也可傳入選擇器來(lái)過(guò)濾原結(jié)果集
轉(zhuǎn)載請(qǐng)注明出處及附上該鏈接：http://ebqao.cn/web/193.html
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
上一篇:<<JavaScript基礎(chǔ) 下一篇:操作html文檔結(jié)構(gòu)>>
支付寶掃碼：