Home Explore Help
Sign In
lovecoding
/
W250511
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 2 months ago
parent
f60a689048
commit
03a4058b99
38 changed files with 92 additions and 0 deletions
Unified View Show Diff Stats
  1. 0 0
      3-JavaScript/10_基本vs引用.html
  2. 0 0
      3-JavaScript/11_循环.html
  3. 0 0
      3-JavaScript/12_Math对象.html
  4. 0 0
      3-JavaScript/13_页面交互.html
  5. 0 0
      3-JavaScript/14_switch.html
  6. 0 0
      3-JavaScript/15_函数.html
  7. 0 0
      3-JavaScript/16_变量作用域.html
  8. 0 0
      3-JavaScript/17_字符串方法.html
  9. 0 0
      3-JavaScript/18_数组内置方法.html
  10. 0 0
      3-JavaScript/19_对像.html
  11. 0 0
      3-JavaScript/1_helloworld.html
  12. 0 0
      3-JavaScript/20_真假.html
  13. 0 0
      3-JavaScript/2_变量定义.html
  14. 0 0
      3-JavaScript/3_数据类型.html
  15. 0 0
      3-JavaScript/4_基本的数学运算.html
  16. 0 0
      3-JavaScript/5_字符串基本操作.html
  17. 0 0
      3-JavaScript/6_分支判断.html
  18. 0 0
      3-JavaScript/7_随机数字.html
  19. 0 0
      3-JavaScript/8_日期对象.html
  20. 0 0
      3-JavaScript/9_引用数据类型.html
  21. 0 0
      3-JavaScript/练习10_可变图形.html
  22. 0 0
      3-JavaScript/练习11_收集数字.html
  23. 0 0
      3-JavaScript/练习12_字符串合并.html
  24. 0 0
      3-JavaScript/练习13_成绩管理.html
  25. 0 0
      3-JavaScript/练习14_对象展示.html
  26. 0 0
      3-JavaScript/练习15_综合题讲解.html
  27. 0 0
      3-JavaScript/练习1_判断两个数大小.html
  28. 0 0
      3-JavaScript/练习2_判断闰年.html
  29. 0 0
      3-JavaScript/练习3_阶层.html
  30. 0 0
      3-JavaScript/练习4_图形题.html
  31. 0 0
      3-JavaScript/练习5_三位数与四位数.html
  32. 0 0
      3-JavaScript/练习6_判断星期.html
  33. 0 0
      3-JavaScript/练习7_判断最小值.html
  34. 0 0
      3-JavaScript/练习8_357整除的数.html
  35. 0 0
      3-JavaScript/练习9_获胜率游戏.html
  36. 25 0
      4-BOM&DOM/1_DOM简介.html
  37. 37 0
      4-BOM&DOM/2_选择器.html
  38. 30 0
      4-BOM&DOM/3_修改页面内容.html

+ 0 - 0
2-JavaScript/10_基本vs引用.html → 3-JavaScript/10_基本vs引用.html
View File


+ 0 - 0
2-JavaScript/11_循环.html → 3-JavaScript/11_循环.html
View File


+ 0 - 0
2-JavaScript/12_Math对象.html → 3-JavaScript/12_Math对象.html
View File


+ 0 - 0
2-JavaScript/13_页面交互.html → 3-JavaScript/13_页面交互.html
View File


+ 0 - 0
2-JavaScript/14_switch.html → 3-JavaScript/14_switch.html
View File


+ 0 - 0
2-JavaScript/15_函数.html → 3-JavaScript/15_函数.html
View File


+ 0 - 0
2-JavaScript/16_变量作用域.html → 3-JavaScript/16_变量作用域.html
View File


+ 0 - 0
2-JavaScript/17_字符串方法.html → 3-JavaScript/17_字符串方法.html
View File


+ 0 - 0
2-JavaScript/18_数组内置方法.html → 3-JavaScript/18_数组内置方法.html
View File


+ 0 - 0
2-JavaScript/19_对像.html → 3-JavaScript/19_对像.html
View File


+ 0 - 0
2-JavaScript/1_helloworld.html → 3-JavaScript/1_helloworld.html
View File


+ 0 - 0
2-JavaScript/20_真假.html → 3-JavaScript/20_真假.html
View File


+ 0 - 0
2-JavaScript/2_变量定义.html → 3-JavaScript/2_变量定义.html
View File


+ 0 - 0
2-JavaScript/3_数据类型.html → 3-JavaScript/3_数据类型.html
View File


+ 0 - 0
2-JavaScript/4_基本的数学运算.html → 3-JavaScript/4_基本的数学运算.html
View File


+ 0 - 0
2-JavaScript/5_字符串基本操作.html → 3-JavaScript/5_字符串基本操作.html
View File


+ 0 - 0
2-JavaScript/6_分支判断.html → 3-JavaScript/6_分支判断.html
View File


+ 0 - 0
2-JavaScript/7_随机数字.html → 3-JavaScript/7_随机数字.html
View File


+ 0 - 0
2-JavaScript/8_日期对象.html → 3-JavaScript/8_日期对象.html
View File


+ 0 - 0
2-JavaScript/9_引用数据类型.html → 3-JavaScript/9_引用数据类型.html
View File


+ 0 - 0
2-JavaScript/练习10_可变图形.html → 3-JavaScript/练习10_可变图形.html
View File


+ 0 - 0
2-JavaScript/练习11_收集数字.html → 3-JavaScript/练习11_收集数字.html
View File


+ 0 - 0
2-JavaScript/练习12_字符串合并.html → 3-JavaScript/练习12_字符串合并.html
View File


+ 0 - 0
2-JavaScript/练习13_成绩管理.html → 3-JavaScript/练习13_成绩管理.html
View File


+ 0 - 0
2-JavaScript/练习14_对象展示.html → 3-JavaScript/练习14_对象展示.html
View File


+ 0 - 0
2-JavaScript/练习15_综合题讲解.html → 3-JavaScript/练习15_综合题讲解.html
View File


+ 0 - 0
2-JavaScript/练习1_判断两个数大小.html → 3-JavaScript/练习1_判断两个数大小.html
View File


+ 0 - 0
2-JavaScript/练习2_判断闰年.html → 3-JavaScript/练习2_判断闰年.html
View File


+ 0 - 0
2-JavaScript/练习3_阶层.html → 3-JavaScript/练习3_阶层.html
View File


+ 0 - 0
2-JavaScript/练习4_图形题.html → 3-JavaScript/练习4_图形题.html
View File


+ 0 - 0
2-JavaScript/练习5_三位数与四位数.html → 3-JavaScript/练习5_三位数与四位数.html
View File


+ 0 - 0
2-JavaScript/练习6_判断星期.html → 3-JavaScript/练习6_判断星期.html
View File


+ 0 - 0
2-JavaScript/练习7_判断最小值.html → 3-JavaScript/练习7_判断最小值.html
View File


+ 0 - 0
2-JavaScript/练习8_357整除的数.html → 3-JavaScript/练习8_357整除的数.html
View File


+ 0 - 0
2-JavaScript/练习9_获胜率游戏.html → 3-JavaScript/练习9_获胜率游戏.html
View File


+ 25 - 0
4-BOM&DOM/1_DOM简介.html
View File 

@@ -0,0 +1,25 @@
 
+<!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>
 
+        #btn{
 
+            color: red;
 
+        }
 
+
 
+    </style>
 
+</head>
 
+<body>
 
+    <button id="btn">按钮</button>
 
+    <script>
 
+        // DOM DOM (Document Object Model) 
+        // 浏览器预留给js的一方法 用于操作文档 整个页面就是一个文档
 
+        var btn = document.getElementById("btn");
 
+        btn.onclick = function(){
 
+            alert("hello world");
 
+        }
 
+    </script>
 
+</body>
 
+</html>

+ 37 - 0
4-BOM&DOM/2_选择器.html
View File 

@@ -0,0 +1,37 @@
 
+<!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 class="div1" id="box">hello world</div>
 
+    
+    <div class="div1">你好世界</div>
 
+    <span>a</span>
 
+    <span>b</span>
 
+    <script>
 
+        // 选择器
 
+        // 当我们要控制页面当中某一个元素（标签）的时候，第一步先要获取到这个标签
 
+        
+        // id选择器
 
+        // 返回的是一个单个元素
 
+        var box = document.getElementById("box");
 
+        console.log(box);
 
+
 
+        // 类选择器
 
+        // 获取到的是一个 HTMLCollection （html的集合） 类数组（类似于数组）并不是真实的数组
 
+        // 因为类名允许出重复多次所有返回的是一个集合
 
+        var div1 = document.getElementsByClassName("div1");
 
+        console.log(div1);
 
+
 
+        // 标签选择器
 
+        // 获取到的是一个 HTMLCollection （html的集合） 类数组（类似于数组）并不是真实的数组
 
+        // 因为标签名允许出重复多次所有返回的是一个集合
 
+        var aSpan = document.getElementsByTagName("span");
 
+        console.log(aSpan);
 
+        console.log(aSpan[1]);
 
+    </script>
 
+</body>
 
+</html>

+ 30 - 0
4-BOM&DOM/3_修改页面内容.html
View File 

@@ -0,0 +1,30 @@
 
+<!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>
 
+        hello world
 
+    </div>
 
+    <script>
 
+        // 修改hello world 为 你好世界
 
+        // 第一步 一定要先获取到 要操控标签
 
+        var oDiv = document.getElementsByTagName("div");
 
+
 
+        // 第二部修改内部文字 innerText 仅应用于修改文本
 
+        // 注意：如果是通过类名或标签名获取的标签返回的是一个类数组
 
+        // 没有办法直接对一个整个数组进行操作
 
+        // 只能对一个单独的元素进行操作 所以要取出操作的标签
 
+
 
+        // oDiv[0].innerText = "你好世界";
 
+
 
+        // 修改需求向div 中加入一个h1标签并把文字放到标签内
 
+        // 修改内部的标签 innerHTML 既可以修改文本也可以修改标签
 
+        oDiv[0].innerHTML = "<h1>你好世界</h1>";
 
+
 
+    </script>
 
+</body>
 
+</html>