forked from HaoZhang95/Python24
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbasic01.html
More file actions
100 lines (78 loc) · 4.4 KB
/
basic01.html
File metadata and controls
100 lines (78 loc) · 4.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- js的三种导入方式运行环境是cript标签，css的运行环境是style -->
<!-- 1- 嵌入式写法 -->
<script>
// js 函数,js的代码分号可写可不写,建议写分号，用来js文件格式化压缩的时候(去除多余空行)，清晰分辨
// alert("Hello World...")
// <!-- js入口函数:让浏览器从上到下遇见js先跳过，先加载html，css代码，读取完成后再加载js -->
// <!-- 不然浏览器从上到下，在没有加载html，css的时候就加载js的代码 -->
// 在html,css窗口加载完毕才会执行window.onload的函数
window.onload = function () {
// 修改标签的内容, 内容的修改都是通过innerHTML
document.getElementById("box").innerHTML = "js控制的内容";
// 添加标签到父标签
document.getElementById("box").innerHTML = "<p>div内部的p标签</p>";
// 清空标签内容
// document.getElementById("box").innerHTML = "";
// 修改节点样式是通过style来修改,css的background-color在js中使用的是大驼峰backgroundColor
document.getElementById("box").style.width = "500px";
document.getElementById("box").style.background = "green";
document.getElementById("box").style.fontSize = "60px";
// 修改标签的属性,直接点属性即可,大部分html的属性名在js中是一样的,只有class属性不一样,在js中是className
document.getElementById("link").href = "https://www.baidu.com"
document.getElementById("pic").src = "xxx.jpg"
document.getElementById("pic").alt = "这是被修改的替换文字"
document.getElementById("pic").className = "box2"
// js中的变量var
var oMyLink = document.getElementById("link");
oMyLink.className = "box3"
oMyLink.className = "box3"
// js数据类型
console.log("类型是%s", typeof(1.1)); // number (不存在int,float)
console.log(typeof("Hello World")); // string
console.log(typeof(false)); // boolean
console.log(typeof(null)); // object(js中的null也是一个对象)
console.log(typeof(myObj)); // undefined
// 定义函数，js允许函数预解析,可以调用在定义之前,变量不支持预解析
// js中的与或非 && || !, python中的是单词and or not
myFunc("你好")
function myFunc(str) {
console.log("%s,函数已被调用...", str);
if (1 > 2) {
console.log("1 > 2");
} else if (1 == 2){
console.log("1 = 2");
} else {
console.log("1 < 2");
}
}
}
</script>
<!-- 2- 外链式写法，开发中使用的就是外链式,注意外链式的也必须加window.onload -->
<!-- <script src="./js/my_js.js"></script> -->
</head>
<body>
<!-- 3- 行内式js, 用于处理行内元素用户出发的事件(click, 划过等等),用户不触发不会执行 -->
<div onclick="alert('Hello World...')">测试行内js</div>
<!-- DOM文档对象模型:通过DOM自己的方式，将页面的所有标签形成一个**倒置**的树状结构图
树状结构图中查找的是节点，从而找到节点(标签,属性,方法和内容)去被js控制
Document
Head Body
metadata title h1 span h2
(每个节点的属性，方法，内容都可以被控制)
-->
<!-- DOM查找结点的方式
1- getElementById 最快的方式
-->
<div id="box">测试DOM的查找及控制内容</div>
<a href="#" id="link">这是超链接</a>
<img src="1.jpg" id="pic" alt="替换文字" class="box">
</body>
</html>