jQuery的元素選擇舉例

1颠毙、jQuery的一個(gè)很重要的特點(diǎn)就是它的鏈?zhǔn)讲僮?/h6>
$('div').find('h2').eq(2).text()

這一行代碼的意思就是:找到文檔里的所有div揭芍,然后把這些div里面的所有h2找出來斑胜,返回一個(gè)偽數(shù)組缸托,這個(gè)偽數(shù)組里裝著全部的h2跷叉,然后找到它們中的第三個(gè)h2并且獲取它的text內(nèi)容逸雹。

$('div').find('h2').eq(0).text('你好').end()

這時(shí)的end要注意下,選擇div時(shí)進(jìn)入一個(gè)棧云挟,find時(shí)又進(jìn)入下一個(gè)棧梆砸,eq時(shí)又進(jìn)入了一個(gè)棧,在當(dāng)前的棧里將內(nèi)容全部改成了‘你好’园欣,通過end()方法退出當(dāng)前椞溃回到上一個(gè)棧,也就是find('h2')這里沸枯,這樣就可以對(duì)它進(jìn)行其它的操作了日矫。

2、元素選擇
  • filter() 和 not()
 $('h2').filter('.h2').css('background','red')

選擇所有的h2標(biāo)簽中class是h2的元素绑榴,把它的背影變成紅色
與filter相反的是not

$('h2').not('.h2').css('background',red)

在h2中排除掉.h2哪轿,把剩下的h2背影變成紅色
注意:filter和not都是在當(dāng)前棧中進(jìn)行的操作

  • has() 包含
$('div').has('span').css('font-size','15px')

操作的是包含了span標(biāo)簽的div,依然是在當(dāng)前棧中進(jìn)行的操作翔怎。注意:這里的包含是指子元素窃诉,不是包含什么id啊class什么的

  • next() 和 prev()
$('div').filter('.father').next().css('background','blue')

next()和prev()選擇的都是兄弟節(jié)點(diǎn),不一定是得和自己一樣的標(biāo)簽這里之前理解有誤,這兩個(gè)方法也會(huì)進(jìn)入新的棧

  • find()
$('div').find('h2')

這是找到div子元素中的h2并返回一個(gè)偽數(shù)組赤套,和filter不同飘痛,filter是在當(dāng)元素中過濾,而find則是在后代元素中找容握。

  • eq()
$('div').find('h2').eq(0)

當(dāng)前元素列中的第幾個(gè)

  • index()
$('div').index()

div元素在兄弟元素中的具體位置宣脉,返回一個(gè)數(shù)值

  • 獲取和設(shè)置內(nèi)容text() html()
$('div').text()  // $('div').text('新的內(nèi)容')

空的就是獲取,有內(nèi)容就是設(shè)置新的內(nèi)容

  • sibings()
$('div').siblings()  // $('div').siblings('h2')

返回div的所有兄弟元素剔氏,返回div兄弟元素中是h2的元素

  • children() // parent()類似
$('div').children()

返回的是全部的子元素塑猖,和find()不同堪遂,find()是在所有的后代元素里找

3、元素選擇和獲取的其它API
parents()   //獲取所有的祖先元素萌庆,可用參數(shù)進(jìn)行匹配
siblings()   //獲取兄弟(除自己以外)
nextAll()    //DOM樹中元素同級(jí)兄弟元素中接下來的全部
prevAll()    //原理同上
nextUntil()  //往下截止(不包含截止元素)
prevUntil()  //兄弟元素往上截止(不包含)
parentsUntil() //同上

4溶褪、closest()

它必須要寫篩選的參數(shù),它是從自己開始找践险,不停往祖先元素找匹配的元素猿妈,并且只能找到一個(gè)元素

5、clone()

這個(gè)API很重要

<script>
     $('span').clone().appendTo('#div1')
</script>
<script>
     $('span').click(function(){
       console.log('span被點(diǎn)擊了')
     })
     $('span').clone(true).appendTo('#div1')
     
  </script>

參數(shù)true就是克隆了之前的全部操作巍虫。

6彭则、元素的包裝
 $('span').wrap('<div>')  //這是對(duì)每個(gè)span標(biāo)簽外面都包一層
 $('li').wrapAll('<div>')    //這是對(duì)所有的li外面整體包一層,注意如果li里混進(jìn)了其它標(biāo)簽,在整體包裝的時(shí)候會(huì)被排隊(duì)出去占遥。
$('span').wrapInner('<p>')    //把span標(biāo)簽的子節(jié)點(diǎn)用一個(gè)p標(biāo)簽包起來
$('li').unwrap()  //刪除包裝俯抖,但是不刪body

注意括號(hào)里是<div>標(biāo)簽

7、add()
let a = $('li')
let b = a.add('div')

在一個(gè)元素集合里添加新的元素瓦胎,構(gòu)成新的元素集合芬萍,之前的元素集合依然不變。

8搔啊、slice()
$('li').slice(1,3).css('color','red')

類似切片柬祠,理解理解。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末负芋,一起剝皮案震驚了整個(gè)濱河市漫蛔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌旧蛾,老刑警劉巖莽龟,帶你破解...
    沈念sama閱讀 219,270評(píng)論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異锨天,居然都是意外死亡毯盈,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,489評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門绍绘,熙熙樓的掌柜王于貴愁眉苦臉地迎上來奶镶,“玉大人迟赃,你說我怎么就攤上這事陪拘。” “怎么了纤壁?”我有些...
    開封第一講書人閱讀 165,630評(píng)論 0 356
  • 文/不壞的土叔 我叫張陵左刽,是天一觀的道長。 經(jīng)常有香客問我酌媒,道長欠痴,這世上最難降的妖魔是什么迄靠? 我笑而不...
    開封第一講書人閱讀 58,906評(píng)論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮喇辽,結(jié)果婚禮上掌挚,老公的妹妹穿的比我還像新娘。我一直安慰自己菩咨,他們只是感情好吠式,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,928評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著抽米,像睡著了一般特占。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上云茸,一...
    開封第一講書人閱讀 51,718評(píng)論 1 305
  • 那天是目,我揣著相機(jī)與錄音,去河邊找鬼标捺。 笑死懊纳,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的亡容。 我是一名探鬼主播长踊,決...
    沈念sama閱讀 40,442評(píng)論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼萍倡!你這毒婦竟也來了身弊?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,345評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤列敲,失蹤者是張志新(化名)和其女友劉穎阱佛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體戴而,經(jīng)...
    沈念sama閱讀 45,802評(píng)論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡凑术,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,984評(píng)論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了所意。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片淮逊。...
    茶點(diǎn)故事閱讀 40,117評(píng)論 1 351
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖扶踊,靈堂內(nèi)的尸體忽然破棺而出泄鹏,到底是詐尸還是另有隱情,我是刑警寧澤秧耗,帶...
    沈念sama閱讀 35,810評(píng)論 5 346
  • 正文 年R本政府宣布备籽,位于F島的核電站,受9級(jí)特大地震影響分井,放射性物質(zhì)發(fā)生泄漏车猬。R本人自食惡果不足惜霉猛,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,462評(píng)論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望珠闰。 院中可真熱鬧惜浅,春花似錦、人聲如沸伏嗜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,011評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阅仔。三九已至吹散,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間八酒,已是汗流浹背空民。 一陣腳步聲響...
    開封第一講書人閱讀 33,139評(píng)論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留羞迷,地道東北人界轩。 一個(gè)月前我還...
    沈念sama閱讀 48,377評(píng)論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像衔瓮,于是被迫代替她去往敵國和親浊猾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,060評(píng)論 2 355

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案热鞍? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,754評(píng)論 1 92
  • 通過jQuery葫慎,您可以選取(查詢薇宠,query)HTML元素偷办,并對(duì)它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 657評(píng)論 0 3
  • //------------------------- 第一章 認(rèn)識(shí)JQuery ----------------...
    米塔塔閱讀 720評(píng)論 0 9
  • jQuery基礎(chǔ) 什么是JQ澄港?一個(gè)優(yōu)秀的JS庫椒涯,大型開發(fā)必備JQ的好處?一簡化JS的復(fù)雜操作二不再需要關(guān)心兼容性三...
    幺七閱讀 948評(píng)論 0 2
  • 失戀這件小事 有一個(gè)比我小兩歲的表弟回梧,從小一起長大废岂,兩個(gè)人常常打架到負(fù)傷,但是隔一會(huì)就又在一起破壞家里...
    諾佳閱讀 604評(píng)論 2 3