JavaScript

最新推荐文章于 2024-06-13 19:04:51 发布

气运2020

最新推荐文章于 2024-06-13 19:04:51 发布

阅读量1.8k

点赞数

分类专栏： JavaWeb笔记-狂神文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_46307478/article/details/123433991

版权

JavaWeb笔记-狂神专栏收录该内容

4 篇文章 0 订阅

订阅专栏

前端三要素：

HTML（结构）：超文本标记语言，Hyper Text Markup Language，决定网页的结构和内容。
CSS（表现）：层叠样式表，Cascading Style Sheets，设定网页的表现样式。
- 针对CSS的编程语言：LESS、SASS
JavaScript（行为）：是一种弱类型脚本语言，其源代码不需要经过编译，

而是由浏览器解释运行，用于控制网页的行为。

JQuery是一个库，Angular、React、Vue是三大框架。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1WI3nCfx-1647003759355)(…/AppData/Roaming/Typora/typora-user-images/image-20220301141447506.png)]

1. 什么是JavaScript

1.1 概述

JavaScript是一门世界上最流行的脚本语言

Java、JavaScript

一个合格的后端开发，必须精通JavaScript

1.2 历史

ECMAScript可以理解为是JavaScript的以这个标准

最新版本已经到6版本，但是大部分浏览器还只停留在支持es5代码上。

开发环境—线上环境，版本不一致。

2. 快速入门

2.1 引入

内部引入：script标签内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--script标签内，写Javascript语言
        可以放在head、也可以放在body-->
    <script>
        alert("hello world!")
    </script>

</head>
<body>
    
</body>
</html>

外部引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--外部引用
	注意点：script必须成对出现，闭合-->
    <script src="js/qj.js"></script>
    <!--不用显示定义type，也就是默认是javascript-->
    <script type="text/javascript"></script>

</head>
<body>

</body>
</html>

2.2 基本入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--JavaScript严格区分大小写-->
    <script>
        //1.定义变量  变量类型  变量名=变量值
        var name = "song";
        var score = 82;

        //2.条件控制
        if (score >= 60 && score < 70) {
            alert("合格")
        } else if (score >= 70 && score < 80) {
            alert("良好")
        } else if (score >= 80) {
            alert("优秀")
        } else {
            alert("其他")
        }

        //3.调试
        //console.log(score)在浏览器的控制台打印变量

    </script>
</head>
<body>

</body>
</html>

Elements：html、css
Console：js，控制台输出
Sources：在源码打断点调试
Network：网络抓包
Application：Cookie缓存等

2.3 数据类型

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

变量

var 变量名		//不能以数字开头

number：数值（js不区分小数和整数）

123			//整数123
123.1		//浮点数
1.123e		//科学计数法
-99			//负数
NaN			//not a number
Infinity	 //表示无限大

字符串

'abc'
"abc"

布尔值

true
false

逻辑运算

&&				//两个都为真，结果为真
||				//一个为真，结果为真
!				//真即假，假即真

比较运算

=				//赋值
==		    	//等于（类型不一样，值一样，也会判断为true）
===				//绝对等于（类型一样结果一样，结果才为true）    
//1=="1",true    
//1==="1",false

这是一个JS缺陷，坚持使用===绝对等于判断！！不要使用==

须知：

NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN（NaN）来判断这个数是否是NaN

浮点数问题：

console.log((1/3)===(1-2/3))		//false

尽量避免使用浮点数进行比较，存在精度问题！

要对浮点数进行比较时，采用差的绝对值进行比较

console.log(Math.abs((1/3)-(1-2/3))<0.0000001)		//true

null和undefined

null			//空
undefined		//未定义

数组

Java的数组是必须一系列相同类型的对象，JS不需要这样。

//保证代码可读性
var arr = [1,2,3,4,"hello",true,null]

取数组下标，如果越界，会显示 undefined

对象

数组是中括号，对象是大括号

//定义对象,每个属性之间用逗号隔开，最后一个不需要添加
var person = {
    name: "song",
    age: 3,
    tags: ["java", "python", "php"]
}

//取对象的值
console.log(person,name)

2.4 严格检查格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    前提：IDEA需要设置支持ES6语法
    'use strict';代表严格检查模式，预防JavaScript的随意性导致产生一些问题
     使用要求：必须卸载JavaScript的第一行
     局部变量建议都使用let定义
       -->
    <script>
        'use strict';
        //全局变量
        i = 1;

        //局部变量
        var j = 2;
        let k = 3;//ES6中支持的，只要是局部变量，更推荐使用let
    </script>
</head>
<body>

</body>
</html>

3. 数据类型

3.1 字符串

1、正常字符串我们使用单引号或者双引号包裹；

2、注意转义字符\

\'
\n
\t
\u4e2d   \u####  Unicode字符
\x41		Ascii字符

3、多行字符串编写

//tab键上边，Esc下面的键
var msg =`hello
world
Java`

4、模板字符串

let name = 'song';
let age = 3;
let msg = `你好呀，${name}`
console.log(msg)

5、字符串长度

str.length

6、字符串的可变性，不可变！

7、大小写转换

//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()

8、获取指定元素的下标

console.log(student.indexOf('t'))

9、截取子串

//包含前面不包含后面
console.log(student.substring(1))//只有一个数字，从此处截取到最后
tudent

console.log(student.substring(1,3))//从1截取到3前（即2）[1,3)
tu

3.2 数组

Array数组可以包含任意的数据类型。

var array = [1, 2, 3, 4, 6, 'abc', null];//通过下标取值和赋值
array[1] = 8


var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";

1、长度

array.length

注意：如果给数字的长度array.length赋值，数组大小就会发生变化。如果赋值过小，元素会丢失。

2、获得下标索引

console.log(array.indexOf(1))

字符串的“1”和数字1是不同的。

3、截取数组的一部分，返回一个新数组，类似字符串中的substring

var array = [1, 2, 3, 4, 6, 'abc', null];
array.slice(1, 5)//[1,5)

4、push()、pop()尾部

array.push()：将元素压入到尾部
array.pop()：弹出尾部的一个元素

5、unshift()、shift()头部

array.unshift()：将元素压入到透部
array.shift()：弹出头部的一个元素

6、排序

array.sort()

7、元素反转reverse()

arr = ['A','b','m']
(3) ['A', 'b', 'm']
arr.reverse()
(3) ['m', 'b', 'A']

8、contact()

arr
(3) ['m', 'b', 'A']
arr.concat([1,2,3,4])
(7) ['m', 'b', 'A', 1, 2, 3, 4]
arr
(3) ['m', 'b', 'A']

注意：contact并没有修改原始数组，只是会返回一个新的数组

9、连接符join

打印拼接数组，使用特定的字符串连接

arr
(3) ['m', 'b', 'A']
arr.join('-')
'm-b-A'
arr.join('')
'mbA'

10、多维数组

arr=[[1,2,3],55,['2','acs',1]]
(3) [Array(3), 55, Array(3)]
arr[0][1]
2
arr[1]
55
arr[2][2]
1

数组：存储数据（如何存，如何取，其他方法可以自己实现）

3.3 对象

若干个键值对

var 对象名 = {
    属性名： 属性值,
    属性名： 属性值,
    属性名： 属性值,
    属性名： 属性值
}

//定义了一个person对象，它拥有四个属性
        var person = {
            name: "song",
            age: 20,
            score: 100,
            school: 'CAS'
        }

js中对象，{…}表示一个对象，键值对描述属性XXX:XXXX,多个属性之间使用逗号隔开，最后一个属性不加逗号。

JavaScript中对象的所有键都是字符串，值是任意对象。

1、对象赋值

person
{name: 'song', age: 20, score: 100, school: 'CAS'}
person.name="zhangsan"
'zhangsan'
person.name
'zhangsan'

2、使用一个不存在的对象属性，不会报错，undefined

person.hah
undefined

3、动态的删减属性，通过delete删除对象的属性

delete person.age
true
person
{name: 'zhangsan', score: 100, school: 'CAS'}

4、动态的添加，直接给新的属性添加值就行

person.hah=1
1
person
{name: 'zhangsan', score: 100, school: 'CAS', hah: 1}

5、判断属性是否在这个对象中 ‘XXX’ in xxx

'name' in person
true

//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的

person.hasOwnProperty('toString')
false
person.hasOwnProperty('name')
true

3.4 流程控制

if 判断

let age = 3;
if (age < 3) {
    alert("hahahahah");
} else if (age === 3) {
    alert("mamammama")
} else {
    alert("说话")
}

while 循环，避免程序死循环

let age = 3;
while (age < 20) {
    age = age + 1;
    console.log(age);
}


do{
  age = age + 1;
  console.log(age);  
}while(age < 30)

for 循环

for (let i = 0; i < 60; i++) {
    console.log(i)
}

for in ；for of数组循环

let age = [3, 2, 1, 4, 45, 6, 45, 6, 45, 34, 534, 543, 53, 11, 88]
//for(let index in object)
//for in获得的是数组索引
for (let num in age) {
    console.log(age[num]);
}


//for(let value in object)
//获得的是数组的元素
for (let number of age) {
	console.log(number)
}

forEach数组循环

ES5.1特性

age.forEach(function (value) {
    console.log(value)
})

3.5 Map和Set

ES6的新特性

Map：类似字典，键值对的形式

//ES6才支持Map，类似python中的字典
//学生成绩、学生名字
// var names = ["tom", "jack", "song"];
// var score = [20, 80, 100];
//1.创建
var map = new Map([["tom", 20], ["jack", 80], ["song", 100]]);
//2.取值
var stu = map.get("tom");//通过key获得value
console.log(stu);
//3.赋值
map.set("admin", 88)
console.log(map)
//4.删除
map.delete("tom")

Set：不重复的集合

//ES6才支持Set，可以去重
var set = new Set([3,2,1,3,4,9]);
//1.添加
set.add(10)
//2.删除
set.delete(3)
//3.是否包含
console.log(set.has(2))
console.log(set)

3.6 iterator遍历迭代Map、Set

//使用forof遍历Set
var set = new Set([3, 2, 1, 3, 4, 9]);
for (var x of set) {
    console.log(x)
}

//使用forof遍历Map
var map = new Map([["tom", 20], ["jack", 80], ["song", 100]]);
for (var m of map) {
    console.log(m)
}

4. 函数

方法：存在在对象中，对象（属性、方法）

函数：函数放在对象中就是方法

4.1 定义函数

定义方式一：

绝对值函数

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

console.log(abs(-12))

一旦执行到return代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二：

var abs = function (x) {
    if (x >= 0)
        return x;
    else
        return -x;
}
console.log(abs(-12));

function(x){…}是一个匿名函数（类似Java的匿名内部类），但是可以把结果赋值给abs，通过abs就可以调用。

方式一和方式二等价！

调用函数：

abs(10)//10
abs(-12)//12

参数问题：

javascript可以传递任意个参数，也可以不传递参数，都不会产生报错！

参数进来是否存在的问题？假设不存在参数，如何规避？–考虑手动抛出异常。

var abs = function (x) {
    //手动抛出异常
    if (typeof x != "number") {
        throw "Not a number!"
    }
    if (x >= 0)
        return x;
    else
        return -x;
}
console.log(abs('a'));

多个参数：

**arguments**是JS免费赠送的关键字；
代表传递进来的所有参数，是一个数组

var abs = function (x) {
    console.log("x--> " + x);
    for (let i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
    }
}
console.log(abs(12, 43, 23, -435, 88));

存在的问题：arguments包含所有的参数，有时候想要使用多余的参数（如上例中除了第一个参数x外的其他参数）来进行附加的操作，需要排除已有的参数，且已有参数个数未知。

传统解决方式：

var abs = function (a, b) {
    console.log(a);
    console.log(b);
    if (arguments.length > 2) {
        for (let i = 2; i < arguments.length ; i++) {
            console.log(arguments[i]);
        }
    }
}
console.log(abs(12, 43, 23, -435,10));

新的解决方式：

reset：获取除了已经定义了的其他参数
ES6引入的新特性
rest接收的是可变参数，只能写在最后面，必须用…标识

var abs = function (a, b,...rest) {
    console.log(a);
    console.log(b);
    for (let x of rest) {
        console.log(x)
    }
}
console.log(abs(12, 43, 23, -435,10));

4.2 变量作用域

作用域

以下报错说明，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用！（闭包）

function f(x) {
    var a = 1;
    var b = 2;
    console.log(a * b * x);
}

console.log(a);//Uncaught ReferenceError: a is not defined

如果两个函数使用了相同的变量名，不影响

function f(x) {
    var a = 1;
    var b = 2;
    console.log(a * b * x);
}

function g(x) {
    var a = 10;
    var b = 20;
    console.log(a * b * x);
}

console.log(f(10));
console.log(g(10));

内部函数可以访问外部函数的变量，反之不可（外部不可以访问内部变量）

function f(x) {
    var a = 1;

    function g() {
        var b = 10;
        console.log("内部引用外部的：" + a);
    }
    g()
    console.log("外部引用内部的:" + b);//Uncaught ReferenceError: b is not defined
}

假设内部函数变量名与外部函数变量名，重名

在JavaScript中函数查找变量名是从函数自身开始，由“内”向“外”查找
假设在函数外部存在重名的函数变量，则内部函数会屏蔽外部函数的同名变量

function f(x) {
    var a = 1;

    function g() {
        var a = 10;
        console.log("内部：" + a);//10
    }
    console.log("外部:" + a);//1
    g()
}

提升变量的作用域：

说明：js执行引擎，自动提升了b的声明，但是不会提升变量b的赋值。

这是在js建立之初就存在特性，故要

养生规范：所有的变量定义都要放在函数头部，不要乱放，便于代码维护。

function f(x) {
    var a = 1;
    console.log(a + b);//NaN
    var b = 10;
}

//上面等价于下面，即会自动把b的定义提前，但是赋值位置不会改变
function g(x) {
    var b;
    var a = 1;
    console.log(a + b);//NaN
    b = 10;
}

全局函数：

//全局变量
x = 1;
function g() {
    console.log(x);
}
g();

全局对象window:

默认所有全局变量都会默认绑定在window对象下。

//全局变量
x = 1;
alert(x);
//默认所有全局变量都会默认绑定在windows对象下。
alert(window.x);//与上面等价

alert()本身也是一个window的变量

//全局变量
x = 1111;
alert(x);
//默认所有全局变量都会默认绑定在windows对象下。
alert(window.x);//与上面等价
window.alert(x);
var old_alert = window.alert;
old_alert(x);
//自定义一个变量，覆盖了原始的alert变量
window.alert = function () {

};
window.alert(123);//发现alert失效

//恢复
window.alert = old_alert
window.alert(456)//可以弹出

说明JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，到window全局对象；如果在全局作用域都没找到，报错ReferenceError!

规范：

由于我们所有的全局变量都会绑定到window上，如果不同的js文件，使用了相同的全局变量，冲突->冲突—>如何减少冲突？

解决方式：把自己的代码全部放入自己定义的唯一命名空间中，降低全局命名冲突。

jQuery就是这样实现的。

//设置命名空间
var song = {};

//定义全局变量、函数等（无需var，直接通过自己创建命名空间）
song.a = 10;
song.b = 100;
song.add = function (a, b) {
    return a + b;
}

局部作用域let：

原始var存在问题：

function f(){
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i+1);//发现的问题：i出了内部作用域，仍然可以使用
}
f()

ES6 let关键字可以解决局部作用域冲突

function f(){
    for (let i = 0; i < 10; i++) {
        console.log(i);
    }
    console.log(i+1);//Uncaught ReferenceError: i is not defined
}
f()

建议都使用let去定义局部作用域的变量！

常量const

在ES6之前，如何定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值。（只能是人为的遵守约定，但是可以修改）

var PI = 3.14;
console.log(PI);
PI = 10.894;//可以修改
console.log(PI);

ES6中引入了常量关键字 const

const PI = 3.14;//只读
console.log(PI);
PI = 10.894;//不可以修改，Uncaught TypeError: Assignment to constant variable.

4.3 方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法。

var stu = {
    name: "zhangsna",
    birth: 2020,
    //方法
    age: function () {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
console.log(stu.age())

//属性
stu.name
//方法,一定要带括号
stu.age()

this代表什么？对上面代码做拆分

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;//单独调用时，this指的是window，没有birth属性
}

var stu = {
    name: "zhangsna",
    birth: 2020,
    //方法
    age: getAge//内部只写函数名即可，代表方法名
}
console.log(stu.age())//2
console.log(getAge())//NaN

this是无法指向的，是默认指向调用它的那个对象。

apply：

在js中可以控制this指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}

var stu = {
    name: "zhangsna",
    birth: 2020,
    //方法
    age: getAge
}
//getAge.apply(stu,[]);//表明将this指向了stu，参数为空
console.log(stu.age())//2
console.log(getAge.apply(stu,[]))//2

5. 内部对象

标准对象：

typeof 123
'number'
typeof "abc"
'string'
typeof true
'boolean'
typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'
typeof undefined
'undefined'

5.1 Date

基本使用：

var now = new Date();
console.log(now);//当前时间Sat Mar 05 2022 15:36:51 GMT+0800 (中国标准时间)
now.getFullYear();//年
now.getMonth();//月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳  全世界统一  1970.1.1 0:00:00开始的毫秒数

//时间戳转回本地时间
console.log(new Date(1646466049251));
console.log(now.toLocaleString());//转成本地时间的方法

5.2 JSON

早起所有数据传输都用XML文件。

json是什么？

JSON（JavaScript Object Notation，JS对象简谱）是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示，包括数字、字符

格式：

对象都用{}
数组都用[]
所有键值对都用key:value

JSON字符串和JS对象的转化

var user = {
    name: "song",
    age: 23,
    sex: "女"
}
//1.对象转成JSON字符串
var jsonuser = JSON.stringify(user);//'{"name":"song","age":23,"sex":"女"}'

//2.JSON字符串转成对象,参数为json字符串
var obj = JSON.parse('{"name":"song","age":23,"sex":"女"}');

结果：

user
{name: 'song', age: 23, sex: '女'}age: 23name: "song"sex: "女"[[Prototype]]: Object
jsonuser
'{"name":"song","age":23,"sex":"女"}'
obj

JSON个JS对象的区别：

//js对象
var obj = {a:"hello a",b:"hello b"};
//JSON，是一个字符串，里面用双引号，外面字符串就用单引号，要区分开
var json = '{"a":"hello a","b":"hello b"}';

5.3 Ajax

原生的js写法，xhr异步请求
jQuery封装好的方法 $(#name"").ajax("")
axios请求

6. 面向对象编程

6.1 原型对象

javascript、java、c#…都可以面向对象；但是javascript有一些区别。

类：模板（js中叫原型对象）
对象：具体的实例

在javascript这个需要大家换一下思维方式！

原型：

（类似指明继承的父类，指定原型后，可以继承其属性与方法）

var stu = {
    name: "song",
    age: 23,
    sex: "女",
    run: function () {
        console.log(this.name + " is running!");
    }
};

var zhangsan = {
    name: "zhangsan"
};

//原型对象
//张三的原型是stu,可以继承其的方法属性
zhangsan.__proto__ = stu;
console.log(zhangsan.run());
console.log(zhangsan.age);

var Bird = {
    fly: function () {
        console.log("It is flying!");
    }
};

//改变张三的原型是Bird,可以继承其的方法属性
zhangsan.__proto__ = Bird;
console.log(zhangsan.fly());

ES6之前定义一个类？？

function Student(name) {
    this.name = name;
}

//给Student新增一个hello方法,找到其原型再新增
Student.prototype.hello = function () {
    alert("hello world!");
}

6.2 class对象

class继承：

class关键字是在ES6引入的

1、定义一个类，属性、方法

//ES6之后
//定义一个学生的类
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('hello world!');
    }
}

//定义一个学生对象
var stu1 = new Student("zhangsan");
stu1.hello();

2、继承

//ES6之后

//定义一个学生的类
class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('hello world!');
    }
}

//继承
class XiaoStudent extends Student {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myGrade() {
        alert(this.name+"的成绩是：" + this.grade);
    }
}

//定义一个学生对象
var stu1 = new Student("zhangsan");
stu1.hello();

var stu2=new XiaoStudent("lisi",100);
var stu3=new XiaoStudent("wangwu",98);
stu2.myGrade();
stu3.myGrade();

本质：查看对象原型，还是利用的原型对象，但是更易理解。

6.3 原型链

7. 操作BOM对象（重点）

7.1 浏览器介绍

B：浏览器

BOM：浏览器对象模型

JavaScript和浏览器关系？

JavaScript诞生就是为了能让它再浏览器中运行！

浏览器内核：

IE
Chrome
Safari
FireFox：Linux

三方浏览器：（用的还是上面的内核）

QQ浏览器
360浏览器

7.2 操作浏览器

window：

window代表浏览器窗口

window.innerHeight
2572
window.innerWidth
441
window.outerHeight
643
window.outerWidth
110
//可以调整浏览器窗口再试试

Navigator：

Navigator，封装了浏览器的信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Mobile Safari/537.36 Edg/98.0.1108.62'
navigator.platform
'Win32'
navigator.userAgent
'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Mobile Safari/537.36 Edg/98.0.1108.62'

大部分情况下不会使用navigator对象，因为会被人为修改。不建议使用这些属性和判断来编写代码。

screen：

代表屏幕尺寸

screen.height
685
screen.width
650

location（重要）：

location代表当前页面的URL信息

host: "localhost:63342"
hostname: "localhost"
href: "http://localhost:63342/JavaScript_Study/lesson01/js/5.%E5%87%BD%E6%95%B0.html?_ijt=d9eo45thisp1ihfd074mflom4a&_ij_reload=RELOAD_ON_SAVE"
origin: "http://localhost:63342"
pathname: "/JavaScript_Study/lesson01/js/5.%E5%87%BD%E6%95%B0.html"
port: "63342"
protocol: "http:"
reload: ƒ reload()//刷新网页



//设置新的地址：让当前网页跳转到指定地址
location.assign("https://www.taobao.com/")

document（内容）：

document代表当前的页面，HTML、DOM文档树

document.title
'淘宝网 - 淘！我喜欢'
document.title="song"
'song'
document.title
'song'

能够获取具体的文档树节点

<dl id="app">
    <dt class="title">Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    var dl = document.getElementById("app");
    console.log(dl);

</script>

能够获取到网页cookie

document.cookie
''

劫持cookie原理：www.taobao.com

登录过程中的信息存储在cookie中；恶意获取cookie上传到它的服务器。

服务器端可以设置cookie：httpOmly来保证安全。

history：

history代表浏览器的历史记录

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

8. 操作DOM对象（重点）

DOM：文档对象模型。

浏览器网页就是一个DOM树形结构！

更新：更新Dom节点
删除：删除一个Dom节点
添加：添加一个新的节点

要操作一个Dom节点，就必须先获得这个Dom节点。

获得Dom节点：

div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //对应CSS选择器
    var h1 = document.getElementsByTagName("h1");//通过标签获得
    var p1 = document.getElementById("p1");//通过id获得
    var p2 = document.getElementsByClassName("p2");//通过class获得
    var father = document.getElementById("father");

    var childrends = father.children;//获取父节点下的所有节点
    var firstchild = father.firstChild;
    var lastchild = father.lastChild;

</script>

这是原生代码，之后尽量使用jQuery()

更新节点：

操作文本
操作js

<div id="id1"></div>
<script>
    //对应CSS选择器
    var id1 = document.getElementById("id1");

    //操作文本
    id1.innerText = "123";//修改文本的值
    id1.innerHTML = '<strong>789</strong>';//解析HTML文本标签

    //操作js，注意属性值使用字符串包裹；属性名驼峰命名
    id1.style.color = "red";//设置属性
    id1.style.fontSize = "30px";
    id1.style.padding = "2em";

</script>

删除节点：

删除节点的步骤：先获取父节点，再通过父节点删除自己。

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    //1.先获取要删除的节点
    var p1 = document.getElementById("p1");
    //2.通过要删除的节点获得其父节点
    var father = p1.parentElement;
    //3.通过父节点删除子节点
    father.removeChild(p1);
    
    
    //删除是一个动态的过程：删除多个节点的时候，children是在时刻变化的
    father.removeChild(father.children[0]);//生效删除的是指定目标
    father.removeChild(father.children[1]);//指定目标的位置已经改变
    father.removeChild(father.children[2]);
</script>

注意：删除多个节点的时候，children是在时刻变化的！

插入节点：

我们获得了某个Dom节点，假设这个Dom节点是空的，我们通过innerHTML就可以增加一个元素了，但是这个Dom就已经存在元素了，我们就不能这么干了！会产生覆盖。

追加已经存在的节点

<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>
    var js = document.getElementById("js");
    var list = document.getElementById("list");

    list.appendChild(js);//追加到后面

</script>

效果：

创建新的节点，实现追加：

<div id="list">
    <p id="se">JavaSE</p>
    <p id="ee">JavaEE</p>
    <p id="me">JavaME</p>
</div>

<script>
    //getElementById()返回的是一个唯一的指定元素
    var js = document.getElementById("js");
    var list = document.getElementById("list");

    //通过JS创建一个新节点
    var newP = document.createElement('p');//创建一个p标签
    newP.id = "newP";//为新创建的元素设置属性
    newP.setAttribute('id', 'newP');//等价与上面，是公用的写法
    newP.innerText = "Hello World";
    list.appendChild(newP);//追加到已有的父节点

    //创建一个标签节点
    var myScript = document.createElement("Script");//创建一个Script标签
    //setAttribute()方法是设置属性的万能方式
    myScript.setAttribute('type', 'text/javascript');//设置属性值
    list.appendChild(myScript);

    //getElementsByTagName()返回的是一个集合
    var p = document.getElementsByTagName("p");//

    var body = document.getElementsByTagName("body");//返回的是一个集合
    body[0].style.background = "red";//对于唯一的body标签来说，他就是数组的第一个元素
</script>

效果：

创建新的节点，实现插入到前面：

<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>
    var list = document.getElementById('list');
    var ee = document.getElementById('ee');
    var js = document.getElementById('js');
    //要包含的节点.insertBefore(newNode,target)---把新节点插入到目标节点前面
    list.insertBefore(js, ee);//通过父节点把js插入到ee前面
</script>

jQuery推荐的学习网站：

https://jquery.cuishifeng.cn/

9. 操作表单（验证）

表单是什么？

form 来自DOM树

文本框 text
下拉框 select
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

获得表单提交的信息：

<form action="post">
    <p>
        <span>用户名：</span>
        <input type="text" id="username">
    </p>

    <!--单选框、多选框的值都是定义好的value-->
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>

<script>
    var input_text = document.getElementById("username");
    var boy = document.getElementById('boy');
    var girl = document.getElementById('girl');

    //得到输入框中的值
    input_text.value
    //修改输入框中的值
    input_text.value = "123user";

    //对于单选框、多选框等固定的值，.value只能取到固定赋予的值，与选中的值无关
    boy.value;//man
    girl.value;//woman

    //获取单选框、多选框选中的值，只能根据是否选中来判断
    boy.checked;//true false
    girl.checked;//true false
    //设定是否选中,赋值
    boy.checked = true;
</script>

提交表单：

<!--1.表单级别的提交:onsubmit 方式 绑定一个函数-->
<form action="https://hao.360.com/" method="post" onsubmit="aaa()">
    <!--  必须要有name属性，提交的值才能抓取到  -->
    <p>
        <span>用户名：</span>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span>
        <input type="password" id="password">
        <!--  必须要有name属性，提交的值才能抓取到 ,对于真实的密码不设置name属性，则post中就不会获取到-->
        <input type="hidden" id="md5-password" name="password">
        <!--   抓取到的是加密后的密码     -->
    </p>


    <!--2.按钮级别的提交：按钮 绑定事件  onclick  被点击    -->
    <!--    <button type="submit" οnclick="aaa()">提交</button>-->
    <button type="submit">提交</button>
</form>

<script>
    function aaa() {
        var username = document.getElementById('username');
        var password = document.getElementById('password');
        var md5pwd = document.getElementById('md5-password');
        //md5pwd.value=md5(password);//通过md5算法对真实密码进行加密，提交的是加密后的密码
        md5pwd.value = "*****"

        console.log(username.value);
        console.log(password.value);

        //可以校验表单内容，true就是通过提交；false就是阻止提交
        return true;
    }
</script>

10. jQuery

JavaScript

jQuery是一个库，里面存在大量JavaScript的函数（即封装了很多）

获取jQuery：在线的 or 下载的

https://jquery.com/download/

https://jquery.cuishifeng.cn/

https://www.jq22.com/cdn/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  cdn导入，在线的  -->
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!--  本地导入  -->
    <script src="lib/jquery-3.6.0.min.js"></script>

</head>
<body>

</body>
</html>

jQuery的使用公式：

公式： $(selector选择器).action()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--  cdn导入，在线的  -->
    <!--    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>-->
    <!--  本地导入  -->
    <script src="lib/jquery-3.6.0.min.js"></script>

</head>
<body>
<!--公式： $(selector).action()-->
<a href="" id="test-jQuery">点我</a>
<a href="" id="test-jQuery2">点我2</a>
<script>
    //方式一：原始的获取元素、使用方法等
    var test = document.getElementById('test-jQuery2');
    test.click()

    //方式二：使用jQuery
    //选择器就是css的选择器
    $('#test-jQuery').click(function () {
        alert("hello world!");
    })
</script>

</body>
</html>

选择器selector:

//原生js，选择器少，麻烦不好记
//标签选择器
document.getElementsByTagName();
//id选择器
document.getElementById();
//类选择器
document.getElementsByClassName();


//jQuery  css中的所有选择器都可以使用
$('p').click()//标签选择器
$('#id').click()//id选择器
$('.class').click()//class选择器

文档工具：

https://jquery.cuishifeng.cn/

事件action：

鼠标事件、键盘事件、其他事件

mousedown() 鼠标按下
mousemove() 鼠标移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jquery-3.6.0.js"></script>
    <style>
        #divMove {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>

</head>
<body>
<!--要求：获取鼠标当前的一个坐标-->
mouse: <span id="mouseMove"></span>
<div id="divMove">
    在这里移动鼠标试试
</div>

<script>
    //当网页元素加载完毕之后，响应事件
    //$(document).ready(function (){});
    //对以上加载事件的简化形式
    $(function () {
        $(`#divMove`).mousemove(function (e) {
            //提示：获取选择器是一定要完全与CSS相同，不要忘记#id  .class p等的符号
            $('#mouseMove').text('x:' + e.pageX + '; y:' + e.pageY);
        });
    });
</script>
</body>
</html>

发现的问题：

jquery-3.6.0.min.js中不含有mousemove函数
jquery-3.6.0.js中有mousemove函数

操作DOM

节点文本操作：

<ul id="test-ul">
    <li class="js">JavaScript</li>
    <li name="python">Python</li>
</ul>

<script>
    //原始直接通过js修改DOM的方式
    /*var js = document.getElementsByClassName('js');
    js[0].textContent = "js.....";*/

    //通过jQuery修改DOM的方式
    $('.sjs').text("JavaScript is good!");
    $(`#test-ul li[name='python']`).text();//无参数获得值
    $(`#test-ul li[name='python']`).text('python is good');//有参数设置值
    $('#test-ul').html();//获得值
    $('#test-ul').html('<span>123<span>');//设置值

</script>

CSS操作：

$(`#test-ul li[name='python']`).css({ "color": "#ff0011", "background": "blue" })//修改css样式，多个键值对

元素的显示隐藏：display:none;

$('.js').show();//显示
$('.js').hide();//隐藏

未来：ajax()

$('#form').ajax();

小技巧：

1、如何巩固JS？（看jQuery源码，看游戏源码！）

2、巩固HTML、CSS（扒网站，全部down下来，然后对应修改看效果）

Layer 弹窗组件

Element UI

气运2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

前端三要素：HTML（结构）：超文本标记语言，Hyper Text Markup Language，决定网页的结构和内容。CSS（表现）：层叠样式表，Cascading Style Sheets，设定网页的表现样式。针对CSS的编程语言：LESS、SASSJavaScript（行为）：是一种弱类型脚本语言，其源代码不需要经过编译，而是由浏览器解释运行，用于控制网页的行为。JQuery是一个库，Angular、React、Vue是三大框架。[外链图片转存失败,源站可能有防盗链
复制链接

扫一扫