前端学习之JS - 台部落

JavaScript简介

JavaScript概述

JavaScript简称JS，是一种具有函数优先的轻量级，解释型或即时编译型的编程语言，它是一门世界上最流行的脚本语言。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。

JavaScript的标准是ECMAScript，截至2012年，所有浏览器都完整地支持ECMAScript5.1。2015年6月17日，ECMA国际组织发布了ECMAScript的第六版，该版本正式成为ECMAScript2015，但通常称其为ECMAScript6或者ES6。

JavaScript由三部分组成：ECMAScript，文档对象模型，浏览器对象模型。

ECMAScript描述了该语言的语法和基本对象。

文档对象模型（DOM），描述处理网页内容的方法和接口。

浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

JavaScript特点

JavaScript是一种属于网络的脚本语言，已被广泛用于进行web应用开发。常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。通常JavaScript是通过嵌入在HTML中来实现自身功能。

主要特点有：

JavaScript是一种解释型脚本语言
主要用来向HTML页面添加交互行为
可以直接嵌入HTML页面，但写成独立的js文件有利于结构和行为的分离
跨平台性
JavaScript同其他语言一样，有其自身的基本数据类型、表达式和算术运算符以及程序的基本程序框架

入门

JavaScript的引入

在HTML中引入JavaScript有以下两种方式。

通过内部标签
外部引入

内部标签

<script>
    // js代码
</script>

外部引入：将js文件导入到HTML中，src中是js的路径。

<script src="xxx.js"></script>

基本语法

JavaScript是严格区分大小写的。

我们一般是在浏览器里进行代码的调试。如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zJ7M7s9y-1581070780316)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578550932599.png)]

可以使用console.log()在浏览器的控制台打印变量。

数据类型

变量

在JavaScript中，不管是什么类型的变量，都是使用var来定义的。但在ES6之后建议使用let来定义变量。

var a = 123;

number

在JavaScript中不区分小数和整数，都是number。

111   // 整数111
11.23  // 浮点数 11.23
1.11e3  // 科学计数法表示
-22    // 负数
NaN    // not a number
Infinity   // 表示无限大

字符串

字符串可以用单引号包裹，也可以使用双引号包裹。

'hello'
"javascript"

布尔值

布尔值就两个：true和false。

逻辑运算

&&    // 短路与   两个为真，则结果为真
||    // 短路或   一个为真，则结果为真
!     // 非   真即假，假即真

比较运算符

=    // 表示赋值
==   // 等于，类型不一样，值一样，则也会被判断为true
===  // 绝对等于，类型一样，值一样，结才为true

在JavaScript中，进行判断的时候，不要使用==，需要使用===来进行比较。

注意：

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

浮点数问题：

使用 console.log((1/3) === (1-2/3))，打印出的结果是false。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cI3GeHLi-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578552787586.png)]

这个结果与我们预期的不一样，这是因为浮点数在进行运算的时候，会存在精度的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UlX0rdG4-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578552970162.png)]

所以要尽量避免使用浮点数进行计算。可以使用比较两数相减的绝对值是否小于某个数来解决问题。如

Math.abs((1/3)-(1-2/3))<0.0000000001;

null和undefined

null代表空。

undefined代表未定义。

数组

在Java中数组的中的元素必须是相同类型，但是在JavaScript中数组的元素可以是不同的类型。

var array = [1,2,3,'javascript',true,null];

也可以使用 new 关键字来创建数组。

new Array(1,2,3,"javascript",false);

在JavaScript中一般不会报错，如果数组下标越界则会报 undefined。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tm4uXZY4-1581070780318)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578556486351.png)]

对象

使用大括号，将对象的属性包裹。

每个属性之间需要用逗号隔开，最后一个不需要添加逗号。

var person = {name: 'xx', age: 10, gender: 'female'};

取对象的值，使用对象名.属性。

> person.name
< "xx"
>person.age
< 10
> person.gender
< "female"

严格检查格式

在代码的第一行加上 ‘use strict’; 就表示是严格检查模式。这样做的好处是可以预防由于JavaScript的随意性导致的一些问题。

使用严格检查模式的前提是IEDA需要设置支持ES6语法。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AsNnc4Kx-1581070780319)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578574834101.png)]

<script>
    'use strict';
    let a = 1;
</script>

局部变量建议使用let进行定义。

数据类型

字符串

1、正常的字符串一般使用单引号( ‘’ )或者双引号( “” )包裹。

2、转义字符则需要加上 \

\'    // 单引号
\"    // 双引号
\n    // 换行
\t    // 制表符
\u4e2d   // Unicode字符    \uxxxx
\x41     // Ascll字符

3、多行字符串

// 使用Tab键上面的符号将字符串包裹起来
var str = `
hello
javascript
`

4、模板字符串

在java中，可以使用字符串拼接符进行字符串的拼接。在JavaScript中，可以使用${}进行拼接，此时需要使用Tab键上面的符号将字符串包裹起来。

let name = 'xx';
let age = 5;

let str = `hello,${name}`;

5、字符串长度

字符串是有长度的，可以使用字符串名.length 来得到字符串的长度。

同java，字符串是不可变的。

6、大小写转换

进行字符串的大小写转换时，需要调用方法。需要注意的是字符串本身没改变，调用方法后返回了进行转换后新的字符串。

string.toUpperCase()    // 转为大写
string.toLowerCase()    // 转为小写

7、索引

可以通过 indexOf() 方法得到某个字符的索引。

string.indexOf('x');

8、子字符串

可以通过 substring() 方法截取字符串。

string.substring(0)   // 从第一个字符截取到最后一个字符
string.substring(1,6) // 从下标为1的字符开始，截取到下标为6的字符，但不包含下标为6的字符，即含头不含尾

数组

不同于java，JavaScript中的数组可以存放任意数据类型的元素。

1、数组长度

可以通过数组名.length 获取数组的长度。

var arr = [1,2,'abc',true];
var len = arr.length;

需要注意的是，可以给 arr.length 赋值，此时数组大小就会发生变化。如果赋的值比原本的数组长度大，那么增加的元素为空；如果赋的值比原本的数组长度小，那么就会产生数组元素丢失的情况。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TnxNeqlS-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578560931732.png)]

2、数组下标索引

可以通过 indexOf() 通过元素获取下标索引。

arr.indexOf(1)

注意：数字1和字符串’1’是不同的。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y2WeHnYP-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578561177698.png)]

3、切片

我们可以通过 slice() 截取数组的一部分，该方法返回一个新的数组，不改变原数组。该方法类似于字符串中的substring() 方法。

arr.slice(2)      // 从下标为2开始截取到最后一个元素
arr.slice(1,3)    // 从下标为1开始截取到下标为3，得到的新数组中包含下标为1的元素，但不包含下标为3的元素，即含头不含尾

4、尾部操作数组 push() pop()

在数组的尾部操作数组，可以使用push()，pop()方法。

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

5、头部操作数组 unshift() shift()

在数组的头部操作数组，可以使用unshift()，shift() 方法。

unshift(): 将元素压入到头部
shift():   弹出头部的一个元素

6、数组排序 sort()

可以使用sort() 方法对数组进行排序。

arr.sort()

7、数组元素反转 reverse()

可以使用reverse()方法对数组元素进行反转。

arr.reverse()

8、数组的拼接

使用concat() 方法进行数组的拼接。该方法并没有修改数组，只是返回一个新的数组。

arr.concat([11,22,33])

9、连接符join

在打印拼接数组的时候，可以使用特定的字符串进行连接

arr.join('-')

10、多维数组

这里以二维数组为例：

arr = [[2,1],['5','6'],[true,false];

对象

对象是由若干个键值对构成的。

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

举例：

var person = {
    name:'zhangsan',
    age:10,
    gender:'male'
}

在JavaScript中，{…}表示一个对象，键值对用于描述属性 xxx : xxx，多个属性之间用逗号隔开，最后一个属性不用加逗号。

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

1、对象赋值

person.name = 'lisi';    // 该语句时对对象中的name属性进行赋值操作

2、使用一个不存在的对象属性，程序不会报错，结果是undefined。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nSpHn2wN-1581070780320)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578570930206.png)]

3、动态删减属性

可以通过delete动态删除对象的属性。若删除成功则返回true，否则返回false。

delete person.age

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9cemyUu0-1581070780321)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578571061023.png)]

4、动态添加属性

直接给新的属性添加值就可以完成动态添加属性的操作。

person.score = 90

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9l7MDTMM-1581070780321)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578571210990.png)]

5、判断属性是否在对象中

使用 in 关键字判断。返回结果为true或false。

// 由于JavaScript中的键都是字符串，所以判断的时候，需要给属性名加上单引号或双引号
'age' in person
'toString' in person   // person对象继承了Object，所以person对象有toString

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

使用 hasOwnProperty() 进行判断。

person.hasOwnProperty('toString')   // 结果为false
person.hasOwnProperty('age')        // 结果为true

流程控制

JavaScript中的流程语句的使用和java差不多。

1、if语句

var score = 80;
if (score > 60 && score <75){
    alert('及格');
}else if(num >= 75 && num >85){
    alert('良好')
}else{
    alert('优秀')
}

2、while循环需要注意的是避免死循环

var i = 1;
while(i < 50){
    i = i + 1;
    console.log(i)
}

3、do-while循环

var i = 1;
do {
    i = i + 1;
    console.log(i)
}

4、for循环

for (var i = 0; i < 100; i++) {
        console.log(i)
}

5、foreach循环

var arr = [1,2,3,4,5,6,7,8,9];

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

6、for…in

var arr = [1,2,3,4,5,6,7,8,9];

// for(var index in array){}
for (var num in arr){      // num表示的是下标
    console.log(arr[num])
}

Map和Set

Map 和 Set是ES6的新特性。

1、Map

var map = new Map([['Tom',80],['Jack',90],['Kim',85]]);   // [键,值]
var name = map.get('Tom');   // 通过键获取值
map.set('admin',123)         // 使用set()方法添加新的键值对，或者进行修改
map.delete("Jack")           // 使用delete()方法删除键值对

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sPtPaXjR-1581070780322)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575205147.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ldoYnyRG-1581070780323)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575235938.png)]

2、Set

Set是无序且不重复的集合

var set = new Set([1,2,3,5,3,2,4]);
set.add(10);           // 通过set()方法添加元素
set.delete(5);         // 通过delete()方法删除元素，若删除成功则返回true，否则返回false。
set.has(10);           // 通过has()方法判断集合中是否含有该元素，返回true或false。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wAhi7YEd-1581070780324)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578575670080.png)]

iterator

iteartor是ES6的新特性。可以使用iterator来遍历Map和Set。

通过 for…of进行遍历， for…in得到的是下标。

for (var/let 变量名 of 数组/容器){}

1、遍历数组

var arr = [2,3,'js',true];
    for (var x of arr){
        console.log(x)
    }

2、遍历Map

var map = new Map([['Tom',80],['Jack',90],['Kim',85]]);
for (let x of map){
    console.log(x)
}

3、遍历Set

var set = new Set([1,3,5,2,3,2,4]);
for (let x of set){
    console.log(x)
}

函数

函数定义

函数的定义有两种方式。

定义方式一

function 函数名(参数列表){}

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

定义方式二

var 函数名 = function(参数列表){}

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

function(){…} 这是一个匿名函数，可以把结果赋值给函数名，通过函数名就可以调用该函数。

方式一和方式二是等价的。

调用函数

// 函数名(参数)
abs(-100)

参数问题：JavaScript 可以传递任意个参数，也可以不传递参数。

arguments

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

var abs = function(x){
    for (var i = 0; i < arguments.length; i++){
        console.log(arguments[i]);
    }
    if (x >= 0){
        return x;
    }else {
        return -x;    }
}

虽然arguments代表所有的参数，但是存在一个问题就是我们有时候想要使用多余的参数来进行附加操作时，就不是很方便操作。这时就需要排除掉已有的参数。

rest

在rest关键字出现之前，使用多余的参数时如下：

if (arguments.length > 2){
    for (var i = 0;i < arguments.length; i++){
        //...
    }
}

rest关键字是ES6引入的新特性，它的作用是获取除了已经定义的参数之外的所有参数。

function fun(x,y,...rest){
    console.log('x->'+x);
    console.log('y->'+y);
    console.log('rest->'+rest);
}

注意：rest参数只能写在最后面，必须使用 … 标识。

变量的作用域

在JavaScript中，var定义变量是有作用域的。

1、在函数体内声明的变量，在函数体外就不能使用。

function fun(){
    var x = 1;
    x = x + 1;
}
x = x + 2;      // 该语句会报  Uncaught ReferenceError: x is not defined

2、如果两个函数使用了相同的变量名，只要变量的作用域是在函数内部，就不会产生冲突。

function fun(){
    var x = 1;
    x = x + 1;
}

function fun1(){
    var x = '1';
    x = x + 2;
}

3、内部函数可以访问外部函数的成员，反之不可。

function fun(){
    var x = 1;
    function fun1(){
        var y = x +2;    // y=3，内部函数可以访问外部函数的成员
    }
    z = y + 3;           // Uncaught ReferenceError: y is not defined
}

4、内部函数和外部函数变量重名

当内部函数和外部函数的变量重名时，如下

function fun(){
    var x = 1;
    function fun1(){
        var x = 'a';
        console.log('inner x->'+x);
    }
    console.log('outer x->'+x);
}

在JavaScript中，函数查找变量是从自身函数开始，由内向外查找。假设外部函数存在这个同名的函数变量，那么内部函数就会屏蔽掉外部函数的变量。

5、变量作用域的提升

function fun(){
    var x = 'x' + y;
    console.log(x);
    var y = 'y';
}

这段代码的运行结果是：x undefined。

以上结果说明了JavaScript执行引擎，会自动提升y的声明，但是并不会提升y的赋值。这段代码相当于以下代码：

function fun(){
    var y;
    var x = 'x' + y;
    console.log(x);
    y = 'y';
}

这个特性是在JavaScript建立之初就存在的特性。所以在写代码的时候，要养成规范即所有的变量定义都放在函数的头部，不要乱放。这样便于代码的维护。

6、全局函数

定义在函数外面的变量就是全局变量。

x = 1;
function fun(){
    console.log(x);
}
console.log(x);

window是一个全局对象。默认所有的全局变量，都会自动绑定到window对象下。

var x = 'xx';
alert(x);
alert(window.x);

alert() 这个函数本身也是一个 window 变量。

var x = 'x';
window.alert(x);

JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就后向外查找，如果在全局作用域都没有找到，则会报错 RefrenceError。

7、规范

由于所有的全局变量都会自动绑定到window对象上。不同的js文件使用了相同的全局变量，则会产生冲突。减少冲突的办法就是：把自己的代码全部放到自己定义的唯一空间名字中。

// 唯一全局变量
var User = {};

// 定义全局变量
User.name = 'xx';
User.age = 3;
User.getName = function(){
    return this.name;
}

8、局部作用域

function fun(){
    for (var i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);
}

以上的代码存在一个问题：当出了for循环之后，i还可以使用。

解决此问题的办法就是使用 let 关键字定义变量。let 关键字是ES6的新特性，作用是解决局部作用域冲突的问题。

function fun(){
    for (let i = 0; i < 100; i++){
        console.log(i);
    }
    console.log(i+1);
}

建议都是用let定义局部作用域的变量

9、常量const

在ES6之前，常量的定义方式是用全部大写字母命名的变量就是常量。但是这样子定义的常量的值实际上是可以修改的，但是建议不要修改。

var PI = '3.14';
console.log(PI);
PI = '123';   // 常量PI的值实际上可以修改
console.log(PI);

ES6引入了关键字 const来定义常量。

const PI = '3.14';
console.log(PI);
PI = '123';     // TypeError: Assignment to constant variable.

方法

1、方法的定义

把函数放在对象里面，这样的函数称为方法。对象中只有两个东西：属性和方法。

var person = {
    name:'xx',
    birth:1999,
    age:function(){
        var now = new Date().getFullYear();
        return now-this.birth;
    }
}
// 属性
person.name
// 方法 需要带括号
person.age()

this表示什么？将上面的代码拆分如下：

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var person = {
    name:'xx',
    birth:1999,
    age:getAge
}

person.age()   // 结果为21  ok
getAge()       // 结果为NaN

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FmvHDxY2-1581070780324)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578641472509.png)]

以上结果说明，this是无法进行指向的，它是默认指向调用它的那个对象。

2、apply 关键字

在JavaScript中可以控制this的指向，使用apply关键字。

function getAge(){
    var now = new Date().getFullYear();
    return now-this.birth;
}
var person = {
    name:'xx',
    birth:1999,
    age:getAge
}

getAge.apply(person,[]);// this，指向了 person，参数为空

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7LYOq1VX-1581070780325)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578641957374.png)]

内部对象

标准对象

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

JavaScript中的标准对象大致就是以上几种类型。

Date

Date的基本使用

var now = new Date();    // 创建一个Date对象
now.getFullYear();       // 年
now.getMonth();          // 0~11 表示月份
now.getDate();           // 日
now.getDay();            // 星期几
now.getHours();          // 小时
now.getMinutes();        // 分钟
now.getSeconds();        // 秒
now.getTime();           // 获取时间戳   全世界统一，从1970 1.1 00:00:00 开始的毫秒数
new Date(1578642531249)  // 将时间戳转为时间

日期的转换

now = new Date(1578642531249)
now.toLocaleString()     // "2020/1/10 下午3:48:51"
now.toGMTString()        // "Fri, 10 Jan 2020 07:48:51 GMT"

JSON

1、JSON概述

JSON（ JavaScript Object Notation, JS 对象简谱）是一种轻量级的数据交换格式。

简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。

JSON 易于人阅读和编写，同于也易于机器解析和生成，并有效地提升网络传输效率。

在JavaScript中，一切皆为对象。任何JavaScript支持的类型都可以使用JSON来表示。

JSON格式：

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

2、JSON字符串和JSON 对象的转换

var person = {
    name:'zhangsan',
    age:3,
    gender:'male'
}
// 对象转化为JSON字符串
var jsonStr = JSON.stringify(person);    // "{"name":"zhangsan","age":3,"gender":"male"}"

// JSON字符串转化为对象   参数为JSON字符串
var obj = JSON.parse(jsonStr);

JSON和JS对象的区别：

var obj = {name:'zhangsan',age:3,gender:'male'}
var json = '{"name":"zhangsan","age":3,"gender":"male"}'    // JSON 的键都是用引号包裹的

Ajax

面向对象编程

1、原型对象

在java中有类和对象，但在JavaScript中类称为原型对象。

原型：

var Student = {
        name:'zhangsan',
        age:3,
        gender:'male'
}

var Person = {
    name:'person',
    run:function(){
        console.log(this.name+'  run...')
    }
}
Student.__proto__ = Person;

Person.prototype.hello = function () {
    alert('Hello')
};

2、class 继承

ES6 引入了 class 关键字。

定义类

class Student{
       constructor(name,age){
           this.name=name;
           this.age=age;
       }
       hello(){
           alert('hello')
       }
}

// 创建Student对象
var stu = new Student('zhangsan',3);
stu.name;
stu.hello();

继承

class Animal{
       constructor(name){
           this.name=name;
       }

       eat(){
           alert('eat');
       }
   }

class Cat extends Animal{
    constructor(name,color){
        super(name);
        this.color = color;
    }
    show(){
        alert('miao~')
    }     
}

本质：原型对象

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vAajXMX3-1581070780325)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578649697606.png)]

操作BOM对象

JavaScript和浏览器的关系：JavaScript的诞生是为了让其能在浏览器中运行。

BOM：浏览器对象模型。

1、widow

window代表浏览器窗口。

window.alert('hello');
window.innerHeight      // 150
window.innerWidth       // 889
window.outerHeight      // 819
window.outerWidth       // 905

2、Navigator

Navigator，封装了浏览器的消息。

navigator.appName
"Netscape"
navigator.appCodeName
"Mozilla"
navigator.appVersion
"5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.84 Safari/537.36"
navigator.platform
"Win32"

大多数时候，不会使用navigator对象，因为会被人为修改。所以不建议使用这些属性来进行判断和编写代码。

3、screen

screen代表屏幕。

screen.width    // 1920 px
screen.height   // 1080 px

4、location

location代表当前页面的URL信息。

location.host  
location.href   
location.port
location.protocol
location.pathname

5、document

document代表当前的页面

document.title
document.title = 'xxx'
document.location

获取具体的文档数节点

<dl id="al">
    <dt>subject</dt>
    <dd>Java</dd>
    <dd>C++</dd>
    <dd>Web</dd>
</dl>
<script>
    var cl = document.getElementById('al');
</script>

获取cookie

document.cookie

劫持cookie原理

<script src = "abc.js"></script>   // 可以获取cookie上传到其服务器上

服务器端可以设置cookie为 httpOnly。

6、history

history代表浏览器的历史记录。但不建议使用。

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

操作DOM对象

核心：

浏览器网页就是一个Dom树形结构。

对其有以下几种操作：

更新：更新Dom节点
遍历：遍历Dom节点，得到Dom节点
删除：删除一个Dom节点
添加：添加一个Dom节点

要对Dom节点进行操作，首先就要获取这个Dom节点。

1、获取Dom节点

<body class="father">
<h1 class="h1" id="h1">javascript</h1>
<p id="p1">p1</p>
<p id="p2">p2</p>
<script>
    var father = document.getElementsByClassName('father');
    var p = document.getElementsByTagName('p');
    var h = document.getElementsByClassName('h1')
    var h1 = document.getElementById('h1');
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
</script>
</body>

2、更新节点

<div id="div"></div>
<script>
    var div = document.getElementById('div');
</script>

操作文本：

div.innerText=‘hello’ 修改文本的值
div.innerHTML=‘hello’ 解析HTML文本标签

操作CSS：

div.style.color=‘red’ 属性使用引号包裹
div.style.fontSize=‘20px’
div.style.backgroundColor=‘green’

3、删除节点

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

<div id="div">
    <h1>JavaScript</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var father = p1.parentElement;
    father.removeChild(p1)
</script>

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

4、插入节点

获得了某个Dom节点后，假设这个节点是空的，可以通过innerHTML增加元素。

<div id="div">
    <h1>JavaScript</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>
<script>
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    p2.append(p1)
</script>

如果获取的Dom节点已经存在了元素，就不能像上面这样干了。

可以创建一个新的标签实现插入

<div>
    <h1>JavaScript</h1>
    <p id="p1">p1</p>
    <p id="p2">p2</p>
</div>

<script>
    var p1 = document.getElementById('p1');
    var p2 = document.getElementById('p2');
    var p = document.createElement('p');
    p.id = 'newP';
    p.innerText = 'Hello';

    var myScript = document.createElement('script');
    myScript.setAttribute('type','text/javascript');

    var myStyle = document.createElement('style');
    myStyle.setAttribute('type','text/css');
    myStyle.innerHTML = 'body{background-color:green}';
    document.getElementsByTagName('head')[0].appendChild(myStyle);
</script>

insertBefore

<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 ee = document.getElementById('ee');
    var list = document.getElementById('list');
    list.insertBefore(js,ee);

</script>

操作表单

表单的目的是提交信息。

1、获得要提交的信息

<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username">
    </p>
    <p>
        <span>性别：</span>
        <input type="radio" name="gender" value="male" id="boy">男
        <input type="radio" name="gender" value="female" id="girl">女
    </p>
</form>
<script>
    var input_text = document.getElementById('username');
    var boy_radio = document.getElementById('boy');
    var girl_radio = document.getElementById('girl');

    var value = input_text.value;   // 得到输入框的值
    input_text.value = 'abc';

</script>

2、提交表单。使用 md5 加密密码，进行表单优化。

<form action="#" method="post" onsubmit="return fun()">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="input-password">
    </p>
    <input type="hidden" id="mad5-password" name="password">
    <!--绑定事件 onclick 被点击-->
    <button type="submit">提交</button>
</form>

<script>
    function fun() {
        var uname = document.getElementById('username');
        var pwd = document.getElementById('input-password');
        var md5_pwd = document.getElementById('md5-password');

        md5_pwd.value = md5(pwd.value);

        return true;
    }
</script>

jQuery

jQuery是一个库，里面包含了大量的JavaScript函数。

1、获取jQuery

可以进入jQuery的官网下载。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bKlxXAK0-1581070780326)(C:\Users\len\AppData\Roaming\Typora\typora-user-images\1578712402613.png)]

2、jQuery的使用

使用方式一：在使用jQuery时，需要先将其导入HTML中。

<script src="lib/jquery-3-4-1.js"></script>

使用方式二：使用jQuery和CDN加速

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

使用jQuery的公式为： $(选择器).事件(事件函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点击</a>

<script>
    $('#test-jquery').click(function () {
        alert('hello')
    })
</script>
</body>
</html>

3、选择器

原生的JS，选择器少，也不好记。

// 标签选择器
document.getElementsByTagName()
// id选择器
document.getElementById()
// 类选择器
document.getElementsByClassName()

使用jQuery的话，css中的所有的选择器它都能用。

// 标签选择器
$('p').click()
// id选择器
$('#id').click()
// 类选择器
$('.class').click()

4、事件

事件可以分为鼠标事件、键盘事件以及其它事件。

鼠标事件：

获取鼠标当前的一个座标。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        #div{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }
    </style>
</head>
<body>
mouse: <span id="move"></span>
<div id="div">
    移动鼠标
</div>

<script>
    $(function () {
        $('#div').mousemove(function (e) {
            $('#move').text('x: '+e.pageX+'  y: '+e.pageY)
        })
    });
</script>
</body>
</html>

5、操作Dom

操作节点文本

<div id="div">
    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>
</div>

$('#ul').html();   // 获取值
$('#ul').text();
$('#li1').text();
$('#li1').text('jquery');   // 设置值
$('#li1').html();
$('#li1').html('hello');

css的操作：

$(选择器).css(属性名)    // 获取属性值
$(选择器).css(属性名,属性值)   // 设置属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        /*#div{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }*/
        p{
            width: 200px;
            height: 100px;
            background: green;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<p>hello</p>
<script>
    $('#ul li[name=li2]').text();
</script>
</body>
</html>

$('#li1').css("color")     // 获取值
$('#li1').css("color","red")   // 设置值

元素的显示和隐藏：

$('#li1').show()    // 元素的显示
$('#li1').hide()    // 元素的隐藏

: 1px solid green;
}

mouse:

移动鼠标

```

5、操作Dom

操作节点文本

<div id="div">
    <ul id="ul">
        <li id="li1">li1</li>
        <li id="li2">li2</li>
        <li id="li3">li3</li>
        <li id="li4">li4</li>
    </ul>
</div>

$('#ul').html();   // 获取值
$('#ul').text();
$('#li1').text();
$('#li1').text('jquery');   // 设置值
$('#li1').html();
$('#li1').html('hello');

css的操作：

$(选择器).css(属性名)    // 获取属性值
$(选择器).css(属性名,属性值)   // 设置属性值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <style>
        /*#div{
            width: 300px;
            height: 300px;
            border: 1px solid green;
        }*/
        p{
            width: 200px;
            height: 100px;
            background: green;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<p>hello</p>
<script>
    $('#ul li[name=li2]').text();
</script>
</body>
</html>

$('#li1').css("color")     // 获取值
$('#li1').css("color","red")   // 设置值

元素的显示和隐藏：

$('#li1').show()    // 元素的显示
$('#li1').hide()    // 元素的隐藏