朝小闇的博客

海上月是天上月,眼前人是心上人

JavaScript

1.引入script

  • 内部写入;
  • 外部引入;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<head>
<meta charset="UTF-8">
<title>Title</title>

<!--1.在html页面内部写入js代码 -->
<!--script标签内,写js代码 -->
<!-- <script>-->
<!-- alert('hello,world');-->
<!-- </script>-->

<!--2.外部导入 -->
<!--默认type="text/javascript" 可以不用写出 -->
<script src="js/helloworld.js" type="text/javascript">

</script>

</head>

2.基本语法入门

  • 定义变量 var 变量名 = 变量值; 只有var一种变量类型;
  • 条件控制同java;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<head>
<meta charset="UTF-8">
<title>Title</title>

<script>
// 1.定义变量 var 变量名 = 变量值; 只有var一种变量类型
var score = 75;
// 2.条件控制同java
if(score>=60&&score<70){
alert("60-70");
}else if(score>=70&&score<80){
alert("70-80");
}else if(score>=80&&score<90){
alert("80-80");
}else {
alert("other")
}
console.log(score);
//console.log(score); 在浏览器控制台打印变量,相当于sout;
</script>
</head>
  • 使用浏览器:
    • Elements:html+css代码区域;
    • Console:控制台,可以在此处写入js执行代码;
    • Source:js源代码区域,可以断点debug,在此处debug代码;
    • Network:网络元素;
    • Application:应用;


3.数据类型

  • 数值、文本、图形、音频、视频……

3.1变量

  • 以字母、$、_ 等符号开头,可以使用中文定义,大小写敏感;
  • 定义变量类型只有var一种类型;
1
var 王者荣耀 = "倔强青铜";

3.2number

  • js不区分小数和整数;
1
2
3
4
5
6
123			//整数123
123.1 //浮点数123.1
1.123e3 //科学计数法1123
-99 //负数-99
NaN //Not a Number
Infinity //无穷大

3.3字符串

  • 正常字符串表示形式:

    • ‘abc’;
    • “abc”;
  • 转义字符:

    1
    2
    3
    4
    5
    \'
    \n
    \t
    \u //\u#### Unicode字符
    \x //Ascll字符
  • 多行字符串:

    1
    2
    3
    4
    //使用Esc下键``
    var msg =
    `hello
    world`
  • 模板字符串:

    1
    2
    3
    4
    5
    6
    7
    let name = "zhaoxiaoan";
    let age = 3;

    //模板:${}
    let msg = `hello,${name}`;
    console.log(msg);
    //>hello,zhaoxiaoan
  • 字符串长度:

    1
    str.length;
  • 大小写转换:

    1
    2
    3
    //注意,此处是方法而不是属性
    str.toUpperCase();
    str.toLpwerCase();
  • 该字符在字符串中第一次出现的位置:

    1
    str.indexOf('t');//获得下标索引
  • substring:

    1
    2
    3
    [)
    str.substring(1); //从第一个字符直到最后一个字符
    str.substring(1,3); //[1,3)
  • 字符串数组操作(不可变性):

    image-20200826134313146

3.4布尔值

  • true;
  • false;
  • 判断输出时显示;

3.5逻辑运算符

1
2
3
4
5
&&	//与

|| //或

! //非

3.6比较运算符

1
2
3
=		//赋值符号
== //等于(类型不一样,值一样,也会判断为true,如1==“1”得到true)
=== //绝对等于(类型一样,纸一样,才为true),所以一般使用===比较而不使用==
  • NaN===NaN,false,NaN与所有的数值都不相等,包括自己;

  • 使用isNaN()判断变量是否为NaN;

  • 浮点数问题:

    • console.log((1/3)===(1-2/3);    //false
      
      1
      2
      3
      4
      5
      6
      7

      - 浮点数存在精度问题;

      - 常使用以下方式解决:

      - ```javascript
      Math.abs((1/3)-(1-2/3)<0.000000001);

3.7null和undefined

  • null:空;
  • undefined:未定义;

3.8数组

  • java的数组中必须为相同类型,js不是;
1
2
3
var arr = [1,2,3,"abs",null,true];//常用此方式定义数组类型

new Array(1,2,3,"abs",null,true);//不常用
  • 取数组下标,如果越界,会显示undefined而不会执行更多的安全性检查;

  • 多维数组:

    • arr = [[1,2,3],['a','b','c']]
      >(2) [Array(3), Array(3)]
      arr[1][1]
      >"b"
      
      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

      - 常用的方法和属性:

      - ```javascript
      var arr = [1,2,3,4,5,6];

      //1.length
      arr.length
      >6
      //给arr.length赋值时,长度增大则显示undefined,长度减小则从后往前删减元素

      //2.indexOf
      arr.indexOf(2)
      >1
      //字符索引,对所给元素判断最先出现位置下标,注意:1和'1'不同,索引也不同

      //3.slice()
      arr.slice(3)
      >(3) [4, 5, 6]
      //截取array的一部分,返回一个新数组,类似于String中的substring()

      //4.push()、pop()
      arr.push('a','b')
      >8
      arr
      >(8) [1, 2, 3, 4, 5, 6, "a", "b"]
      arr.pop()
      >"b"
      arr
      >(7) [1, 2, 3, 4, 5, 6, "a"]
      //在原数组的尾部插入或取出元素,push可以同时处理多个元素,而pop每次只能取出一个元素

      //5.unshift()、shift()
      arr.unshift('a')
      >8
      arr
      >(8) ["a", 1, 2, 3, 4, 5, 6, "a"]
      arr.shift()
      >"a"
      arr
      >(7) [1, 2, 3, 4, 5, 6, "a"]
      //从数组头部插入或取出元素

      //6.sort()
      arr = ['B','b','C']
      >(3) ["B", "b", "C"]
      arr.sort()
      >(3) ["B", "C", "b"]
      //将数组按照Ascll码值进行顺序排序

      //7.reverse()
      arr.reverse()
      >(3) ["b", "C", "B"]
      //将数组元素反转

      //8.concat()
      arr.concat([1,2,3,])
      >(6) ["b", "C", "B", 1, 2, 3]
      arr
      >(3) ["b", "C", "B"]
      //拼接数组,并且返回一个新数组而不是在原数组上修改

      //9.join()
      arr.join('-')
      >"b-C-B"
      arr
      >(3) ["b", "C", "B"]
      //添加连接符号并且输出新的数组

      //10.splice(index,x,"","",...),index表示下标索引,x表示删除数组个数,""可以自行添加元素

3.9对象

  • 所有键都是字符串,尤其是在判断中要加上引号;
  • 对象使用大括号,相当于匿名内部类;
  • 使用键值对定义赋值,属性之间使用 ”,“ 隔开最后一个属性不需要添加;
1
2
3
4
5
var person = {
name:"zhaoxiaoan",
age:3,
tags:['js','java','web','...']
}
  • 取变量值:
1
2
person.name
>zhaoxiaoan
  • 使用一个不存在的属性,不会报错,而是undefined
1
2
person.haha
>undefined
  • 常用的方法和属性:

    • //1.delete
      delete person.name
      >true
      person
      >{age: 3, tags: Array(4)}
      //动态地删减对象的属性
      
      //2.增加
      person.haha = 'haha'
      >"haha"
      person
      >{age: 3, tags: Array(4), haha: "haha"}
      //动态地增加属性直接赋值即可
      
      //3.判断属性值是否在对象中
      'age' in person
      >true
      'toString' in person
      >true
      //有继承性质,'toString'是继承属性
      
      //4.hasOwnProperty()
      person.hasOwnProperty('age')
      >true
      person.hasOwnProperty('toString')
      >false
      //判断是否为自身定义属性
      
      
      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



      ### 3.10.流程控制

      - if、while、for普通使用同Java;

      - 常用用法:

      ```javascript
      //shift+tab对齐
      //1.forEach循环
      var age = [1,2,3,6,4,5,8,21,3,5];
      age.forEach(function (value) {
      console.log(value);
      })
      >1
      >2
      >3
      >6
      >4
      >5
      >8
      >21
      >3
      >5

      //2.for in 循环
      for (var num in age){
      console.log(age[num]);
      }
      >1
      >2
      >3
      >6
      >4
      >5
      >8
      >21
      >3
      >5
      //适用于未知数组长度,用于得到数组索引

      //3.for of 循环

3.11.Map、Set

  • Map
1
2
3
4
5
6
7
8
9
var map = new Map([['Tom',100],['jack',90],['hash',80]]);	//键值对数组
var name = map.get('Tom');
console.log(name);
map.set('admin',60); //添加和修改
map.delete('Tom'); //删除

>100
map
>Map(3) {"jack" => 90, "hash" => 80, "admin" => 60}
  • Set
1
2
3
4
5
6
7
8
var set = new Set([3,6,2,2,1,1,3]);     //去重数组
set.add(100); //添加
set.delete(2); //删除
console.log(set.has(3)); //判断是否存在该元素

>true
set
>Set(4) {3, 6, 1, 100}
  • 遍历
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
//1.数组遍历元素
var arr = [3,4,5];
for (let x of arr){
console.log(x);
}
>3
>4
>5

//2.Map遍历元素
var map = new Map([['Tom',100],['jack',90],['hash',80]]);
for(let x of map){
console.log(x);
}
>(2) ["Tom", 100]
>(2) ["jack", 90]
>(2) ["hash", 80]

//3.Set遍历元素
var set = new Set([3,6,2,2,1,1,3]);
for (let x of set){
console.log(x);
}
>3
>6
>2
>1

//注意:for in只有数组可用,Map,Set皆不可用,且只能遍历索引
//bug:
arr.name = 'zhaoxiaoan';
for (let x in arr){
console.log(x);
}
>0
>1
>2
>name
//此时索引号会变成键名,且不能输出name相对应的值zhaoxiaoan

3.12.严格检查模式

  • 是为了防止多个js文件中全局变量互相矛盾的问题,在每个js文件或<script>标签中都使用;
  • 在js代码第一行写入代码 ‘use strict’; ,表明使用严格检查模式;
  • 定义变量时都定义为局部变量,建议使用let标识符而不使用var

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
//绝对值函数
//方式一:
function abs(x) {
if(x>=0){
return x;
}else {
return -x;
}
}

//方式二:
var abs = function (x) {
if(x>=0){
return x;
}else {
return -x;
}
}

//两种定义方式效果相同,常用一
abs(10)
>10
abs(-10)
>10
abs()
>NaN
//注意,未传入参数则undefined

4.2参数

  • 函数可以传入任意个参数,即使未定义
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function abs(x) {
//手动抛出异常
if (typeof x!== 'number'){//x的数据类型不为'number',不传入参数时x未定义,会抛出异常
throw 'Not a Number';
}

if(x>=0){
return x;
}else {
return -x;
}
}

abs()
>Uncaught Not a Number
  • arguments:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function abs(x) {
console.log('x='+x);
for (var a of arguments){
console.log(a);
}

if(x>=0){
return x;
}else {
return -x;
}
}

abs(1,3,6,2,555,5)
>x=1
>1
>3
>6
>2
>555
>5
>1
//arguments用于接收所有传入参数
  • rest:
1
2
3
4
5
6
7
8
9
10
function f(a,b,...rest) {//...rest只能放在参数列最后一个,用于接收多余的参数
console.log('a='+a);
console.log('b='+b);
console.log(rest);
}

f(1,5,2,63,9,52,85,666,555,985)
>a=1
>b=5
>(8) [2, 63, 9, 52, 85, 666, 555, 985]

4.3变量的作用域

  • var 关键字具有作用范围:

    • 在一个函数内部定义的变量名,只能往下延伸,不能在该函数外使用;
    • 在函数内部的函数中,定义一个与父函数相同的变量,调用时优先调用自身变量;
    • ES6之前,var变量存在一定Bug:
    1
    2
    3
    4
    5
    6
    7
    8
    function f1() {
    for (var i = 0; i < 100; i++) {
    console.log(i);
    }
    console.log(i);
    }
    f1();
    //结果如下,i值在函数f1()外依然可以调用

    image-20200827150554681

    • 由此引入 let 关键字解决局部作用域冲突问题:
    1
    2
    3
    4
    5
    6
    7
    8
    function f1() {
    for (let i = 0; i < 100; i++) {
    console.log(i);
    }
    console.log(i);
    }
    f1();
    //let定义变量只在作用域内部有效,外部调用报错:ReferenceError: i is not defined

    image-20200827150804774

  • 作用域内部所有变量定义,无论位置,在 js 编译时都自动将定义提前,但并不会赋值初始化:

1
2
3
4
5
6
7
8
9
10
11
function f2() {
let x = 'x' + y;
console.log(y);
let y = 'y';
}
f2();

//未定义 let y = 'y'; 时:ReferenceError: y is not defined
//定义 let y = 'y'; 后:ReferenceError: Cannot access 'y' before initialization

//规范写法:将所有变量定义提前到作用域开头
  • <script>中直接定义的全局变量(包括对象和函数),以及直接从库中调用的类似于alert()函数,实质上全部属于window全局对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var x = 'x';
alert(x);
alert(window.x);
window.alert(window.x);
//三条语句实质上等价

var old_alert = window.alert();
window.alert() = function (){

}//给window.alert()赋予了新的函数,导致原函数失效
window.alert(123);//失效了无法显示弹窗

//恢复window.alert()
window.alert = old_alert;
window.alert(456);//可以显示该弹窗
  • 因为window全局对象的危险性,为确保在多个js文件中代码保持安全性,规范法则,自己单独创建一个对象用于存放自己的变量,相当于每个人都拥有一个属于自己的window对象,而不会被其它人无意篡改:
1
2
3
4
5
6
7
8
//创建唯一全局对象
var ZhaoApp = {}

//定义属于自己的全局变量
ZhaoApp.name = 'zhaoxiaoan';
ZhaoApp.add = function(a,b){
return a+b;
}
  • ES6引入常量 const 关键字,只读:
1
2
3
4
const PI = '3.14';
PI = '314';//该语句会报错

//在引入const之前都使用大写字母表示常量,但依然由var定义,值可改变

4.4方法

  • 定义方法:对象内部定义的函数叫做方法;
    • 其中this的用法和java相似,但更丰富,它默认指向调用该函数或者该方法的对象,如方式二中外部调用函数也是可行的,然而直接调用getAge()函数时却得到NaN,本质是此时调用函数对象是window本身,而window对象并不存在.name属性;
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
//方式一
var zhaoxiaoan = {
name:'朝小闇',
birth:2000,
age:function () {
let nowYear = new Date().getFullYear();
return (nowYear-this.birth);
}
}

//对象内部只存在属性和方法两种内容
//调用方法需要()
zhaoxiaoan.age()
>20
//调用属性则不用()
zhaoxiaoan.name
>"朝小闇"

//方式二
function getAge() {
let nowYear = new Date().getFullYear();
return (nowYear-this.birth);
}

var zhaoxiaoan = {
name : '朝小闇',
birth : 2000,
age : getAge
}
zhaoxiaoan.age()
>20
zhaoxiaoan.name
>"朝小闇"
getAge()
>NaN
  • apply()方法:所有函数共有,它的作用是将this默认指向改为指定指向对象:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getAge() {
let nowYear = new Date().getFullYear();
return (nowYear-this.birth);
}

var zhaoxiaoan = {
name : '朝小闇',
birth : 2000,
age : getAge
}

//其中第一个参数为指向对象名,第二个为传入该函数的参数列表,用数组表示
getAge.apply(zhaoxiaoan,[])
>20

5.内部对象

5.1 标准对象类型

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 //NaN 虽然含义为Not a Number,但却是number类型
>"number"
typeof []
>"object" //对象类型
typeof {}
>"object"
typeof Math.abs
>"function"
typeof undefined
>"undefined"

5.2 Date

  • 常用时间方法:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let nowDate = new Date();

nowDate.getFullYear(); //年
>2020
nowDate.getMonth(); //月,注意,设计月份为0-11,得到7实质是8月
>7
nowDate.getDate(); //日
>27
nowDate.getDay(); //星期
>4
nowDate.getHours(); //时
>18
nowDate.getMinutes(); //分
>52
nowDate.getSeconds(); //秒
>43
nowDate.getTime(); //时间戳,以1970-1-1 00:00:00为始计算毫秒数
>1598525563925

  • 时间转化:
1
2
3
4
5
6
7
8
console.log(new Date(1598525563925))	//时间戳转化成具体标准时间
>Thu Aug 27 2020 18:52:43 GMT+0800 (中国标准时间)//GMT中国标准时间

nowDate.toLocaleString(); //转化为当地时间
>"2020/8/27 下午6:52:43"

nowDate.toGMTString();
>"Thu, 27 Aug 2020 10:52:43 GMT"

5.3 JSON

  • 定义:

    • JSON是一种轻量级的交换格式;
    • 具有简洁和清晰的层次结构
    • 能够有效提升网络传输效率;
  • 在 javascript 中一切都皆对象,任何 js 支持的类型都能用 JSON 来表示;

  • 格式:

    • 对象 {}
    • 数组 []
    • 键值对 key : value
  • 对象与JSON格式相互转换:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let user = {
name : 'zhaoxiaoan',
age : 3,
sex : '男'
}
//JSON.stringify()将对象转换为JSON格式
let jsonUser = JSON.stringify(user);
jsonUser
>'{"name":"zhaoxiaoan","age":3,"sex":"男"}'
// 得到字符串 注意,外部用'',内部用"";

//JSON.parse()将JSON格式转换为对象
let parseUser = JSON.parse('{"name":"zhaoxiaoan","age":3,"sex":"男"}');
parseUser
>{name: "zhaoxiaoan", age: 3, sex: "男"}
// 得到对象,可展开
  • 对象与JSON区别
1
2
3
4
//对象格式
var obj = {name: "zhaoxiaoan", age: 3, sex: "男"};
//json本质是字符串
var json = '{"name":"zhaoxiaoan","age":3,"sex":"男"}'

6.面向对象编程

  • 基础概念:javascript、java、C#等编程语言都是面向对象的;
  • 面向对象编程:
    • 类:模板
    • 对象:具体实例

java一切都是对象博客链接

6.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
var Student = {
name : 'zhaoxiaoan',
age : 3,
run : function () {
console.log(this.name + "is running");
}
}

var xiaoming = {
name : "xiaoming"
}

//小明的原型指向Student,相当于父类
xiaoming.__proto__ = Student;

xiaoming
>{name: "xiaoming"}
>name: "xiaoming"
>__proto__:
>age: 3
>name: "zhaoxiaoan"
>run: ƒ ()
>__proto__: Object

xiaoming.run()
>xiaomingis running

//其中 __proto__ 原型指向Student,属性和方法直接继承原型,但是相同属性name依然默认调用自身name属性,而Student的原型则为Object对象(window全局对象最终原型同样指向Object对象)



var Bird = {
fly : function () {
console.log(this.name + "is flying");
}
}

xiaoming.__proto__ = Bird;
//可以随时修改指向原型,修改后:
xiaoming.run()
>TypeError: xiaoming.run is not a function
xiaoming.fly()
>xiaomingis flying
xiaoming
>{name: "xiaoming"}
>name: "xiaoming"
>__proto__:
>fly: ƒ ()
>__proto__: Object
1
2
3
4
5
6
7
8
9
10
function Student(name) {
this.name = name;
}

//给Student新增一个方法
Student.prototype.hello = function () {
console.log('hello');
}

//prototype 是指对Student原型添加一个方法,而Student对象指向自身的原型

6.2 class继承

  • ES6之后出现的新的继承方式;
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
class Student{
//constructor就是构造方法
constructor(name) {
this.name = name;
}

//类中定义的方法不需要使用function,类中只存在属性和方法
hello(){
console.log('hello');
}

}

class XiaoStudent extends Student{
constructor(name,grade) {
super(name);//重写构造方法必须涉及父类原型构造方法中的属性
this.grade = grade;
}
myGrade(){
console.log("我今年的年级是:"+this.grade+"年级");
}
}

var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",2);

//class继承的本质还是原型继承
xiaoming
>Student {name: "xiaoming"}
>name: "xiaoming"
>__proto__: Object //原型依然指向于Object
xiaoming.hello()
>hello

xiaohong
>XiaoStudent {name: "xiaohong", grade: 2}
>grade: 2
>name: "xiaohong"
>__proto__: Student //继承自Student
>constructor: class XiaoStudent
>myGrade: ƒ myGrade()
>__proto__: Object
xiaohong.myGrade()
>我今年的年级是:2年级

6.3 原型链

  • 原型指向最终直到Object截止,再往后就是Object和Object原型互指;

image-20200827214732956


7.操作BOM对象(重点)

7.1 BOM

  • 是浏览器对象模型;
  • 常用浏览器内核:
    • IE
    • Chrome
    • Safari
    • FireFox
  • 第三方浏览器:
    • QQ浏览器
    • 360浏览器
    • ……

7.2 浏览器常用对象属性方法

  • window:

    • 代表浏览器窗口;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    window.alert(1)		//弹窗
    >undefined
    window.innerHeight //浏览器内部显示部分大小
    >582
    window.innerWidth
    >150
    window.outerHeight //浏览器全部大小
    >701
    window.outerWidth
    >712
  • navigator:

    • 封装了浏览器的信息,也可以通过window.navigator调用;
    • 大多数时候不使用navigator属性(不建议使用),因为会被认为修改;
    1
    2
    3
    4
    5
    6
    7
    8
    window.navigator.appName
    >"Netscape"
    navigator.appVersion
    >"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
    navigator.userAgent
    >"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.132 Safari/537.36"
    navigator.platform
    >"Win32"
  • screen:

    • 代表电脑屏幕尺寸;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    screen.width
    1536
    screen.height
    864
    //上述屏宽有125%的显示屏放大,设置回100%后即为以下
    screen.width
    1920
    screen.height
    1080
  • location(重点):

    • 代表当前网页的URL信息;
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    //以 https://www.baidu.com 为例
    location

    >host: "www.baidu.com" //网页主机
    >href: "https://www.baidu.com/" //网页链接
    >protocol: "https:" //网络协议

    location.reload() //重载页面,即刷新页面


    //很牛逼的方法
    //设置新的地址,访问此网页则自动打开新地址
    location.assign('https://www.baidu.com/')
  • document:

    • 代表当前的页面,HTML、DOM文档树;
    1
    2
    3
    4
    5
    document.title
    >"百度一下,你就知道"
    //网页标题,可娱乐修改
    document.title = 'zhaoxiaoan'
    >"zhaoxiaoan"
    • 获取具体的文档树节点
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
    </dl>

    <script>
    var dl = document.getElementById('app');
    </script>

    dl:

    image-20200827225540957

    • 获取网页cookie:
    1
    2
    3
    //以 https://www.baidu.com 为例
    document.cookie
    >"BIDUPSID=D82CB30D89EEDA3F955B622F870B5FE0; PSTM=1582882414; BAIDUID=B04A05793CE4AE9F77A02ECD55450F04:FG=1; BD_UPN=12314753; sugstore=0; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; delPer=0; BD_CK_SAM=1; PSINO=6; BD_HOME=1; H_PS_645EC=5d9esAXtgUE7WN%2F8FMHnWe2t10nBl8dCBY4JYI0tWWyKYGKF5r5VvZyY6d4; H_PS_PSSID=32653_32606_1452_32045_32675_32116_32090_32618_32506_22159"
    • 劫持cookie原理:
      • 不要访问浏览器报警网页;
    1
    2
    <script src="a.js"></script>
    <!--未知js文件,恶意人员获取你的cookie上传到他自己的服务器-->
  • history:

    1
    2
    history.back()		//网页后退
    history.forward() //网页前进

8.操作DOM节点(重点)

8.1 基本说明

  • 浏览器网页就是一个DOM树形结构;
    • 更新:更新DOM节点;
    • 遍历:遍历DOM节点,得到DOM节点;
    • 删除:删除一个DOM节点;
    • 添加:添加一个DOM节点;
  • DOM树形结构:
    • 每一个标签都是一个DOM节点;

image-20200828115725992

8.2 获得DOM节点

  • 这是原生代码,之后一般都使用JQuery;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div id="father">
<h1>标题一</h1>
<p id="p1">这是p1</p>
<p class="p2">这是p2</p>
</div>
<script>
//对应css选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');

let childrens = father.children; //获取father节点的所有子节点
// father.children[0] 以数组下标的方式取得子节点
// father.firstChild;
// father.lastChild;
</script>

8.3 更新DOM节点

1
2
3
4
5
6
7
<div id="id1">

</div>

<script>
let id1 = document.getElementById('id1');
</script>
  • 操作文本:
1
2
3
4
id1.innerText = '123'
>"123"
id1.innerHTML = '<p>111111111111111</p>'
>"<p>111111111111111</p>"
  • 操作CSS:
1
2
3
4
5
6
id1.style.color = 'yellow'		//属性使用,要使用字符串
>"yellow"
id1.style.fontSize = '40px' // _ 转 驼峰命名规则
>"40px"
id1.style.padding = '40px'
>"40px"

8.4 删除DOM节点

  • 删除子节点前必须获得父节点,自己不能删除自己;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="father">
<h1>标题一</h1>
<p id="p1">这是p1</p>
<p class="p2">这是p2</p>
</div>

<script>
//删除节点步骤:1.先通过该节点获得父节点;2.再由父节点删除该节点
let self = document.getElementById('p1');
let parent = self.parentElement;

//删除方式一:
parent.removeChild(self);

//删除节点过程中children时刻在变化,是一个动态的过程
//删除方式二:
parent.removeChild(parent.children[0]); //删除一次之后,后续子节点会自动往前补充

</script>

8.5 插入DOM节点(重点)

  • 前面学过的 innerHTML 属性会覆盖目标DOM下所有的标签;
  • append:
    • 通过append甚至可以插入<head><body><style>等标签,实现所有HTML、CSS功能;
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
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>

<script>

//1.将已有的节点追加到目标节点尾端

//1.1 获得节点
let js = document.getElementById('js');
let list = document.getElementById('list');

//1.2 直接追加到节点末尾
list.appendChild(js);

//2.创建新的节点,并追加到节点末尾
//2.1创建一个新的节点
let newP = document.createElement('p');//创建一个p标签
//2.2给新创建的节点赋值
//方式一:
newP.id = 'newP';
newP.innerText = '123';

//方式二:(更常用)
newP.setAttribute('id','newP'); //参数就是键值对格式

//2.3将新创建的标签追加到目标节点
list.appendChild(newP);

//3.添加style标签尝试修改css属性
let myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color: chartreuse}';

document.getElementsByTagName('head')[0].appendChild(myStyle);
//注意,标签名字后面可以跟数组以确保是该标签
</script>
  • insertBefore:
    • 将新节点插入到目标节点的前面;
    • 要被目标节点包含的节点调用(自身调用无效);
1
2
3
4
5
6
7
8
<script>
let list = document.getElementById('list');
let ee = document.getElementById('ee');
let js = document.getElementById('js');

//要包含的节点.insertBefore(newNode,targetNode)
list.insertBefore(js,ee);
</script>

9.操作表单(验证)

9.1 表单简介

  • 是一个DOM树;
  • 具有如下属性:
    • 文本框:text
    • 下拉框:<select>
    • 单选框:radio
    • 多选框:checkbox
    • 隐藏域:hidden
    • 密码框:password
    • ……

9.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
<form method="post">
<p>
<span>用户名:</span>
<input type="text" id="username">
</p>

<!-- 单选框的value属性就是其设置好的value值-->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">
<input type="radio" name="sex" value="women" id="girl">
</p>

</form>

<script>
let input_text = document.getElementById('username');
let boy_radio = document.getElementById('boy');
let girl_radio = document.getElementById('girl');

//得到输入框的值
input_text.value;
>"123322553"
//修改输入框的值
input_text.value = '123'
>"123"

//得到单选框是否被选中
girl_radio.checked;
>false
//修改其是否被选中
girl_radio.checked = true;
>true

//单选框和复选框的value值只是设定好的value属性
girl_radio.value
>"women"

</script>

9.3 提交表单

  • 使用md5算法加密,同时使用隐藏域防止密码框修改:

    • <!--md5加密算法引入,可以自己下载到本地,下载地址在引入地址的上级-->
      <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
      
      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

      ```html
      <form action="https://www.baidu.com" method="post">
      <p>
      <span>用户名:</span>
      <!-- 添加name属性才可在提交时被看见-->
      <input type="text" id="username" name="username">
      </p>

      <p>
      <span>密 码:</span>
      <input type="password" id="password">
      </p>
      <!--隐藏域用来-->
      <input type="hidden" id="md5-password" name="password">
      <button type="submit" onclick="f()">提交</button>

      </form>

      <script>
      function f() {
      let uname = document.getElementById('username');
      let pwd = document.getElementById('password');
      let md5pwd = document.getElementById('md5-password');

      console.log(md5pwd.value);//隐藏域的值自己设置,可以为空,此处为空下面没有输出
      >
      md5pwd.value = md5(pwd.value); //md5算法,直接以密码域值作参,修改原密码
      console.log(md5pwd.value);//经过md5算法之后可以改密
      >ae6e334f62fb5d989398deed87568c94
      }
      </script>
  • name属性的作用:

    • 没有name属性则无法看到表单提交的内容;

image-20200828175252659

  • onsubmit:
    • onsubmit=”return f()” 固定格式,将函数返回值返回给表单,如果函数返回false,则不会跳转页面不会提交;
    • 注意一下<button>标签中type属性的变化;
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
<form action="https://www.baidu.com" method="post" onsubmit="return f()">
<p>
<span>用户名:</span>
<input type="text" id="username" name="username">
</p>

<p>
<span>密 码:</span>
<input type="password" id="password">
</p>

<input type="hidden" id="md5-password" name="password">
<button type="button" onclick="f()">提交</button>

</form>

<script>
function f() {
let uname = document.getElementById('username');
let pwd = document.getElementById('password');
let md5pwd = document.getElementById('md5-password');

console.log(md5pwd.value);//隐藏域的值自己设置,可以为空
md5pwd.value = md5(pwd.value);
console.log(md5pwd.value);//经过md5算法之后可以改密
return false;
}
</script>

10.jQuery

10.1 获取jQuery

10.2 初步使用jQuery

  • 两种引入方式,对应两种获取方式:
1
2
3
4
5
6
7
8
9
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 1.外部引入在线cdn-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- 2.内部导入-->
<script src="lib/jquery-3.5.1.min.js"></script>
</head>
  • jQuery使用:
1
2
3
4
5
6
7
8
9
10
<!--    jQuery调用公式 $(selector).action()-->
<a href="#" id="test-jQuery"></a>

<script>
// $ 符号代表jQuery对象,相当于前面所说的window对象,是一种自己创建的对象
//此处selector选择器就是css中的选择器,有自动提示,后面的click()就是动作,而函数作为匿名参数传入动作内
$('#test-jQuery').click(function () {
console.log('123');
});
</script>

10.3 jQuery选择器

  • jQuery选择器与原生javaScript选择器比较:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//class
document.getElementsByClassName();

//jQuery,css中的选择器都能用,多且简便
//标签
$('p').click();
//id
$('#id').click();
//class
$('.class').click();

10.4 jQuery事件

  • 事件一般分为(细学自行去看前文文档网站):

    • 鼠标事件

    image-20200828195411498

    • 键盘事件

    image-20200828200054125

    • 其它事件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!--3.事件-->
<span id="mouseMove"></span>
<div id="divMove">
在这里意动鼠标试试!
</div>

<script>
//当网页元素加载完毕之后响应事件
/*$(document).ready(function (e) {

})*/
//上述是原始写法,简写为:
$(function () {
$('#divMove').mousemove(function (e) {//e即为得到的鼠标移动信息
$('#mouseMove').text('mouse: x:'+e.pageX+'y:'+e.pageY)
})
})
</script>
  • 结果:

image-20200828194948814

10.5 jQuery操作DOM

  • 节点文本操作:
1
2
3
4
5
$('#test-ul li[class=js]').text();				//获得值
$('#test-ul li[class=js]').text('123456'); //修改值

$('#test-ul').html(); //获取值
$('#test-ul').html('<strong>123</strong>'); //修改值
  • css操作:
1
$('#test-ul li[class=js]').css({"color":"red"});
  • 元素的显示和隐藏:
1
2
3
$('#test-ul li[class=js]').show();
$('#test-ul li[class=js]').hide();
$('#test-ul li[class=js]').toggle(); //显示和隐藏相互转换
  • 娱乐:
1
2
$(window).width();
$(document).width();
  • ajax()就是研究事件的;

10.6 复习小技巧

  • 巩固js、jQuery:
    • 看jQuery源码;
    • 看游戏源码(源码之家);
  • 巩固HTML、CSS:
    • 扒网站,对应效果删源码直到最简,复制html框架,再下载相应css、js文件;
-------- 本文结束 感谢阅读 --------