JQuery 16

基礎(chǔ)過濾選擇器

1、:first?用法: $(”tr:first”) ;? 返回值? 單個元素的組成的集合? ? ? 說明: 匹配找到的第一個元素

2伐弹、:last?用法: $(”tr:last”)? 返回值? 集合元素? ? ? 說明: 匹配找到的最后一個元素.與 :first 相對應(yīng)

3酸舍、:not(selector)?用法: $(”input:not(.myClass)”)返回值? 集合元素? ? 說明: 去除所有與給定選擇器匹配的元素.有點(diǎn)類似于”非”,意思是選取class不是myClass的元素? ? 4帅韧、:even?用法: $(”tr:even”)? 返回值? 集合元素? ? 說明: 匹配所有索引值為偶數(shù)的元素,從 0 開始計(jì)數(shù).js的數(shù)組都是從0開始計(jì)數(shù)的.例如要選擇table中的行,因?yàn)槭菑?開始計(jì)數(shù),所以table中的第一個tr就為偶數(shù)0.

5啃勉、: odd?用法: $(”tr:odd”) 返回值? 集合元素

說明: 匹配所有索引值為奇數(shù)的元素,和:even對應(yīng),從 0 開始計(jì)數(shù).

6忽舟、:eq(index)?用法: $(”tr:eq(0)”)? ? 返回值? 集合元素

說明: 匹配一個給定索引值的元素.eq(0)就是獲取第一個tr元素.括號里面的是索引值,不是元素排列數(shù).

7、:gt(index)?用法: $(”tr:gt(0)”)? ? 返回值? 集合元素

說明: 匹配所有大于給定索引值的元素.

8、:lt(index)?用法: $(”tr:lt(2)”)? ? 返回值? 集合元素

說明: 匹配所有小于給定索引值的元素.

后代選擇器

在給定的祖先元素下匹配所有的后代元素

find() 方法獲得當(dāng)前元素集合中每個元素的后代萧诫,通過選擇器、jQuery 對象或元素來篩選枝嘶。

子元素選擇器

在給定的父元素下匹配所有的子元素

children()
取得一個包含匹配的元素集合中每一個元素的所有子元素的元素集合帘饶。

關(guān)系選擇器

next()

匹配所有緊接在 prev 元素后的 next 元素,取得一個包含匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合。

nextAll()

查找當(dāng)前元素之后所有的同輩元素群扶。

prev()

取得一個包含匹配的元素集合中每一個元素緊鄰的前一個同輩元素的元素集合及刻。

prevAll()

查找當(dāng)前元素之前所有的同輩元素

siblings()

獲得匹配集合中每個元素的同胞,通過選擇器進(jìn)行篩選是可選的竞阐。

屬性選擇器

1>[attribute]

匹配包含給定屬性的元素缴饭。

2>[attribute=value]

匹配給定的屬性是某個特定值的元素

3>[attribute!=value]

概述:匹配所有不含有指定的屬性,或者屬性不等于特定值的元素骆莹。

4>[attribute^=value]

概述:匹配給定的屬性是以某些值開始的元素

5>[attribute$=value]

概述:匹配給定的屬性是以某些值結(jié)尾的元素

6>[attribute*=value]

概述:匹配給定的屬性是以包含某些值的元素

7>[selector1][selector2][selectorN]

復(fù)合屬性選擇器颗搂,需要同時滿足多個條件時使用


過濾選擇器

內(nèi)容過濾選擇器

內(nèi)容過濾選擇器的過濾規(guī)則主要體現(xiàn)在它所包含的子元素和文本內(nèi)容上

1、:contains(text)?用法: $(”div:contains(’John’)”)? ? 返回值? 集合元素

說明: 匹配包含給定文本的元素.這個選擇器比較有用幕垦,當(dāng)我們要選擇的不是dom標(biāo)簽元素時,它就派上了用場了,它的作用是查找被標(biāo)簽”圍”起來的文本內(nèi)容是否符合指定的內(nèi)容的.

2丢氢、:empty?用法: $(”td:empty”)? 返回值? 集合元素

說明: 匹配所有不包含子元素或者文本的空元素

3、:has(selector)

用法: $(”div:has(p)”).addClass(”test”)? ? 返回值? 集合元素

說明: 匹配含有選擇器所匹配的元素的元素.(例子是匹配包含p元素的DIV)

4先改、:parent?用法: $(”td:parent”)? 返回值? 集合元素

說明: 匹配含有子元素或者文本的元素.注意:這里是”:parent”,可不是”.parent”哦!與上面講的”:empty”形成反義詞.

可見度過濾選擇器

可見度過濾選擇器是根據(jù)元素的可見和不可見狀態(tài)來選擇相應(yīng)的元素

1疚察、:hidden?用法: $(”tr:hidden”)? 返回值? 集合元素

說明: 匹配所有的不可見元素,input 元素的 type 屬性為 “hidden” 的話也會被匹配到.意思是css中display:none和input type=”hidden”的都會被匹配到.同樣,要在腦海中徹底分清楚冒號”:”, 點(diǎn)號”.”和逗號”,”的區(qū)別.

2仇奶、:visible?用法: $(”tr:visible”)? 返回值? 集合元素

說明: 匹配所有的可見元素.

表單對象屬性過濾選擇器

此選擇器主要對所選擇的表單元素進(jìn)行過濾

1貌嫡、:enabled?用法: $(”input:enabled”)? ? 返回值? 集合元素

說明: 匹配所有可用元素.意思是查找所有input中不帶有disabled=”disabled”的input.不為disabled,當(dāng)然就為enabled啦.

2、:disabled?用法: $(”input:disabled”)? ? 返回值? 集合元素

說明: 匹配所有不可用元素.與上面的那個是相對應(yīng)的.

3该溯、:checked?用法: $(”input:checked”)? 返回值? 集合元素

說明: 匹配所有選中的元素(復(fù)選框岛抄、單選框等,不包括select中的option).

4朗伶、:selected?用法: $(”select option:selected”)? 返回值? 集合元素

說明: 匹配所有選中的option元素.

子元素過濾選擇器

1弦撩、:nth-child(index/even/odd/equation)?用法: $(”ul li:nth-child(2)”)? 返回值? 集合元素

說明: 匹配其父元素下的第N個子或奇偶元素.這個選擇器和之前說的基礎(chǔ)過濾中的 eq() 有些類似,不同的地方就是前者是從0開始,后者是從1開始.

eg: 2? ||? even? ||? odd? ||? 3n? ||? 3n+1

2、:first-child?用法: $(”ul li:first-child”)? ? 返回值? 集合元素

說明: 匹配第一個子元素.’:first’ 只匹配一個元素,而此選擇符將為每個父元素匹配一個子元素.這里需要特別點(diǎn)的記憶下區(qū)別.

3论皆、:last-child?用法: $(”ul li:last-child”)? ? ? 返回值? 集合元素

說明: 匹配最后一個子元素.’:last’只匹配一個元素,而此選擇符將為每個父元素匹配一個子元素.

4益楼、: only-child?用法: $(”ul li:only-child”)? 返回值? 集合元素

說明: 如果某個元素是父元素中唯一的子元素,那將會被匹配.如果父元素中含有其他元素,那將不會被匹配.

表單選擇器

1、:input?用法: $(”:input”) ;? 返回值? 集合元素

說明:匹配所有 input, textarea, select 和 button 元素

2点晴、:text?用法: $(”:text”) ;? 返回值? 集合元素

說明: 匹配所有的單行文本框.

3感凤、:password?用法: $(”:password”) ; 返回值? 集合元素

說明: 匹配所有密碼框.

4、:radio?用法: $(”:radio”) ; 返回值? 集合元素

說明: 匹配所有單選按鈕.

5粒督、:checkbox?用法: $(”:checkbox”) ; 返回值? 集合元素

說明: 匹配所有復(fù)選框

6陪竿、:submit?用法: $(”:submit”) ;? 返回值? 集合元素

說明: 匹配所有提交按鈕.

7、:image?用法: $(”:image”)? 返回值? 集合元素

說明: 匹配所有圖像域.

8、:reset?用法: $(”:reset”) ;? 返回值? 集合元素

說明: 匹配所有重置按鈕.

9族跛、:button?用法: $(”:button”) ;? 返回值? 集合元素

說明: 匹配所有按鈕.這個包括直接寫的元素button.

10闰挡、:file?用法: $(”:file”) ;? 返回值? 集合元素

說明: 匹配所有文件域.

無論前方的道路有多么不平,你都要義無反顧的走下去礁哄,決不后退长酗,絕不回頭!M┤蕖夺脾!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市茉继,隨后出現(xiàn)的幾起案子咧叭,更是在濱河造成了極大的恐慌,老刑警劉巖烁竭,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件菲茬,死亡現(xiàn)場離奇詭異,居然都是意外死亡派撕,警方通過查閱死者的電腦和手機(jī)生均,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腥刹,“玉大人马胧,你說我怎么就攤上這事∠畏澹” “怎么了佩脊?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長垫卤。 經(jīng)常有香客問我威彰,道長,這世上最難降的妖魔是什么穴肘? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任歇盼,我火速辦了婚禮,結(jié)果婚禮上评抚,老公的妹妹穿的比我還像新娘豹缀。我一直安慰自己,他們只是感情好慨代,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布邢笙。 她就那樣靜靜地躺著,像睡著了一般侍匙。 火紅的嫁衣襯著肌膚如雪氮惯。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天,我揣著相機(jī)與錄音妇汗,去河邊找鬼帘不。 笑死,一個胖子當(dāng)著我的面吹牛杨箭,可吹牛的內(nèi)容都是我干的厌均。 我是一名探鬼主播,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼告唆,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了晶密?” 一聲冷哼從身側(cè)響起擒悬,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎稻艰,沒想到半個月后懂牧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡尊勿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年僧凤,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片元扔。...
    茶點(diǎn)故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡躯保,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出澎语,到底是詐尸還是另有隱情途事,我是刑警寧澤,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布擅羞,位于F島的核電站尸变,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏减俏。R本人自食惡果不足惜召烂,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望娃承。 院中可真熱鬧奏夫,春花似錦、人聲如沸历筝。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽漫谷。三九已至仔雷,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背碟婆。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工电抚, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人竖共。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓蝙叛,卻偏偏與公主長得像,于是被迫代替她去往敵國和親公给。 傳聞我的和親對象是個殘疾皇子借帘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,499評論 2 348

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn)淌铐,斷路器肺然,智...
    卡卡羅2017閱讀 134,629評論 18 139
  • 第一章 入門 基本功能:訪問和操作 dom 元素,控制頁面樣式腿准,對頁面的事件處理际起,與ajax完美結(jié)合,有豐富的插件...
    X_Arts閱讀 1,030評論 0 2
  • $(”p”).addClass(css中定義的樣式類型); 給某個元素添加樣式 $(”img”).attr({sr...
    專注寒冰三千歲閱讀 504評論 0 4
  • 讀懂別人是一種欣喜吐葱, 被人讀懂是一種幸福街望, 做單純的人, 走幸福的路弟跑。
    袁益君閱讀 226評論 0 2
  • 1. 沒有穩(wěn)定的工作孟辑,只有穩(wěn)定的牛逼著 今年由于家里有事所以就早點(diǎn)回家了豫柬,回到家里被問得最多的就是“你是什么工作?...
    鄒小芝閱讀 1,260評論 0 3