each方法的应用

JsAaron · JsAaron · commit 0f68a9857877 · 2015-10-23T10:15:56.000+08:00
diff --git a/慕课网教程案例/jQuery入门教程/jQuery核心/each方法的应用.html b/慕课网教程案例/jQuery入门教程/jQuery核心/each方法的应用.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+    <title></title>
+    <style>
+    p {
+        color: red;
+    }
+    div{
+        width:200px; 
+        height: 100px; 
+        background-color: yellow;
+        color:red;
+    }
+    </style>
+    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
+</head>
+
+<body>
+    <h2>each方法</h2>
+    <p>慕课网,专注分享</p>
+    <div id="aaron"></div>
+    点击观察结果：
+    <select id="animation">
+        <option value="1">each数组</option>
+        <option value="2">each对象</option>
+    </select>
+    <input id="exec" type="button" value="执行动画">
+    <script type="text/javascript">
+    $("#exec").click(function() {
+        var v = $("#animation").val();
+        var $aaron = $("#aaron");
+        $aaron.empty();
+        if (v == "1") {
+
+            // 遍历数组元素
+            $.each(['Aaron', '慕课网'], function(i, item) {
+                $aaron.append("索引=" + i + "; 元素=" + item);
+            });
+        } else if (v == "2") {
+            // 遍历对象属性
+            $.each({
+                name: "张三",
+                age: 18
+            }, function(property, value) {
+                $aaron.append("属性名=" + property + "; 属性值=" + value);
+            });
+        } 
+    });
+    </script>
+</body>
+
+</html>
