JavaScript入门
1、什么是javascript
2、快速入门
2.1、引入javaScript
1、内部标签
1
2
3
| <script>
js代码块
</script>
|
2、外部引入
hello.js
1
2
| alert("hello,world");
alert("😣✅❌");
|
helloword.html
1
2
3
4
5
6
|
<script src="js/hello.js"></script>
<script type="text/javascript"></script>
|
2.2、基本语法入门
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var score = 71;
if(score>60 && score<70){
alert("60~70");
}else if (score>70 && score<80){
alert("70~80");
}else {
alert("other");
}
</script>
</head>
<body>
</body>
|
浏览器必备调试须知：
2.3、数据类型
数值，文本，图形，音频，视频
==变量==
==number==
1
2
3
4
5
6
| 123
123.1
1.123e3
-99
NaN
Infinity
|
==字符串==
==布尔值==
==逻辑运算符==
==比较运算符==
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
- NaN === NaN，这个与所有的数值都不相等，包括自己
- 只能通过isNaN（NaN）来判断这个数是否是NaN
浮点数问题
1
| console.log((1/3) === (1-2/3));
|
尽量避免使用浮点数进行运算，存在精度问题！
1
| Math.abs(1/3-(1-2/3))<0.00000001
|
==null 和 undefined==
==数组==
Java的数组必须是相同类型的对象~，JS中不需要这样
1
2
3
4
|
var arr = [1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello');
|
取数字下标：如果越界了，就会 报undefined
==对象==
对象是大括号，数组是中括号
每个属性之间使用逗号隔开，最后一个属性不需要逗号
1
2
3
4
5
6
7
|
var person = {
name:'Tom',
age:3,
tags:['js','java','web','...']
}
|
取对象值
1
2
3
4
| person.name
> "Tom"
person.age
> 3
|
2.4、严格检查模式
前提：IDEA 设置中JavaScript开启支持ES6语法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
'use strict';
let i = 1;
</script>
<body>
</body>
</html>
|
3、数组类型
3.1、字符串
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
'use strict';
console.log('a\'');
console.log('a\nb');
console.log('a\tb');
console.log('\u4e2d');
console.log('\x41');
let a=`
你好
hh
我的厉害
`
let name = '刘hanhan'
let msg = `你好呀：${name}`;
console.log(`字符串长度：${name.length}`);
console.log("转化大写："+name.toUpperCase());
console.log("转化小写："+name.toLowerCase());
console.log("获取："+name.indexOf("刘"));
console.log("截取："+name.substring(1));
console.log("截取："+name.substring(1,4));
</script>
<body>
</body>
</html>
|
3.2、数组
数组：存储数据（如何存，如何取，方法都可以自己实现！）
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'
let arr = [1,2,3,4,5,6];
console.log(arr.length);
arr.length = 10;
console.log(arr.length);
console.log(arr[9]);
arr.length = 2;
console.log(arr);
console.log(arr.indexOf(2));
console.log(arr.slice(1))
console.log(arr.slice(0,1))
arr.push("a","b","c");
arr.pop();
arr.pop();
arr.unshift("a","b","c");
arr.shift();
arr.shift();
arr.sort();
arr.reverse();
let arr2 = arr.concat([1,2,3]);
console.log(arr.join("_"));
let arr3 = [[1,2],['a','b'],[4,3]];
console.log(arr3[2][1])
arr3.fill(1);
</script>
</head>
<body>
</body>
</html>
|
3.3、对象
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
'use strict'
let person = {
name : "小王",
age : 12,
score : 60
};
person.name;
person.age = 18;
person.emal;
delete person.score;
person.emal = "12@qq.com";
'age' in person;
'toString' in person;
per.hasOwnProperty("age");
per.hasOwnProperty("toString");
</script>
</body>
</html>
|
3.4、流程控制
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var score = 71;
if(score>60 && score<70){
alert("60~70");
}else if (score>70 && score<80){
alert("70~80");
}else {
alert("other");
}
let age = 3;
while (age<80){
age++;
}
do{
age++;
} while (age<50)
alert(age);
for (let i = 0; i < 3; i++) {
alert(i);
}
var arr = [2,4,6,"a"];
arr.forEach(function (value) {
console.log(value)
})
for (let index in arr){
console.log(arr[index]);
}
for (let index of arr){
console.log(index);
}
</script>
</body>
</html>
|
3.5、Map和Set集合
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
'use strict'
let map = new Map([['tom',100],['jack',90],['hanhan',70]]);
var score = map.get('tom');
console.log(score);
map.set('yuji',40);
map.delete('hanhan');
let set = new Set([2,1,11,1,1,1]);
set.add(6);
set.delete(2);
set.has(1);
let arr = Array.from(set);
set.forEach(function (value) {
})
map.forEach(function (value,key) {
})
for(let i of set){
}
for(let i of map){
}
</script>
<body>
</body>
</html>
|
4、函数
4.1、函数
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict'
function abc(x) {
if(x>=0){
return x;
}else {
return -x;
}
}
var abs = function(x){
if(typeof x != 'number'){
throw 'Not a number';
}
if(x>=0){
return x;
}else {
return -x;
}
}
var abd = function(x){
console.log('x==>'+x);
console.log(arguments)
for (let i in arguments){
console.log(arguments[i]);
}
if(x>=0){
return x;
}else {
return -x;
}
}
var abq = function(x,y,...rest){
console.log('x==>'+x);
console.log('y==>'+y);
console.log(rest);
}
</script>
</head>
<body>
</body>
</html>
|
4.2、变量的作用域
js变量：
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function a() {
var x = 1;
function b() {
var y = x + 1;
}
var z = y + 1;
}
function b() {
var x = "x" + y;
console.log(x);
var y = "y";
}
var x = 'xxx';
alert(x);
alert(window.x);
window.alert('alert');
tc = window.alert;
tc('hhhhh');
var liuRenWei = {};
liuRenWei.name = '刘仁伟';
liuRenWei.add = function (a,b) {
return a + b;
}
function f() {
for (var i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+10);
}
function q() {
for (let i = 0; i < 10; i++) {
console.log(i);
}
console.log(i+10);
}
const PI = 3.14;
console.log(PI);
</script>
<body>
</body>
</html>
|
4.3、方法
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
var liurenwei = {
name: '刘仁伟',
birth: '2000',
age: function () {
var now = new Date().getFullYear();
return now - this.birth;
}
};
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
};
var liurenwei2 = {
name: '刘仁伟',
birth: '2000',
age: getAge
};
console.log(getAge.apply(liurenwei2,[]));
</script>
<body>
</body>
</html>
|
5、内部对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| /* typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined" */
|
5.1、Date
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var date = new Date();
date.getFullYear();
date.getMonth();
date.getDate();
date.getDay();
date.getHours();
date.getMinutes();
date.getSeconds();
date.getTime();
console.log(new Date(1617096485343));
var date1 = new Date()
date1.toDateString()
date1.toGMTString()
date1.toLocaleString()
date1.toTimeString()
</script>
</head>
<body>
</body>
</html>
|
5.2、JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var user = {
name: '刘仁伟',
age: 18,
sex: '男'
}
var jsonUser = JSON.stringify(user);
JSON.parse(jsonUser);
</script>
</head>
<body>
</body>
</html>
|
5.3、AJAX
- 原生的js写法 xhr异步请求
- jQuery封装好的方法$(#name).ajax(“”)
- axios请求
6、面向对象编程
6.1、原型继承
原型：在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。
原型链理解：在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对象之间的继承关系，在JavaScript中是通过prototype对象指向父类对象，直到指向Object对象为止，这样就形成了一个原型指向的链条，专业术语称之为原型链。
当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用。如果没有则去原型的原型中寻找,直到找到Object对象的原型，Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined。
Object是JS中所有对象数据类型的基类(最顶层的类)在Object.prototype上没有__proto__这个属性。
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var Student = {
name: 'liurenwei',
age: 3,
run: function () {
console.log(this.name+ " run... .. .")
}
};
var Xiaoming = {
name: 'xiaoming'
};
Xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name+ " fly... .. .")
}
};
Xiaoming.__proto__ = Bird;
</script>
</head>
<body>
</body>
</html>
|
6.2、class继承
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script>
function Teacher(name) {
this.name = name;
}
Teacher.prototype.hello = function () {
alert('hello');
}
var teacher = new Teacher("花木兰");
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert('hello');
}
}
class Smallstu extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
world(){
alert("小朋友");
}
}
var liurenwei = new Student("liurenwei");
var xiaoming = new Smallstu("xiaoming",12);
</script>
<body>
</body>
</html>
|
本质：查看对象原型
原型链
7、操作BOM对象（重点）
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.alert('1');
window.innerHeight;
window.innerWidth;
window.outerHeight;
window.outerWidth;
window.confirm("带确认的对话框!")
window.prompt('请输入您的姓名:')
window.setTimeout(function () {
console.log(`执行定时器，当前时间是：${new Date()}`)
}, 2000)
navigator.appName;
navigator.appVersion;
navigator.userAgent;
navigator.language;
navigator.platform;
screen.width;
screen.height;
screen.colorDepth;
location.protocol;
location.host;
location.port;
location.pathname;
location.search;
location.hash;
location.assign('http://www.baidu.com');
location.reload();
location.href;
location.href = "http://www.baidu.com";
location.replace('//jd.com')
document.title;
document.title = '刘仁伟';
document.cookie;
history.back();
history.forward();
</script>
</head>
<body>
</body>
</html>
|
8、操作DOM对象（重点）
8.1、获取DOM节点
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<h1>title</h1>
<p id="p1">内容</p>
<p class="p2">内容</p>
</div>
<script>
let back = document.querySelector('#back')
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var div = document.getElementById("div");
var childrens = div.children;
div.firstChild;
div.lastChild;
</script>
</body>
</html>
|
8.2、更新DOM节点
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<script>
var div1 = document.getElementById("div1");
div1.innerText = '哈哈哈哈';
div1.innerHTML = '<strong>哈哈哈哈</strong>';
var div2 = document.getElementById("div2");
div2.style.color = 'red';
div2.style.fontSize = '15';
div2.style.marginLeft = '2em';
</script>
</body>
</html>
|
8.3、删除DOM节点
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div">
<h1>title</h1>
<p id="p1">内容1</p>
<p class ="p2">内容2</p>
</div>
<script>
var h1 = document.getElementsByTagName("h1");
var p1 = document.getElementById("p1");
var p2 = document.getElementsByClassName("p2");
var div = document.getElementById("div");
var father = p1.parentElement;
father.removeChild(p1);
father.removeChild(p2[0]);
father.removeChild(father.children[0]);
</script>
</body>
</html>
|
8.4、创建和插入DOM节点
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="js">javaScript</p>
<p id="jq">jquery</p>
<div id = 'list'>
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
var list = document.getElementById("list");
var js = document.getElementById("js");
var jq = document.getElementById("jq");
var se = document.getElementById("se");
var ee = document.getElementById("ee");
var me = document.getElementById("me");
list.appendChild(js);
list.append(jq);
var newp = document.createElement('p');
newp.id = 'pid';
newp.innerText = 'aaa';
newp.style.color = 'red';
list.appendChild(newp);
var body = document.getElementsByTagName("body");
body[0].setAttribute("style","background-color: brown");
list.insertBefore(newp,ee);
var mystyle = document.createElement("style");
mystyle.setAttribute("type","text/css");
mystyle.innerHTML = '#list{\n' +
' background-color: aqua;\n' +
' }';
var myhead = document.getElementsByTagName("head");
myhead[0].append(mystyle);
</script>
</body>
</html>
|
9、操作表单
9.1、操作表单
- 文本框—-text
- 下拉框—-select
- 单选框—-radio
- 多选框—-checkbox
- 隐藏域—-hidden
- 密码框—-password
- …
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form method="post" action="">
<p>
<span>用户名：</span>
<input type="text" value="123" id="username"/>
</p>
<p>
<span>性别：</span>
<input type="radio" name="sex" value="男" id="boy" checked="true">男</input>
<input type="radio" name="sex" value="女" id="girl">女</input>
</p>
</form>
<script>
var username = document.getElementById("username");
var boy = document.getElementById("boy");
var girl = document.getElementById("girl");
username.value;
username.value = '1213131';
boy.value;
boy.checked;
girl.checked = true;
</script>
</body>
</html>
|
9.2、表单验证和MD5加密
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src = "https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form method="post" action="https://www.runoob.com/" onsubmit="return identify()">
<p>
<span>用户名：</span>
<input type="text" id="username" name="username" required/>
</p>
<p>
<span>密码：</span>
<input type="password" id="input_pwd" required/>
</p>
<input type="hidden" id="md5_pwd" name="passwrod"/>
<input type="submit"></input>
</form>
<script>
function identify() {
var username = document.getElementById("username");
var input_pwd = document.getElementById("input_pwd");
var md5_pwd = document.getElementById("md5_pwd");
md5_pwd.value = md5(input_pwd.value);
console.log(md5_pwd.value);
if (input_pwd.value == '123456') {
return true;
} else {
return false;
}
}
</script>
</body>
</html>
|
10、jQuery
javaScript和jQuery的关系？
jQuery库，里面封装了大量的JavaScript函数
jQuery公式：**$(selector).action()**
10.1、jQuery学习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<a href="" id="test_jquery">点我</a>
<script>
$("#test_jquery").click(function () {
alert("hello,jquery");
});
</script>
</body>
</html>
|
10.2、jQuery选择器
文档工具站：http://jquery.cuishifeng.cn/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
document.getElementByTagName();
document.getElementById();
document.getElementByClassName();
$('p').click();
$('#id1').click();
$('.class1').click();
</script>
</body>
</html>
|
10.3、jQuery事件
鼠标事件、键盘事件，其他事件
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jq/jquery-3.6.0.js"></script>
<style>
#divMove{
width:500px;
height:500px;
border:1px solid red;
}
</style>
</head>
mouse：<span id = "mouseMove"></span>
<div id = "divMove">
在这里移动鼠标试试
</div>
<body>
<script>
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+"y:"+e.pageY)
})
});
</script>
</body>
</html>
|
10.3、jQuery操作DOM
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jq/jquery-3.6.0.js"></script>
</head>
<body>
<ul id="ul">
<li class="js">JavaScript</li>
<li name="python">Python</li>
<li>SpringBoot</li>
</ul>
</body>
<script>
$("#ul li[name=python]").text();
$("#ul li[name=python]").text('JavaWeb');
$("#ul li[name=python]").html();
$("#ul li[name=python]").html('<strong>JavaWeb</strong>');
$("#ul li[name=python]").css("color","red");
$('#ul li[name=python]').show();
$('#ul li[name=python]').hide();
$('#ul').click(function () {
$('#ul li[name=python]').toggle();
$('.js').slideToggle();
$('li:last').fadeToggle();
});
$(window).width();
$(window).height();
</script>
</html>
|
小技巧
- 如何巩固JS（看jQuery源码，看游戏源码！）
- 巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果~）
