【汇智学堂】js/jQuery使用事件之一
原创
©著作权归作者所有:来自51CTO博客作者wx622c0209dfb71的原创作品,请联系作者获取转载授权,否则将追究法律责任
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script type="text/javascript" src="js/js1.js"></script>-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/css1.css">
<script>
$(document).ready(function () {
$("input:eq(0)").click(function () {
$("p").each(function () {
var parts=$(this).html().split(" ");
$(this).css({"font-size":parts[1]+"px",color:parts[0]});
});
});
$("input:eq(1)").click(function () {
var items=$("p").map(function (value) {
var parts=$(this).html().split(" ");
return {color:parts[0],size:parts[1]};
}).get();
for(var idx in items){
var item=items[idx];
var span=$("<span>"+item.color+"</span>");
var size=item.size*5;
span.css({
"background-color":item.color,
"font-size":item.size+"px",
width:size,
height:size
});
$("div").append(span);
}
});
});
</script>
</head>
<body>
<input type="button" value=".each()">
<input type="button" value=".map()">
<p>red 15</p>
<p>blue 30</p>
<p>gray 20</p>
<p>black 40</p>
<p>yellow 15</p>
<p>green 35</p>
<div></div>
</body>
</html>
p{margin: 0;padding:0}
span{
display: inline-block;
color:white;
text-align: center;
}