jQuery ?? ??()
jQuery? $() ???? ?? ??? ?? ???? ?? ? ??? ??? ??? ? ?? ??? ?????. ?? ?? $("li").css('') ?? li? ?? ??? ?? ?????. jQuery? ??? ????? CSS ???? ??? ?? ???? ????? ?? ?? ??? ?? ?????? ???. ???? ? li? ?? ??? ??? ???? ?? ??? ???? Each
???.each() ???? for ?? ????? jQuery ?? ???? ? DOM ??? ?????. ?? ??? ??? ??? ?? ?? ?? ????? ?????(0?? ??)
??? ????? 3?? ?? ??? ?????.
??? for ??? ?? ??????.
??? ??? ?? ?????. 2?? ??? ?? ????? ???? ??? ????. ?? ? ?? ????? ?? ??? dom ??? ?????. <li>php.cn</li> ;li>Aaron</li>
</ul>
li ??? ???? 2? ?????
$("li").each(function(index, element) {
??? ??? 0,1
?? ?? li ?? li,li
??? li
})
??? ??? ???:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.left {
width: auto;
height: 150px;
}
.left div {
width: 150px;
height: 120px;
padding: 5px;
margin: 5px;
float: left;
background: #bbffaa;
border: 1px solid #ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>each方法</h2>
<div class="left first-div">
<div class="div">
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
</div>
<div class="div">
<ul>
<li>list item 4</li>
<li>list item 5</li>
<li>list item 6</li>
</ul>
</div>
</div>
<br/>
<button>點(diǎn)擊：each方法遍歷元素</button>
<button>點(diǎn)擊：each方法回調(diào)判斷</button>
<script type="text/javascript">
$("button:first").click(function() {
//遍歷所有的li
//修改每個li內(nèi)的字體顏色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
</script>
<script type="text/javascript">
$("button:last").click(function() {
//遍歷所有的li
//修改偶數(shù)li內(nèi)的字體顏色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
})
})
</script>
</body>
</html>
