前端提高篇：jQuery的DOM的筛选遍历

// 假设我们有一个包含多个列表项的无序列表
// <ul id="myList">
//   <li>列表项 1</li>
//   <li>列表项 2</li>
//   ...
// </ul>
 
// 使用jQuery筛选出奇数位置的列表项
$('#myList li:odd').css('color', 'red');
 
// 使用jQuery筛选出偶数位置的列表项
$('#myList li:even').css('color', 'green');
 
// 筛选出列表中的第一个列表项
$('#myList li:first').css('font-weight', 'bold');
 
// 筛选出列表中的最后一个列表项
$('#myList li:last').css('font-style', 'italic');
 
// 筛选出列表中的第n个列表项（例如第二个）
$('#myList li:eq(1)').css('background-color', 'yellow');
 
// 筛选出所有大于n索引的列表项（例如大于第二个）
$('#myList li:gt(1)').css('text-decoration', 'line-through');
 
// 筛选出所有小于n索引的列表项（例如小于第二个）
$('#myList li:lt(1)').css('border', '1px solid black');
 
// 筛选出所有不匹配选择器的列表项
$('#myList li:not(.exclude)').hide();

这段代码展示了如何使用jQuery的筛选函数来操作DOM元素。其中的:odd、:even、:first、:last、:eq(index)、:gt(index)和:lt(index)都是jQuery提供的方便的选择器，可以直接筛选出特定的元素。:not(selector)则用于排除不符合条件的元素。这些筛选函数使得DOM元素的筛选和遍历变得更加简单和高效。