Acasă Explorează Ajutor
Autentificare
lovecoding
/
W260426
8
0
Bifurcare 0
Fisiere Probleme 0 Trageți solicitările 0 Wiki
Răsfoiți Sursa

admin

fengchuanyu 14 ore în urmă
părinte
2d1b1ac050
comite
43a9057ee3
10 a modificat fișierele cu 105 adăugiri și 4 ștergeri
Vizualizare divizată Arată Statisticile Diff
  1. 3 3
      2_CSS/27_浮动.html
  2. 1 0
      2_CSS/css/login.css
  3. 1 0
      3_JavaScript/14_循环.html
  4. 1 0
      3_JavaScript/25_时间对象.html
  5. 2 0
      4_BOM&DOM/1_认识BOM&DOM.html
  6. 2 1
      4_BOM&DOM/3_DOM如何控制内容.html
  7. 28 0
      4_BOM&DOM/5_控制样式.html
  8. 29 0
      4_BOM&DOM/6_鼠标右键.html
  9. 15 0
      4_BOM&DOM/7_获取整个文档.html
  10. 23 0
      4_BOM&DOM/8_事件对象.html

+ 3 - 3
2_CSS/27_浮动.html
Vizualizați fișierul 

@@ -15,15 +15,15 @@
 
             line-height: 200px;
 
             /* display: inline-block; */
 
             /* float 表示浮动 可以将块元素横向排列 两个值：left向左 right向右 none不浮动 */
 
-            /* float: right; */
 
+            float: right;
 
 
         }
 
     </style>
 
 </head>
 
 <body>
 
     <!-- 浮动元素会脱离文档流 -->
 
-     <!-- 文档流：正常的文档排列顺序 -->
 
-      <!-- 脱离文档流会导致父元素高度塌陷 -->
 
+    <!-- 文档流：正常的文档排列顺序 -->
 
+    <!-- 脱离文档流会导致父元素高度塌陷 -->
 
     <div class="box">1</div>
 
     <div class="box">2</div>
 
     <div class="box">3</div>

+ 1 - 0
2_CSS/css/login.css
Vizualizați fișierul 

@@ -222,6 +222,7 @@ li{
 
     color: #999;
 
     font-size: 12px;
 
 }
 
+/*  */

+ 1 - 0
3_JavaScript/14_循环.html
Vizualizați fișierul 

@@ -72,6 +72,7 @@
 
         //     }
 
         // }
 
         
+        // 循环中如果没有{}也可以 后边第一条语句是循环体的代码
 
         for(var i=0;i<arr.length;i++) 
         console.log(arr[i]);
 
         console.log("hello world");

+ 1 - 0
3_JavaScript/25_时间对象.html
Vizualizați fișierul 

@@ -32,6 +32,7 @@
 
 
         // Number对象
 
         var a = 10;
 
+        // toString 方法可以将数字转换为字符串 还可以 + ""
 
         console.log(a.toString());
 
     </script>
 
 </body>

+ 2 - 0
4_BOM&DOM/1_认识BOM&DOM.html
Vizualizați fișierul 

@@ -63,6 +63,8 @@
 
         console.log(timer2);
 
         clearInterval(timer2);
 
 
+        // window 下的 Document对象 用于操作HTML文档
 
+        // 称为 DOM 文档对象模型
 
     </script>
 
 </body>
 
 </html>

+ 2 - 1
4_BOM&DOM/3_DOM如何控制内容.html
Vizualizați fișierul 

@@ -24,7 +24,8 @@
 
 
 
         // 2、通过元素对象的innerHTML属性来控制元素的内容
 
-
 
+        // innerHTML属性可以设置元素的内容，也可以获取元素的内容
 
+        // innerHTML属性可以控制标签内容可以当作标签操作
 
         var oDiv = document.getElementsByTagName("div")[0];
 
 
         // oDiv.innerText = "<h1>world</h1>";

+ 28 - 0
4_BOM&DOM/5_控制样式.html
Vizualizați fișierul 

@@ -0,0 +1,28 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <button id="btn">按钮</button>
 
+    <script>
 
+        // 获取元素
 
+        var box = document.getElementById("box");
 
+        var btn = document.getElementById("btn");
 
+
 
+        // 绑定事件
 
+        btn.onclick = function(){
 
+            // 控制样式 style 要控制样式的元素.style.样式名 = 样式值;
 
+            // 样式名称与css中的样式名称保持一致 值的部分为字符串
 
+            // 如果样式名称中出现"-",则要将"-"替换为驼峰命名法
 
+            // 其实js控制标签样式是通过style属性（内联样式）来实现的
 
+            box.style.height = "200px";
 
+            box.style.width = "200px";
 
+            box.style.backgroundColor = "red";
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 29 - 0
4_BOM&DOM/6_鼠标右键.html
Vizualizați fișierul 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        #box{
 
+            width: 200px;
 
+            height: 200px;
 
+            background-color: pink;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="box"></div>
 
+    <script>
 
+        // 获取元素
 
+        var box = document.getElementById("box");
 
+        // 绑定事件
 
+        // 鼠标右键点击事件 contextmenu
 
+        box.oncontextmenu = function(){
 
+            console.log("鼠标右键点击了");
 
+            // 阻止默认事件
 
+            return false;
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 15 - 0
4_BOM&DOM/7_获取整个文档.html
Vizualizați fișierul 

@@ -0,0 +1,15 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 获取整个文档
 
+        var doc = document.documentElement;
 
+        console.log(doc);
 
+    </script>
 
+</body>
 
+</html>

+ 23 - 0
4_BOM&DOM/8_事件对象.html
Vizualizați fișierul 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <script>
 
+        // 获取整个页面
 
+        var doc = document.documentElement;
 
+        // 任何事件中都会有事件对象 通过事件处理函数中的参数或
 
+        doc.onclick = function(event){
 
+            // 事件对象中包含了很多信息
 
+            // 例如：鼠标点击的位置、鼠标点击的元素等
 
+            // clientX 代表的是鼠标点击的水平坐标点
 
+            // clientY 代表的是鼠标点击的垂直坐标点
 
+            console.log(event.clientX);
 
+            console.log(event.clientY);
 
+        }
 
+    </script>
 
+</body>
 
+</html>