each方法

Posted on Posted in js
Tips: 本文创建于2014年7月6日,已超过 2 年,内容或图片可能已经失效!

[code lang="html"]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<script type="text/javascript" src="jquery-2.1.0.js"></script>

<script type="text/javascript">
function f1() {
//给每个li设置不同的 背景颜色
$("li").each(
function() {
//对每个li进行相关设置
//给每个li设置不同背景色

//this 在当前内部代表每个li的dom节点对象
var clr = new Array('red', 'blue', 'green', 'purple',
'orange', 'yellow');
$(this).css('background-color',
clr[Math.floor(Math.random() * 6)]);
});

//以下情况的this才代表 $('li')
//$("li").each();
//function each(){
// this 代表调用该方法的当前对象
//}
}

function f2() {
//利用each遍历数组、对象
var clr = new Array('red', 'blue', 'green', 'purple', 'orange',
'yellow');
//$.each(clr,function(数组下标变量,值变量){
$.each(clr, function(k, v) {
console.log(k + '----' + v);
});

var cat = {
name : 'kitty',
color : 'white',
climb : function() {
alert('在爬树')
}
};
//$.each(cat,function(对象属性名称变量,属性值变量){
$.each(cat, function(m, n) {
console.log(m + "----" + n);
});
}
</script>

<style type="text/css">
div {
width: 200px;
height: 150px;
background-color: pink;
}
</style>
</head>
<body>
<h2>each遍历方法</h2>
<div id="apple"></div>
<ul>
<li>三</li>
<li>国</li>
<li>志</li>
</ul>
<input type="button" value="触发" onclick="f1()" />
<input type="button" value="遍历数组/对象" onclick="f2()" />
</body>
</html>
[/code]

» 转载请注明来源:若我若鱼 » each方法

Leave a Reply

Your email address will not be published. Required fields are marked *

one − 1 =