在前端開發(fā)中,經(jīng)常需要遍歷DOM節(jié)點(diǎn),而jQuery提供了多種遍歷節(jié)點(diǎn)的方式,如下:
$('selector').children(); //選取當(dāng)前元素下的所有子元素 $('selector').parent(); //選取當(dāng)前元素的父元素 $('selector').siblings(); //選取當(dāng)前元素的所有兄弟元素 $('selector').next(); //選取當(dāng)前元素下一個(gè)同級元素 $('selector').prev(); //選取當(dāng)前元素上一個(gè)同級元素 $('selector').find(); //選取當(dāng)前元素下的所有匹配子元素 $('selector').filter(); //選取當(dāng)前元素中符合條件的元素 $('selector').first(); //選取當(dāng)前元素中的第一個(gè)元素 $('selector').last(); //選取當(dāng)前元素中的最后一個(gè)元素
需要注意的是,在使用這些方法時(shí),選擇器$()可以是任意的CSS選擇器語法,比如元素選擇器、類選擇器、id選擇器等。
下面是一些實(shí)例:
//選取id為container的元素下的所有直接子元素 $('#container').children(); //選取id為box1的元素的父元素 $('#box1').parent(); //選取id為box3的元素的所有兄弟元素 $('#box3').siblings(); //選取id為box2的元素下一個(gè)同級元素 $('#box2').next(); //選取id為box2的元素上一個(gè)同級元素 $('#box2').prev(); //選取id為container的元素下class為item的所有子元素 $('#container').find('.item'); //選取class為item的元素中,data屬性為true的所有元素 $('.item').filter('[data=true]'); //選取id為container的元素下的第一個(gè)元素 $('#container').first(); //選取id為container的元素下的最后一個(gè)元素 $('#container').last();
總的來說,jQuery的遍歷節(jié)點(diǎn)的方式非常靈活方便,可以幫助我們快速地對DOM節(jié)點(diǎn)進(jìn)行操作和修改。