1颠毙、jQuery的一個(gè)很重要的特點(diǎn)就是它的鏈?zhǔn)讲僮?/h6>
$('div').find('h2').eq(2).text()
$('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')
類似切片柬祠,理解理解。