jquery遍历
1,addSelf()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<style>
p, div { margin:5px; padding:5px; }
.border { border: 2px solid red; }
.background { background:yellow; }
</style>
</head>
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
<script>
$("div").find("p").andSelf().addClass("border");//找到div下的所有p标签，将p标签和div标签合并，使addClass的样式也可以应用于div
$("div").find("p").addClass("background");//找到div下的所有p标签，将p标签的样式改为addClass的样式
</script>
</body>
</html>
注：
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li class="third-item">list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
$("li.third-item").nextAll().andSelf().css("background-color", "red");//.nextAll()获得前面所指定元素的下面的所有元素，将下面的所有元素和前面的元素合并
2，each()
$("button").click(function(){
$("li").each(function(){//每一个li标签都要执行这个功能
alert($(this).text())
});
});
3,end()
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<ul class="first">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<ul class="second">
<li class="foo">list item 1</li>
<li>list item 2</li>
<li class="bar">list item 3</li>
</ul>
<script>
$('ul.first').find('.foo').css('background-color', 'red')
.end().find('.bar').css('background-color', 'green');//现查找ul.first下的.foo元素，将这个样式改为背景色是红色，接着个结束这个.foo元素，回到ul.first元素，继续查找.bar的元素，修改.bar的背景色为绿色
</script>
</body>
</html>
4,eq()
$("body").find("div").eq(2).addClass("blue");//匹配body下面的div的index,这里寻找body下面的第二个div标签，再修改样式
5，filter() 方法
<!DOCTYPE html>
<html>
<head>
<style>
div { width:60px; height:60px;
margin:5px; float:left;
border:2px white solid; }
</style>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<div></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div class="middle"></div>
<div></div>
<script>
$("div").css("background", "#c8ebcc")
.filter(".middle")//过滤出所有.middle的元素
.css("border-color", "red");
</script>
</body>
</html>
注：
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
$('li').filter(':even').css('background-color', 'red');//默认设置的是奇数行的样式
$('li').filter(':odd').css('background-color', 'red');//默认设置的是偶数行的样式
6,first()
<ul> <li>list item 1</li> <li>list item 2</li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> </ul>
$('li').first().css('background-color', 'red');//匹配第一个li下面的元素
7，has()
<ul>
<li>list item 1</li>
<li>list item 2
<ul>
<li>list item 2-a</li>
<li>list item 2-b</li>
</ul>
</li>
<li>list item 3</li>
<li>list item 4</li>
</ul>
$('li').has('ul').css('background-color', 'red');//将含有ul标签的li的样式改一下
