Skip to content

Commit 19040f2

Browse files
committed
处女提交
1 parent ad95296 commit 19040f2

File tree

137 files changed

+6685
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

137 files changed

+6685
-0
lines changed

.idea/.gitignore

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/.name

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/copyright/cyb.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/copyright/profiles_settings.xml

+7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/inspectionProfiles/Project_Default.xml

+44
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/misc.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/modules.xml

+8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

.idea/vcs.xml

+6
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

HTML.iml

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<module type="JAVA_MODULE" version="4">
3+
<component name="NewModuleRootManager" inherit-compiler-output="true">
4+
<exclude-output />
5+
<content url="file://$MODULE_DIR$">
6+
<sourceFolder url="file://$MODULE_DIR$/src" isTestSource="false" />
7+
</content>
8+
<orderEntry type="inheritedJdk" />
9+
<orderEntry type="sourceFolder" forTests="false" />
10+
</component>
11+
</module>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>根据id获取页面中的某个节点</title>
6+
</head>
7+
<body>
8+
9+
<!-- 脚本快 -->
10+
<script type="text/javascript">
11+
function getDivElt(){
12+
/* 获取div节点对象 */
13+
/*
14+
document对象是JS内置的对象,全部小写,可以直接拿来使用。
15+
document对象代表的是浏览器窗口中的网页(文档)
16+
DOM树:
17+
对于document来说是一个HTML文档。
18+
对于这个文档来说我们称为DOM树。
19+
DOM树上有很多节点,每一个节点都有ID属性。
20+
获取DOM树上的一个节点,可以根据id来获取。
21+
22+
23+
window对象是JS内置的对象,全部小写,可以直接拿来使用。
24+
window对象代表当前浏览器窗口。
25+
*/
26+
var mydivElt = document.getElementById("mydiv");
27+
console.log(mydivElt);
28+
29+
var usernameElt = document.getElementById("username");
30+
console.log(usernameElt);
31+
}
32+
</script>
33+
34+
<!-- div节点对象 -->
35+
<div id="mydiv">我是一个div对象</div>
36+
37+
<!-- input输入域 -->
38+
39+
<input type="text" id="username" />
40+
41+
<input type="button" value="获取div节点元素" onclick="getDivElt()"/>
42+
</body>
43+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>获取或设置div中的内容</title>
6+
</head>
7+
<body>
8+
9+
<!--
10+
11+
innerHTML:这是一个属性,不是一个函数。
12+
13+
innerHTML有两个作用:
14+
1. 获取元素内部的内容。
15+
2. 设置元素内部的内容。
16+
-->
17+
<script type="text/javascript">
18+
function getContent(){
19+
// 在这里获取div的内容
20+
// 首先要获取div,之后在获取其中的内容。
21+
// 获取div
22+
var divElt1 = document.getElementById("mydiv1");
23+
// 获取div中的内容
24+
// innerHTML是一个非常重要的属性,它可以获取也可以设置元素内部的内容。
25+
// 这个是获取div1中的内容
26+
/* console.log(divElt1.innerHTML); */
27+
/* console.log(divElt1.innerHTML); */
28+
// 下边的是获取div2
29+
var divElt2 = document.getElementById("mydiv2");
30+
31+
/*
32+
下边这行代码的让mydiv2输出固定的值 即固定。。。
33+
divElt2.innerHTML = "固定。。。"*/
34+
// 这行代码的含义 :将mydiv1中的内容赋值给mydiv2。
35+
divElt2.innerHTML = divElt1.innerHTML;
36+
}
37+
</script>
38+
39+
<!-- div元素 -->
40+
<div id="mydiv1">
41+
hello ,jack, welcome yo china!
42+
</div>
43+
44+
<!-- 书写第二个div -->
45+
<div id="mydiv2" style="background-color: aqua;" >
46+
47+
</div>
48+
49+
<!-- 按钮 -->
50+
<input type="button" value="获取div中的内容" onclick="getContent()" />
51+
</body>
52+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JS的事件</title>
6+
</head>
7+
<!-- load事件在什么时候发生?在页面元素全部加载完毕之后才会发生。 -->
8+
<body onload="console.log('页面加载完毕了,load事件发生了!')">
9+
<!--
10+
JS中有哪些常见的事件:
11+
(1) blur失去焦点
12+
(2) change下拉列表选中项改变,或文本框内容改变
13+
(3) click鼠标单机
14+
(4) dblclick鼠标双击
15+
(5) focus获得焦点
16+
(6) keydown键盘按下
17+
(7) keyup键盘弹起
18+
(8) load页面加载完毕
19+
(9) mousedown鼠标按下
20+
(10) mouseover鼠标经过
21+
(11) mousemove鼠标移动
22+
(12) mouseout鼠标离开
23+
(13) mouseup鼠标弹起
24+
(14) reset表单重置
25+
(15) select文本被选定
26+
(16) submit表单提交
27+
-->
28+
blur事件:<input type="text" onblur="console.log('失去焦点了!')"/>
29+
<br>
30+
31+
<!-- change事件:下拉列表项被改变时发生-->
32+
change事件:
33+
<select name="garde" onchange="console.log('下拉列表发生改变了')">
34+
<option value="gz">高中</option>
35+
<option value ="zk">专科</option>
36+
<option value ="bk">本科</option>
37+
</select>
38+
<br>
39+
40+
dblclick事件:
41+
<input type="button" value="鼠标双击" ondblclick="console.log('鼠标双击了!')"/>
42+
<br>
43+
44+
focus事件:
45+
<input type="text" onfocus="console.log('获取到了焦点!')"/>
46+
<br>
47+
48+
keydown和keyup事件:
49+
<input type="text" onkeydown="console.log('键盘按下了')" onkeyup="console.log('键盘弹起了')"/>
50+
<br>
51+
52+
mousemove鼠标移动:
53+
<input type="text" onmousemove="console.log('鼠标移动了!')"/>
54+
<br>
55+
56+
mouseout鼠标离开:
57+
<input type="button" onmouseout="console.log('鼠标离开了!')"/>
58+
59+
60+
</body>
61+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JS中的函数不存在重载</title>
6+
</head>
7+
<body>
8+
<script type="text/javascript">
9+
/* 以下代码测试JS函数可不可以重载 */
10+
11+
/* 声明第一个函数:存在两个参数 */
12+
function test1(a,b){
13+
alert("test1(a,b)");
14+
}
15+
16+
/* 声明第二个函数,和第一个函数的函数名相同,只是参数列表不用,
17+
测试JS函数能不能重载
18+
*/
19+
function test1(){
20+
alert("test1()");
21+
}
22+
23+
// 调用函数
24+
test1(1,2); // 显示的结果为:test1()
25+
26+
/*
27+
重点:
28+
在JS中,函数不会重载,上边结果之所以那么显示,不是因为就近原则的存在
29+
而是在JS中,如果声明两个同名的函数,那么第二个函数会替代第一个函数,
30+
这里只的并不是覆盖,而是第一个函数会消失,只剩第二个函数
31+
32+
注意:
33+
在编写JS函数名的时候,谨慎一些,以放将其他的函数删除掉。
34+
*/
35+
36+
</script>
37+
38+
<!-- 显示的结果是 :test1(),说明在JS中函数不呢个进行重载。 -->
39+
<input type="button" value="重载" onclick="test1(111,222)"/>
40+
41+
42+
</body>
43+
</html>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>JS变量</title>
6+
</head>
7+
<body>
8+
<script type="text/javascript">
9+
/* JS中声明变量使用var */
10+
11+
/*
12+
Java语言是一种强类型语言:
13+
Java语言在定义变量的时候必须指定变量的数据类型。
14+
int i = 100;
15+
在Java中,变量的数据类型在编译阶段确定下来了。
16+
Java中的变量i一旦声明为int类型,这一辈子只能是int类型。不能在变为其他类型。
17+
18+
JavaScript是一种弱类型语言 :
19+
JavaScript不需要编译,是脚本语言,直接浏览器打开执行。
20+
而且JavaScript定义变量的时候不需要指定数据类型。
21+
例如 :
22+
var i;
23+
var j;
24+
var k;
25+
并且JS中的变量可以赋值任何类型的值。
26+
JS中的变量是一个万能的口袋。什么类型的数据都能放进去。
27+
28+
*/
29+
// JS的变量怎么定义呢?
30+
// 语法格式 :var 变量名
31+
// JS的变量如何赋值呢?
32+
// 变量名 = 值
33+
34+
// 定义一个age变量
35+
var age;
36+
37+
// 变量没有赋值的时候默认值是undefined
38+
// undefined是JS中的一个具体存在的值,系统的默认值。
39+
// 以下的这行代码表示将数据输出到控制台上(控制台怎么调出来?F12)
40+
41+
console.log(age)
42+
43+
// 给age变量赋值
44+
age = 20;
45+
console.log("age = " + age);
46+
47+
// age可以赋值一个布尔类型的数据嘛?
48+
age = false;
49+
console.log("age = " + age);
50+
51+
age = 3.14;
52+
console.log("age = " + age);
53+
54+
55+
age = "abc";
56+
console.log("age = " + age);
57+
58+
age = 'text';
59+
console.log("age = " + age);
60+
61+
// 声明变量的同时赋值
62+
var k = 20;
63+
console.log("age = " + k);
64+
65+
// 一行上声明多个变量
66+
var x,y,z = 300;
67+
console.log("x的值为 :" + x); // x的值为:undefined
68+
console.log("y的值为 :" + y); // y的值为:undefined
69+
console.log("z的值为 :" + z); // z的值为:300
70+
71+
var username = "zhangsan";
72+
console.log("username = " + username); // username = zhangsan
73+
</script>
74+
</body>
75+
</html>

0 commit comments

Comments
 (0)