<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>14.5jQuery遍历之高级过滤方法</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.each(function(index, element) {})，为每个元素加上一个方法
//index:元素位置
//element:当前元素，等同于this
$('#btn1').click(function(){
//遍历列表中所有元素
$('li').each(function() {
$(this).css('color','red');
});
});
$('#btn2').click(function(){
$('li').each(function(index, element) {
if(index%2==0)
{//值为真
$(this).css('background-color','#FCC');
}
else
{//值为假
$(this).css('background-color','#FF3');
}
});
});
//2. slice(start,[end])返回对应范围的子集元素
//说明:start必须有，end可以没有，若没有end则遍历到集合结束
//start值为正:值从0开始
//start值为负:值从1开始
$('#btn3').click(function(){
$('li').slice(2,4).css('list-style','circle');//C D
});
$('#btn4').click(function(){
$('li').slice(2).css('border','solid 1px red');//C D E F
});
$('#btn5').click(function(){
$('li').slice(-2).css('background-color','#6FF');//E F
//-2是位置，倒数第2个元
});
$('#btn6').click(function(){
$('li').slice(-4,-2).css('text-align','center');// C D
});
});
</script>
</head>
<body><br>
<input type="button" id="btn1" value="each()"><br>
<input type="button" id="btn2" value="each(function(index,element){})"><br>
<input type="button" id="btn3" value="slice(start,end)"><br>
<input type="button" id="btn4" value="slice(start)"><br>
<input type="button" id="btn5" value="slice(-start)"><br>
<input type="button" id="btn6" value="slice(-start,-end)"><br>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
</body>
</html>
初始效果
单击each()效果
单击each(function(index,element){})按钮就后效果
单击slice(start,end)按钮后效果
单击slice(start)按钮后效果
单击slice(-start)按钮后效果
单击slice(-start,-end)按钮后效果
所有按钮单击一遍后效果
