JQuery 層級選擇器(next(),preAll(),siblings(),parent())
阿新 • • 發佈：2019-01-06
$('#d1 div') //取所有子元素，不管是幾層。
$('#d1>div') //取直接子元素，一層
$('#d1+div') //之後緊鄰的一個同級元素
$('#d1~div') //之後的所有同級元素
$('#d1').next() //後面的一個同級元素
$('#d1').nextAll() //後面的所有同級元素
$('#d1').prev() //前面的一個同級元素
$('#d1').prevAll() //前面的所有同級元素
$('#d1').siblings() //前面和後面的所有同級元素
$('#d1').parent() //直接父元素
$('#d1').parents('tr') //所有的祖先元素中的<tr>標籤物件。
$('#d1').children() //所有直接子元素
$('#d1').find(':button') //所有子元素中的button標籤物件。
$('#d1>div') //取直接子元素，一層
$('#d1+div') //之後緊鄰的一個同級元素
$('#d1~div') //之後的所有同級元素
$('#d1').next() //後面的一個同級元素
$('#d1').nextAll() //後面的所有同級元素
$('#d1').prev() //前面的一個同級元素
$('#d1').prevAll() //前面的所有同級元素
$('#d1').siblings() //前面和後面的所有同級元素
$('#d1').parent() //直接父元素
$('#d1').parents('tr') //所有的祖先元素中的<tr>標籤物件。
$('#d1').children() //所有直接子元素
$('#d1').find(':button') //所有子元素中的button標籤物件。
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="scripts/jquery-1.7.1.min.js"></script> <script> $(function () { $('li').hover(function () {//滑鼠移上 $(this).css('background-color', 'red') .prevAll()//這個方法找到當前節點的所有節點，破壞了當前的鏈 .css('background-color', 'yellow') .end()//恢復最近的一次鏈的破壞之前的JQuery物件 .nextAll() .css('background-color', 'blue') ; }, function () {//滑鼠移開 $(this).css('background-color', 'white') .siblings().css('background-color', 'white');//獲取左右的兄弟節點 }); }); </script> </head> <body> <ul> <li>北京</li> <li>上海</li> <li>廣州</li> <li>深圳</li> </ul> </body> </html>