div下的article下的p元素
資訊專欄INFORMATION COLUMN
摘要：代表的上下文對(duì)象是一個(gè)的上下文對(duì)象，可以調(diào)用的方法和屬性值特殊選擇器點(diǎn)擊測(cè)試通過(guò)原生處理點(diǎn)擊測(cè)試通過(guò)原生處理直接通過(guò)的方法改變顏色通過(guò)包裝成對(duì)象改變顏色
DOM對(duì)象轉(zhuǎn)化成jQuery對(duì)象
如果傳遞給$(DOM)函數(shù)的參數(shù)是一個(gè)DOM對(duì)象，jQuery方法會(huì)把這個(gè)DOM對(duì)象給包裝成一個(gè)新的jQuery對(duì)象
jQuery基本選擇器
id選擇器
id選擇器：一個(gè)用來(lái)查找的ID，即元素的id屬性：$("#id")
注：id是唯一的，每個(gè)id值在一個(gè)頁(yè)面中只能使用一次。如果多個(gè)元素分配了相同的id，將只匹配該id選擇集合的第一個(gè)DOM元素。但這種行為不應(yīng)該發(fā)生;有超過(guò)一個(gè)元素的頁(yè)面使用相同的id是無(wú)效的
id="aaron"
選中
id="imooc"
jQuery選中
id="imooc"
jQuery未選中
類選擇器
類選擇器，通過(guò)class樣式類名來(lái)獲取節(jié)點(diǎn)：$( ".class" )
類選擇器，相對(duì)id選擇器來(lái)說(shuō)，效率相對(duì)會(huì)低一點(diǎn)，但是優(yōu)勢(shì)就是可以多選
class="aaron"
選中
class="aaron"
選中
class="imooc"
jQuery選中
class="imooc"
jQuery選中
元素選擇器
元素選擇器，根據(jù)給定(html)標(biāo)記名稱選擇所有的元素：$( "element" )
class="aaron"
選中
class="aaron"
選中
class="imooc"
jQuery選中
class="imooc"
jQuery選中
全選擇器（*選擇器）
傳遞*選擇器來(lái)選中文檔頁(yè)面中的元素：$( " * " )
class="aaron"
選中
class="aaron"
選中
class="imooc"
jQuery選中
class="imooc"
jQuery選中
層級(jí)選擇器
選擇器中的層級(jí)選擇器就是用來(lái)處理以下關(guān)系：
子元素 后代元素 兄弟元素 相鄰元素
層級(jí)選擇器之間的相似點(diǎn)與不同點(diǎn)：
層級(jí)選擇器都有一個(gè)參考節(jié)點(diǎn)
后代選擇器包含子選擇器的選擇的內(nèi)容
一般兄弟選擇器包含相鄰兄弟選擇的內(nèi)容
相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個(gè)父元素下
子選擇器與后代選擇器
div下的第一個(gè)p元素
div下的第一個(gè)p元素
div下的article下的p元素
div下的article下的p元素
相鄰兄弟選擇器與一般兄弟選擇器
兄弟節(jié)點(diǎn)div, +~選擇器不能向前選擇
選擇器span元素
span后第一個(gè)兄弟節(jié)點(diǎn)div
兄弟節(jié)點(diǎn)div
子元素div
兄弟節(jié)點(diǎn)span,不可選
兄弟節(jié)點(diǎn)div
jQuery篩選選擇器
基本篩選選擇器
篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號(hào)“：”開(kāi)頭，如下是基本篩選器的描述：
注意事項(xiàng)：
:eq(), :lt(), :gt(), :even, :odd 用來(lái)篩選他們前面的匹配表達(dá)式的集合元素，根據(jù)之前匹配的元素在進(jìn)一步篩選，注意jQuery合集都是從0開(kāi)始索引
gt是一個(gè)段落篩選，從指定索引的下一個(gè)開(kāi)始，gt(1) 實(shí)際從2開(kāi)始
基本篩選器
:first/:last/:even/:odd
div:first
:even
:odd
:even
:odd
:even
div:last
:odd
:eq/:gt/:lt
:lt(3)
:lt(3)
:eq(2)
:gt(3)
:gt(3)
http://img.mukewang.com/57cd1df2000146de06020498.jpg
:not
Aaron
慕課
其他
內(nèi)容篩選選擇器
基本篩選選擇器針對(duì)的都是元素DOM節(jié)點(diǎn)，如果要通過(guò)內(nèi)容來(lái)過(guò)濾，使用內(nèi)容篩選選擇器，其規(guī)則體現(xiàn)在它所包含的子元素或者文本內(nèi)容上，內(nèi)容過(guò)濾器描述如下表：
注意事項(xiàng)：
:contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同樣認(rèn)為是符合條件的。
:parent與:empty是相反的，兩者所涉及的子元素，包括文本節(jié)點(diǎn)
內(nèi)容篩選器
:contains/:has
:contains
:contains
:has
:contains
:parent/:empty
可見(jiàn)性篩選選擇器
元素有顯示狀態(tài)與隱藏狀態(tài)，jQuery根據(jù)元素的狀態(tài)擴(kuò)展了可見(jiàn)性篩選選擇器:visible與:hidden。描述如下：
:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等
隱藏元素有如下的方法：
CSS display的值是none
type=" hidden "的表單元素
寬度和高度都顯式設(shè)置為0
一個(gè)祖先元素是隱藏的，該元素是不會(huì)在頁(yè)面上顯示
CSS visibility的值是hidden
CSS opacity的指是0
如果元素中占據(jù)文檔中一定的空間,元素被認(rèn)為是可見(jiàn)的?？梢?jiàn)元素的寬度或高度，是大于零。元素的visibility: hidden 或 opacity: 0被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽加每臻g布局
可見(jiàn)性篩選選擇器
:visible/:hidden
屬性篩選選擇器
屬性選擇器可以基于屬性來(lái)定位一個(gè)元素。只需指定該元素的某個(gè)屬性，那么所有使用該屬性且不考慮其屬性值的元素都將被定位，也可更加明確并定位在這些屬性上使用特定值的元素
其中，[attr="value"]和[attr*="value"]最為實(shí)用：
[attr="value"]能定位不同類型的元素，特別是表單form元素的操作，比如input[type="text"],input[type="checkbox"]等
[attr*="value"]能在網(wǎng)站中幫助我們匹配不同類型的文件
$(selector)中selector有三種形式:
①字符串：用于元素的選??；②DOM元素：封裝Dom元素，提供一系列jquery方法；③function 就是初始化時(shí)的$(fn)形式
$("div[data=pmx]")括號(hào)里可以是單引號(hào)，也可以是雙引號(hào)。目的是表示$(selector)里面的參數(shù)是個(gè)字符串。[attribute = value]這種形式中value可以不加引號(hào)，如果要加引號(hào)，需要參照selector。如果selector是單引號(hào)，那么value必須是雙引號(hào)
屬性篩選選擇器
[att=val]、[att]、[att|=val]、[att~=val]
[att^=val]、[att*=val]、[att$=val]、[att!=val]
子元素篩選選擇器
子元素篩選選擇器不常使用，其篩選規(guī)則比起其它的選擇器稍微要復(fù)雜點(diǎn)
子元素篩選選擇器描述表：
注意事項(xiàng)：
:first只匹配一個(gè)多帶帶的元素，但是:first-child選擇器可以匹配多個(gè)：即為每個(gè)父級(jí)元素匹配第一個(gè)子元素。這相當(dāng)于:nth-child(1)
:last 只匹配一個(gè)多帶帶的元素， :last-child 選擇器可以匹配多個(gè)元素：即，為每個(gè)父級(jí)元素匹配最后一個(gè)子元素
如果子元素只有一個(gè)的話，:first-child與:last-child是同一個(gè)
:only-child匹配某個(gè)元素是父元素中唯一的子元素，就是說(shuō)當(dāng)前子元素是父元素中唯一的元素，則匹配
jQuery實(shí)現(xiàn):nth-child(n)是嚴(yán)格來(lái)自CSS規(guī)范，所以n值是“索引”，也就是說(shuō)，從1開(kāi)始計(jì)數(shù)，:nth-child(index)從1開(kāi)始的，而eq(index)是從0開(kāi)始的
nth-child(n) 與 :nth-last-child(n) 的區(qū)別前者是從前往后計(jì)算，后者從后往前計(jì)算
子元素篩選選擇器
:first-child、:last-child、:only-child
:nth-child、:nth-last-child
表單元素選擇器
表單選擇器的具體方法描述：
子元素篩選選擇器
input、text、password、radio、checkbox
submit、image、reset、button、file
選擇器適用于復(fù)選框和單選框，對(duì)于下拉框元素, 使用 :selected 選擇器
在某些瀏覽器中，選擇器:checked可能會(huì)錯(cuò)誤選取到
特殊選擇器thisthis，表示當(dāng)前的上下文對(duì)象是一個(gè)html對(duì)象，可以調(diào)用html對(duì)象所擁有的屬性和方法。$(this),代表的上下文對(duì)象是一個(gè)jQuery的上下文對(duì)象，可以調(diào)用jQuery的方法和屬性值
特殊選擇器this
點(diǎn)擊測(cè)試：通過(guò)原生DOM處理
點(diǎn)擊測(cè)試：通過(guò)原生jQuery處理
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87197.html
摘要：具有相同的父元素，并匹配過(guò)濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素?？梢?jiàn)元素的寬度或高度，是大于零。元素的或被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象 ? ? jQuery庫(kù)本質(zhì)上還是JavaScript代碼，它只是對(duì)JavaScript語(yǔ)言進(jìn)行包裝處理，為了是提供更好更方便快捷的DOM處理與開(kāi)發(fā)常見(jiàn)中經(jīng)常使用的功能。我們可以用jQuery...
摘要：具有相同的父元素，并匹配過(guò)濾選擇器子選擇器選擇所有指定元素中指定的的直接子元素?？梢?jiàn)元素的寬度或高度，是大于零。元素的或被認(rèn)為是可見(jiàn)的，因?yàn)樗麄內(nèi)匀徽加每臻g布局。 jQuery對(duì)象轉(zhuǎn)化成DOM對(duì)象 ? ? jQuery庫(kù)本質(zhì)上還是JavaScript代碼，它只是對(duì)JavaScript語(yǔ)言進(jìn)行包裝處理，為了是提供更好更方便快捷的DOM處理與開(kāi)發(fā)常見(jiàn)中經(jīng)常使用的功能。我們可以用jQuery...
摘要：本人的兩篇原創(chuàng)文章純干貨一切關(guān)于選擇器和純干貨之操作解析，發(fā)布不到個(gè)月，就被博客園某賬號(hào)認(rèn)領(lǐng)為他的原創(chuàng)，并且他還精心地將慕課網(wǎng)原創(chuàng)文章的版權(quán)聲明和文章中關(guān)于我的點(diǎn)點(diǎn)滴滴，刪除地干干凈凈，很專業(yè)。 本人的兩篇原創(chuàng)文章純干貨！一切關(guān)于jquery選擇器和純干貨！jQuery之DOM操作解析，發(fā)布不到1個(gè)月，就被博客園某賬號(hào) 認(rèn)領(lǐng) 為他的原創(chuàng)，并且他還精心地將慕課網(wǎng)原創(chuàng)文章的版權(quán)聲明和文...
摘要：選擇器，若未作特別說(shuō)明，獲取的都是元素集合。過(guò)濾器名語(yǔ)法說(shuō)明選取所有不可見(jiàn)元素選取所有可見(jiàn)元素注意過(guò)濾器一般是包含的內(nèi)容為樣式為表單類型為和的元素。四子元素過(guò)濾器子元素過(guò)濾器的過(guò)濾規(guī)則是通過(guò)父元素和子元素的關(guān)系來(lái)獲取相應(yīng)的元素。 轉(zhuǎn)自個(gè)人博客本來(lái)是單獨(dú)整理了一個(gè)CSS選擇器的，但是在jQuery中基本都有對(duì)應(yīng)的，所以就不發(fā)了。 jQuery選擇器，若未作特別說(shuō)明，獲取的都是元素集合。...
摘要：只要符合，不管是兒子輩，孫子輩都可以與其他的樹(shù)遍歷方法不同，選擇器表達(dá)式對(duì)于是必需的參數(shù)。方法以選定的元素為中心，往內(nèi)查找可以通過(guò)方法。要一個(gè)一個(gè)給合集中每一個(gè)設(shè)置顏色，這里方法就是方法就是一個(gè)循環(huán)的迭代器，它會(huì)迭代對(duì)象合集中的每一個(gè)元素。 children()方法 jQuery是一個(gè)合集對(duì)象，如果想快速查找合集里面的第一級(jí)子元素，此時(shí)可以用children()方法。這里需要注意：.c...
閱讀 1037·2023-04-25 15:42
閱讀 3637·2021-11-02 14:38
閱讀 2918·2021-09-30 09:48
閱讀 1469·2021-09-23 11:22
閱讀 3449·2021-09-06 15:02
閱讀 3214·2021-09-04 16:41
閱讀 631·2021-09-02 15:41
閱讀 2047·2021-08-26 14:13
