jQuery遍历的常用方法:
最常用的四个方法
find(): 在所有的后代中查找
children(): 仅在子元素中查找
filter(): 在集合中查找到一部分
parent(): 获取父级(只有一个)
同级兄弟
siblings(): 所有兄弟
next(): 后一个兄弟
nextAll(): 后面的所有兄弟
prev(): 前一个兄弟
prevAll(): 前面所有兄弟
常用的快捷方式
$().first(): 选择集合中的第一个
$().last(): 选择集合中的最后一个
$().eq(n): 选择指定索引的对象(0开始)
$().not(selector): 去掉not()中的对象
$().gt(): 大于指定索引的对象
$().lt(): 小于指定索引的对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery遍历</title> </head> <body> <ul id="list"> <li>item1</li> <li>item2</li> <li>item3 <ul> <li>sub_item1</li> <li>sub_item2</li> <li>sub_item3</li> </ul> </li> <li>item4</li> <li>item5</li> </ul> <script src="static/js/jquery-3.4.1.js"></script> <script> var list=$('#list'); // .find():获取所有层级,其实就是后代元素 // list.find('li').css('color','red'); //.children():只获取子元素,第一级的Li // list.children('li').css('color','green'); //.filter(): 过滤元素 // list.children('li').filter(':gt(1)').css('background-color','yellow'); //获取第三个Li var li3=$('li').eq(2); // li3.next().css('background-color','yellow'); // li3.nextAll().css('background-color','yellow'); // li3.prev().css('background-color','yellow'); // li3.prevAll().css('background-color','yellow'); // $('li').first().css('background-color','yellow'); // $('li').eq(0).css('background-color','yellow'); // $('ul li:first-of-type').css('background-color','yellow'); // $('#list > li:first-of-type').css('background-color','yellow'); $('li').not(':eq(0)').css('background-color','blue'); </script> </body> </html>
点击 "运行实例" 按钮查看在线实例