使用jQuery獲取元素
我們可以通過document.getElementById等方法獲取DOM對象坛掠,但是方法名稱長圈澈,使用不方便咱揍,而且功能有限节预,不能像CSS選擇器那樣靈活
jQuery定義了一套選擇器規(guī)則,和CSS選擇器目的一樣狈究,都是為了選擇出符合特定規(guī)則的元素碗淌。講jQuery不得不提到其選擇器,這是jQuery能夠快速流行的非常重要的原因抖锥,為了方便使用者jQuery刻意和CSS選擇器使用相同的語法亿眠,幾乎支持所有類型的CSS3選擇器,當(dāng)然也有一些其特定的選擇器
選擇器
簡直就是復(fù)習(xí)CSS選擇器有木有磅废,正是得益于此纳像,開發(fā)者在眾多js庫中迅速青睞于jQuery,看個圖方便記憶
除了使用選擇器jQuery還提供了一些方法幫助我們查找當(dāng)前元素相關(guān)元素
-
.eq(index)
對于一個特定結(jié)果集拯勉,我們想獲取到指定index的jQuery對象竟趾,可以使用eq方法
$('div').eq(3); // 獲取結(jié)果集中的第四個jQuery對象
我們可以通過類數(shù)組下標的獲取方式或者get方法獲取指定index的DOM對象,也就是我們說的jQuery對象轉(zhuǎn)DOM對象
$('div')[2];
$('div').eq(2);
兄弟元素獲取
-
.next([selector]), .prev([selector])
next取得匹配的元素集合中每一個元素緊鄰的后面同輩元素的元素集合宫峦。如果提供一個選擇器岔帽,那么只有緊跟著的兄弟元素滿足選擇器時,才會返回此元素导绷。prev正好相反犀勒,獲取元素之前的同輩元素
$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])
nextAll獲得每個匹配元素集合中每個元素所有后面的同輩元素,選擇性篩選的選擇器妥曲,prevAll與之相反贾费,獲取元素前面的同輩元素.siblings([selectors])
獲得匹配元素集合中每個元素的兄弟元素,可以提供一個可選的選擇器
$('li.third-item').siblings()
父子元素獲取
- .parent([selector])
取得匹配元素集合中,每個元素的父元素檐盟,可以提供一個可選的選擇器
$('li.item-a').parent()
- .parents([selector])
獲得集合中每個匹配元素的祖先元素铸本,可以提供一個可選的選擇器作為參數(shù)
$('li.item-a').parents('div')
- .children([selector])
獲得匹配元素集合中每個元素的子元素,選擇器選擇性篩選
$('ul.level-2').children()
- .find([selector])
查找符合選擇器的后代元素
$('ul').find('li.current');
篩選當(dāng)前結(jié)果集
.first()
獲取當(dāng)前結(jié)果集中的第一個對象.last()
獲取當(dāng)前結(jié)果集的最后一個對象.has(selector), .has(dom)
篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素
$('li').has('span')