我之前看过教程的js然后过段时间就忘了，现在我在B站上了一个教程叫笔记写下来了
定义javascript
下面是js的用<script>标签来定义js
1
2
3
| <script type="text/javascript">
</script>
|
输出
alert()和window.alert()弹出警告窗
alert()和window.alert()是一样的只是省略
alert()是弹出警告窗口
咧
代码
1
2
3
4
5
6
7
8
9
10
11
12
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
alert("你好");
</script>
</body>
</html>
|
window.alert()
document.write()在页面中打印
document.write()在页面中输出出来
咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
document.write("你好");
</script>
</body>
</html>
|
console.log()向控制台输出
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
console.log("你好");
</script>
</body>
</html>
|
变量
在js里面用var来声明变量
语法
咧
代码
下面的代码是声明了一个a变量值是你好用alert()输出出来
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a = "你好";
alert(a);
</script>
</body>
</html>
|
数据类型
1
2
3
4
5
6
| null 空值，表示非对象
undefined 未定义的值，表示未赋值的初始化值
number 数字，数学运算的值
string 字符串，表示信息流
boolean 布尔值，逻辑运算的值
object 对象，表示复合结构的数据集
|
检查是什么数据类型用typeof 变量名
咧
下面是用typeof检查a的变量的类型
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a = "你好";
alert(typeof a);
</script>
</body>
</html>
|
类型强行转换
转换成字符串
toString()方法转
语法
1
| 数字.toString() //叫数字转换成字符串但是要赋值给其他的变量
|
咧
下面代码是叫a转换成字符串赋值给b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a = 123;
var b=a.toString();
alert(typeof b);
</script>
</body>
</html>
|
String()函数转
语法
咧
下面代码是叫a转换成字符串赋值给b
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a = 123;
var b=String(a);
alert(typeof b);
</script>
</body>
</html>
|
String()函数和toString()方法区别
toString()方法不能转换比如null等字符串但是String()函数是可以转换的
字符转换数字
Number()函数进行转换
语法
咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a = "123";
var b=Number(a);
alert(typeof b);
</script>
</body>
</html>
|
parseInt()和函数
比如一个字符串是”123px”后面有px这样直接用Number()函数就会报错
我们就可以用parseInt()来读取前面的，
咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a = "123px";
var b=parseInt(a);
console.log(typeof b);
console.log(b);
</script>
</body>
</html>
|
其他进制数
0x表示16进行
0表示8进行
0b表示2进行
咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a =0xff;
var b =055;
var c =0b10;
console.log(a);
console.log(b);
console.log(c);
</script>
</body>
</html>
|
运算符
算术运算符
赋值运算符
逻辑运算符
比较运算符
三元运算符
语法
1
| 条件(真或假)?语法1:语句2; //真执行语法1 ，假执行语句2
|
咧
下面条件是true执行语句1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
true?alert("语句1"):alert("语句2");
</script>
</body>
</html>
|
结果
Unicode编码
Unicode编码表http://www.52unicode.com/
字符串输出Unicode编码要在编码前写上\u
比如我用Unicode编码打印出来1234
代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a="\u0031\u0032\u0033\u0034";
console.log(a);
</script>
</body>
</html>
|
结果
if语句
语法
1
2
3
4
5
6
| if (条件){
当条件为 true 时执行的代码
}
else{
当条件不为 true 时执行的代码
}
|
if语句的使用和C语言一样
switch语句
语法
1
2
3
4
5
6
7
8
9
10
11
| switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
与 case 1 和 case 2 不同时执行的代码
}
|
也和C语言一样
循环语句
while循环
语法
也是和C语言的一样
do/while 循环
语法
1
2
3
4
5
| do
{
需要执行的代码
}
while (条件);
|
和C语言一样
for循环
1
2
3
4
| for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
|
和C语言一样
break和continue
break;是结束循环
continue;是结束一次循环
continue;实咧
下面但是if判断a等于2就执行continue;函数这个函数就会结束这一次循环，注意是一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
for(var a=0; a<5 ; a++ ){
if (a==2){
continue;
}
console.log(a);
}
</script>
</body>
</html>
|
结果
数组
数组定义和输出
1
| var 变量名=['a','b','c','d'];
|
使用他
实例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
console.log(a[0]);
</script>
</body>
</html>
|
数组内容修改
语法
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a[0]='e';
console.log(a[0]);
</script>
</body>
</html>
|
获得长度
语法
实咧
数组名.length他结果会输出数组里面的内容的个数
他的结果是4
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
console.log(a.length);
</script>
</body>
</html>
|
结果
输出数组最后的内容
语法
介绍.length是输出数组的内容的个数，然后我在减一就可以输出了
实咧
下面我定义了a数组用获得数组的长度然后减一
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
console.log(a[a.length-1]);
</script>
</body>
</html>
|
结果
增加数组内容
加内容也很简单
语法
介绍用length是输出数组的内容的个数，数组又是从0开始的所以就可以添加了
1
| 数组名[数组名.length]="要添加的内容"
|
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a[a.length]='e';
console.log(a[a.length-1]);
</script>
</body>
</html>
|
结果
便利数组
事例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
for(var i=0;i<=(a.length-1);i++){
console.log(a[i]);
}
</script>
</body>
</html>
|
清空数组
语法
数组内置方法
查看官方操控文档
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
常用的数组内置方法
toString()数组方法的使用
toString()数组方法他会输出数组的内容
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
console.log(a.toString());
</script>
</body>
</html>
|
push()添加到数组的末尾
push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a.push('e');
console.log(a);
</script>
</body>
</html>
|
pop()删除数组的最后一个元素
pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a.pop();
console.log(a);
</script>
</body>
</html>
|
shift() 删除第一个元素
shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a.shift();
console.log(a);
</script>
</body>
</html>
|
unshift() 添加到数组的开头
unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a.unshift('e');
console.log(a);
</script>
</body>
</html>
|
reverse()组中元素的位置颠倒
reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
a.reverse() ;
console.log(a);
</script>
</body>
</html>
|
sort()大小进行排序
sort() 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['b','a','d','e'];
a.sort() ;
console.log(a);
</script>
</body>
</html>
|
结果
concat()数组连接
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var array1 = ['a', 'b', 'c'];
var array2 = ['d', 'e', 'f'];
var array3 = array1.concat(array2);
console.log(array3);
</script>
</body>
</html>
|
slice()切割
slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['b','a','d','e','f'];
console.log(a.slice(2,4));
</script>
</body>
</html>
|
indexOf()和lastIndexOf()查询所在的位置
indexOf()是在前面开始查询
lastIndexOf()是在后面开始查询
lastIndexOf() 方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
indexOf()方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=['a','b','c','d'];
console.log(a.indexOf('b'));
</script>
</body>
</html>
|
函数
函数定义
语法
1
2
3
| function 函数名(){
执行语句。。。。。
}
|
arguments函数
arguments函数多个函数的参数
实咧
.length方法是获得他的长度的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
function add(){
console.log(arguments.length);
console.log(arguments);
}
var a='abc';
var b='def';
var c='hij';
add(a,b,c);
</script>
</body>
</html>
|
匿名函数
匿名函数就是不需要定义的函数名字叫做匿名函数
匿名函数格式
1
2
3
| function(){
执行语句。。。。。
}
|
变量调用匿名函数
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
var a=function(a,b){
console.log(a+b);
}
a(1,1);
</script>
</body>
</html>
|
自己调用匿名函数
格式
(整个函数)(参数)
实咧
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<script type="text/javascript">
(function(a,b){
console.log(a+b);
})(1,1)
</script>
</body>
</html>
|
DOM
DOM介绍
比如a.html这个a.html就是一个文档对象
下面这个是文档对象的模型
document对象就代表整个网页的对象
document基本使用
document对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问
document他是一个全局属性，在一个web页面里面那个地址都可以访问他
比如
在js里面怎么调用他
用document的getElementById的方法
1
| document.getElementById("id的值")
|
全部代码
1
2
3
4
5
6
7
8
9
10
11
12
13
| <html>
<head>
<meta charset="utf-8"/>
<title>测试</title>
</head>
<body>
<p id="a">你好啊</p>
<script type="text/javascript">
var a = document.getElementById("a")
console.log(a);
</script>
</body>
</html>
|
下面有详细的介绍
document的getElementById方法
