fengchuanyu 1 week geleden
bovenliggende
commit
1473e9d813
3 gewijzigde bestanden met toevoegingen van 86 en 0 verwijderingen
  1. 13 0
      4_BOM&DOM/1_BOM_localtion.html
  2. 33 0
      4_BOM&DOM/2_BOM_定时函数.html
  3. 40 0
      4_BOM&DOM/3_DOM_js选择器.html

+ 13 - 0
4_BOM&DOM/1_BOM_localtion.html

@@ -0,0 +1,13 @@
+<!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>
+        console.log(window.location);
+    </script>
+</body>
+</html>

+ 33 - 0
4_BOM&DOM/2_BOM_定时函数.html

@@ -0,0 +1,33 @@
+<!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>
+        // 定时函数
+        // setTimeout 第一个参数是一个函数 第二个参数是一个时间 毫秒为单位
+        // setTimeout 还是 alert 都是BOM中的方法 都是以window开头的 但是我们可以省略window
+        // setTimeout 会返回一个定时器的ID 可以通过这个ID来取消定时器
+        // setTimeout(function(){
+        //     alert("定时器到点了");
+        // },3000);
+        // clearTimeout 用来取消一个通过setTimeout创建的定时器 需要传入一个定时器ID
+
+        // setInterval 第一个参数是一个函数 第二个参数是一个时间 毫秒为单位
+        // setInterval 会返回一个定时器的ID 可以通过这个ID来取消定时器
+        var intervalId = setInterval(function(){
+            console.log("每隔2秒打印一次");
+        },2000);
+        var intervalId2 = setInterval(function(){
+            console.log("每隔2秒打印一次");
+        },2000);
+        // clearInterval 用来取消一个通过setInterval创建的定时器 需要传入一个定时器ID
+        clearInterval(intervalId2);
+
+        // setTimeout 和 setInterval 都是定时函数setTimeout只会执行一次 而setInterval会重复执行 
+    </script>
+</body>
+</html>

+ 40 - 0
4_BOM&DOM/3_DOM_js选择器.html

@@ -0,0 +1,40 @@
+<!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>
+        #p1 {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    <h1>hello world</h1>
+    <h1>你好世界</h1>
+    <div class="box1">box1</div>
+    <p id="p1">这是一个p标签1</p>
+    <!-- id不允许重复 -->
+    <!-- <p id="p1">这是一个p标签2</p> -->
+
+    <script>
+        // 通过标签名获取元素
+        // 返回的是一个HTMLCollection 类数组对象 需要通过下标来获取具体的某一个元素
+        // 类数组对象并不是真正的数组只是类似一个数组,不能使用数组的方法 但是可以通过下标和length属性来获取对应的元素和长度
+        var oH1 = document.getElementsByTagName("h1");
+        // console.log(oH1[0]);
+        // console.log(oH1);
+
+        // 通过类名获取元素
+        // 返回的是一个HTMLCollection 类数组对象 需要通过下标来获取具体的某一个元素
+        var oBox1 = document.getElementsByClassName("box1");
+        console.log(oBox1[0]);
+
+        // 通过id获取元素
+        // 返回的是真正的元素对象 不是类数组 不需要通过下标获取
+        var oP1 = document.getElementById("p1");
+        console.log(oP1); 
+    </script>
+</body>
+</html>