<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.4jQuery遍历之基本过滤方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1. first():返回被选元素的首个元素
$('#btn1').click(function(){
$('li').first().css('color','red');
});
//2. last():返回被选元素的最后一个元素
$('#btn2').click(function(){
$('li').last().css('color','blue');
});
//3. eq(index):返回被选中元素中带有指定索引号的元素
// eq(index):正序查找，index值从0开始
// eq(-index):倒序查找，index值从1开始
$('#btn3').click(function(){
$('li').eq(1).css('color','green');//B
$('li').eq(2).css('color','pink');//C
$('li').eq(-2).css('color','yellow');//F
$('li').eq(-3).css('color','orange');//E
});
//4. filter(表达式):筛选与指定表达式匹配的元素集合
$('#btn4').click(function(){
$('li').filter('#four').css('background-color','#CCC');
//过滤多个元素的写法
$('li').filter(':eq(2),:last,#one').css('background-color','#FCF');
});
//5.not(表达式 ):在被选元素中删除表达式匹配的元素
$('#btn5').click(function(){
$('li').not('#four').css('border','solid 2px red');
});
});
</script>
</head>
<body>
<input type="button" id="btn1" value="first()"><br>
<input type="button" id="btn2" value="last()"><br>
<input type="button" id="btn3" value="eq(index)"><br>
<input type="button" id="btn4" value="filter(表达式)"><br>
<input type="button" id="btn5" value="not(表达式)"><br>
<ul>
<li id="one">A</li>
<li id="two">B</li>
<li id="three">C</li>
<li id="four">D</li>
<li id="five">E</li>
<li id="six">F</li>
<li id="seven">G</li>
</ul>
</body>
</html>
效果图
