[JavaScript知识库] JavaScript 扫盲基础

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JavaScript 扫盲基础 -> 正文阅读

[JavaScript知识库]JavaScript 扫盲基础

JavaScript

1. 什么是JavaScript

1.1 、概述

JavaScript是一门世界上最流行的脚本语言
JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。
一个合格的后端人员，必须精通JavaScript

1.2 历史

历史相关链接: https://www.w3school.com.cn/js/pro_js_history.asp.
ECMAScript它可以理解为是JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5代码上！
开发环境–线上环境，版本不一致

2. 快速入门

2.1 引入JavaScript

内部标签写js语言,注释也是 //。
```
<script>
    alert('hello word');    //弹窗标签
</script>
```
通常script双标签写在的头部或者标签的尾部，但是不能写在标签之外

外部引入方式

在项目目录中创建一个js文件，把要写的js代码写在其中，文件中不需要写标签

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

<!--    type 属性，不用显示写，默认也是text/javascript-->
    <script type="text/javascript"></script>

测试

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

<!-- 内部引入  script 标签内 写js代码-->
	<script>
       alert('hello');
 	</script>

<!-- 引入外部文件  注意是双标签，不能用 自闭和标签-->
<!--    script标签必须成对 出现-->
    <script src="js/qj.js"></script>

<!--    type 属性，不用显示写，默认也是text/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>
</head>

    <script>
        // 1.定义变量      变量类型  变量名   = 变量值;
        // 2.语句以分号结尾
        // js中没有 变量类型都是用var定义，变量值是什么类型就是什么类型
        var num =1 ;  // int
        var name = "hello word"; //  string
        var score = 75;
        // 3.多行注释 和java一样
        /*
        *
        * */
        // 4. 控制语句
        if (score>60 && score<70){
            alert("60-70");
        }else if (score>70 && score<80){
            alert("70 - 80");
        }else {
            alert("other");
        }

        //console.log(score) 在浏览器的控制台打印变量  类似java中 sout

    </script>

<body>

</body>
</html>

浏览器调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q1ROovV7-1633962944604)(C:\Users\ZYH\Desktop\tp\1629624110.png)]

2.3 数据类型

Js和java一样是严格区分大小写的一个语言

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

变量

var num = 1;

数值

java数值类型为Number，并且不区分小数和整数

123       // 整数
123.1	  // 小数
1.2323e3  // 科学计数法
-9        // 负数
NaN       // Not a Number 表示不是数字类型
Infinity  //表示无限大，当一个数值类型变量的值超越了js变量的极限就会定义为无限大

字符串

‘abc’ “abc”

布尔值

true false

逻辑运算符

&&      两个为真，结果为真

||      一个为真，结果为真

！       真即假，假即真

比较运算符

=      // 赋值
    
==     // 等于  （类型不一样，值一样，也会判断为true  例如 1=='1'）
    
===    // 绝对等于（类型一样，值也一样，才会判断为true）

这是一个JS的缺陷，坚持不要使用==运算符进行比较

注意：

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

浮点数问题：

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

不相等的原因是计算机无法存储无限不循环小数，所以1/3 会损失精度

尽量避免使用浮点数进行运算，存在精度问题！，通过abs绝对值函数，在取极限进行判断是否相等

Math.abs(1/3-(1-2/3))<0.00000001

null和undefined

null 空
undefined 未定义

数组

java中的数组必须是相同类型的对象，而js中不需要

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,4,5,'hello',null,true];
console.log(arr[0]); // 取值
new Array(1,2,3,4,5,'hello');

取数组下标：如果越界了，就会

undefined  //未定义 ，java中报错数组越界

对象

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

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

//Person person = new Person(1,2,3,4,5);
   var person = {
            name:"liu",
            age:5,
            tags:['js','java','web','...']
        }

取对象值

person.name
"liu"
person.age
5

2.4 严格检查模式

需要IDEA中支持ES6语法

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

<!--
        前提：IDEA 需要支持ES6 语法
        'use strict';  严格检查模式，预防JavaScript的随意性导致的一些问题
        必须写在JavaScript的第一行！
        局部变量建议都使用let定义
        -->
    <script>
        'use strict';
        a=1;  //全局变量，JavaScript中不要定义全局变量
        // 使用严格检查模式后不允许定义全局变量。会报错
        let i=1;
         // ES6 let 定义局部变量
    </script>
</head>
<body>

</body>
</html>

3. 数据类型

3.1 字符串

正常的字符串我们使用单引号或者双引号包裹。

注意转义字符 \

console.log('a\t\xt1\t\u4e2d\nb');

\'    代表是字符串
\n 	  换行
\t    Tab
\u4e2d    \u#### Unicode字符
\x41       Asc11字符

多行字符串编写

//tab 上面esc下面的按键
var msg1 = 
`hello
word
你好呀
你好；`;
console.log(msg1);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vxbTgRmg-1633962944614)(C:\Users\ZYH\Desktop\tp\1629639031(1)].png)

模板字符串
```
let name = 'Andy';
let age = 12;
var msg = `你好呀，${name}`;
console.log(msg);
```
``中不在需要用+拼接字符串直接 ${变量名}就可以拼接字符串，是模板字符串

字符串长度

str.length

var student = "zhangsan";
console.log(student.length);

字符串的可变性-----不可变

console.log(str[1]=1);
VM264:1 1
undefined
console.log(str);
VM329:1 student
undefined

大小写转换

//注意，这里是方法，不是属性了
console.log(student.toUpperCase()) ;  //转换成大写
console.log(student.toLowerCase()) ;  //转换成小写

获取单个字符下标索引
```
console.log(str.indexOf('u'));
```

截取字符串[)

//原则是根据下标开始也就是从0开始；
//遵循前包后不包的原则
console.log(str.substring(1));  //截取下标为1的字符到最后最后一个字符
console.log(str.substring(1,4)); //截取下标为1的字符到下标为4的字符， 包括1不包括4

3.2 数组

js中Array数组可以存放任何类型的值，不一定是同一个类型的。
```
var arr = [1,2,'3',4,5];
arr[0]=1;
```
1. 数组长度
```
arr.length
```
注意：数组的长度是可以改变的，给arr.length赋值，数组大小就会发生变化，如果赋值小于当前长度，数组元素会丢失，如果大于当前数组长度就会存在空置，其类型是undefined
1. indexOf()，通过元素获取下标索引
```
arr.indexOf('3');
2
```
字符串的’1’和数字1是不同的
1. slice()截取Array的一部分，返回一个新数组，类似与substring，[ )原则,原字符串不会改变
```
arr.slice(5)
(3) [7, "1", "2"]
arr
(8) [1, 2, 4, 5, 6, 7, "1", "2"]
arr.slice(1,6)
(5) [2, 4, 5, 6, 7]
```
1. push() 和 pop() 在数组尾部压入一个字符和弹出一个字符
```
arr
(8) [1, 2, 4, 5, 6, 7, "1", "2"]
arr.push('a')
9
arr
(9) [1, 2, 4, 5, 6, 7, "1", "2","a"]
arr.pop()
"a"
```
1. unshift()和shift() 在数组头部压入一个字符和弹出一个字符
```
arr.unshift('a')
7
arr
(7) ["a", 1, 2, 4, 5, 6, 7]
arr.shift()
"a"
```
1. 排序 sort()
```
arr
(3) ["C", "B", "A"]
arr.sort()
(3) ["A", "B", "C"]
```
1. concat()在数组后边拼接元素，返回一个新数组，并且原数组不会改变
```
arr.concat(1,2,3)
(6) ["C", "B", "A", 1, 2, 3]
arr
(3) ["C", "B", "A"]
```
1. join()用字符把数组的元素连接到一起返回一个字符串
```
arr.sort()
(3) ["A", "B", "C"]
arr.join('-')
"A-B-C"
```
1. 元素反转 reverse（）
```
arr
(3) ["A", "B", "C"]
arr.reverse()
(3) ["C", "B", "A"]
```
1. 多维数组
```
arr = [[1,2],['3',3],['a','a']]
(3) [Array(2), Array(2), Array(2)]
0: (2) [1, 2]
1: (2) ["3", 3]
2: (2) ["a", "a"]
length: 3
__proto__: Array(0)
arr[1][1]
3
```
8112598

3.3 对象

若干个键值对

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

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

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

对象赋值

person.name="zzzz"
"zzzz"
person
{name: "zzzz", age: 3, email: "123345@163.com", score: 0}

使用一个不存在的对象属性，不会报错！ undefined
```
person.hah
undefined
```

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

delete person.age
true
person
{name: "zzzz", email: "123345@163.com", score: 0}

动态的添加属性，直接给新属性赋值就可以

person.haha='a'
"a"
person
{name: "zzzz", email: "123345@163.com", score: 0, haha: "a"}

判断这个属性值是否在对象中

'haha' in person
true
'age' in person
false

判断一个属性是否是这个对象自身拥有的 hasOwnProperty
```
person.hasOwnProperty('toString')
false
```

3.4 流程控制

条件语句 if

 var num = 3;

        if (num>5){
            console.log("大于5");
        }else if (num<3){
            console.log("小于3");
        }else {
            console.log(num);
        }

while() 循环语句

 while (num<100){
            console.log(num);
            num++;
        }
 
do {
            num++;
        }while (num<100){
            num++;
            console.log(num);
        }

for 循环语句

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

forEach 循环

  var age = [12,3,5,6,78,435,345,7,87,4,4,7,82,56];

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

for in 循环

// for(var index in object){}
 var age = [12,3,5,6,78,435,345,7,87,4,4,7,82,56];

        for (var num in age){
            if (age.hasOwnProperty(num)){
                console.log(age[num]);
            }
        }

index  num 为数组索引

3.5 Map和Set

  //ES6 新特性 map和set集合
        var map = new Map([["li",11],["xin",22],["dong",33]]);
        var name = map.get("li");  //取值
        console.log(name);
        map.set("admin",45);   //新增
        map.set("li",776);		//修改
        map.delete("li");		//删除


 //Set 无须不重复的集合
        var set = new Set([3,2,2,2,2,2]); //自动去重
        set.add(6);   //添加一个值
        set.delete(6);  // 删除一个值
        console.log(set.has(3));  // 判断这个值是否在集合中

3.6 iterator

es6 新特性

遍历数组

//通过 for in 下标 或者 for of
var arr = [3,4,5]
for(var x of arr){
    console.log(x);
}

遍历map

var map = new Map([["li",11],["xin",22],["dong",33]]);

for(var x of map){
    console.log(x);
}

遍历set

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

4. 函数

4.1 函数定义

方式一-定义函数

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

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

如果函数中没有return 执行完会返回undefined

方式二-定义函数

var abs = function (x) {

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

function(…) {} 是匿名函数，可以把结果赋值给 abs，然后通过abs调用函数。

调用函数

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

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

不传递参数的时候会返回 NaN,但是我们可以定义异常来处理这种情况以及传递的参数不是一个number的情况

  var abs = function (x) {

            if (typeof x!== 'number'){
                throw 'Not a Number';
            }

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

arguments

当传递多个参数时，可以用 arguments 来获取参数列表，arguments是一个JS免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！

var abs = function (x) {

            console.log("x==>" + x);

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

问题：arguments包含所有的参数，我们有时候想使用多余的参数进行附加操作，需要排除已有的参数~

rest

以前

if(arguments.length > 2){
	//....
}

ES6 引入的新特性，获取除了已经定义的参数之外的所有参数~

 var abs = function (x,b,...rest) {

            console.log("x==>" + x);
            console.log("b==>" + b);
            console.log(rest);
        }
 
 abs(1,2,2,2,2,2,2,2)
 x==>1
 b==>2
 (6) [2, 2, 2, 2, 2, 2]0: 21: 22: 23: 24: 25: 2length: 6__proto__: Array(0)
undefined

4.2 变量的作用域

在javascript中，var定义变量实际是有作用域的。
假设在函数体中声明，则在函数体外不可以使用~

 function  t1() {

            var x= 1;
            x = x+1;
        }
        //在函数体内声明的变量，函数体外不可以用
        // x= x+2;  //ReferenceError: x is not defined

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

function t2() {

            var x =1;
            x= x+1;
            console.log(x);
        }

        function t3() {

            var x = 2;
            x =x+1;
            console.log(x);
        }

        t2();t3();
        // 如果两个函数使用了相同的变量名，只要在函数内部则互不冲突。

内部函数可以访问外部函数的成员，反之则不行

function t4() {
            var x=1;
            function t41() {
                var y =x+1; //内部函数可以调用外部变量
                console.log(y);
            }
            t41();
            // var z =y+1; //外部函数不能调用内部函数变量
            // console.log(z);
        }
        t4();

内部函数变量和外部函数的变量，重名

 //当内部函数变量名字与外部函数变量名字重名的时候
        function t5() {
            var x = 1;
            function t51() {
                var x = 'A';
                console.log("inner"+x);  //innerA
            }
            t51();
            console.log("outer"+x);  //outer1
        }
        t5();  
//假设在JavaScript中函数查找从自身函数开始，由内向外寻找，假设外部存在与内部函数变量命相同的变量，内部函数则屏蔽外部相同名称的变量。

提升变量的作用域

 function t6() {

            //相当于系统自动 写入了 var y
          var x = 'x' + y;  //xundefined
          console.log(x);
          var y ='y';
        }
        t6();
        //结果： x is not defined
        //说明： js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
        function t62() {

            var y;
            var x = 'x' + y;  //xundefined
            console.log(x);
            var y ='y';
        }

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

        function t63(){
            var x = 1,
                y = x + 1,
                z,i,a; // undefined

            //之后随意用
        }

全局变量

  //全局对象window，写在<script>标签的变量，默认所有的全局变量都会自动绑定在window对象下

        var x = 'xxx';
        alert(x);
        alert(window.x);
        //alert 为全局变量也是绑定在window对象下的
        // 相当与var alert = function(){}
        var alert_old = window.alert;
        alert_old(x); //代替alert
        window.alert =function () {

        }

        alert(123);  //alert 会失效

        window.alert = alert_old;
        window.alert(456); //alert恢复

ES6 新特性

let 定义局部变量


        function t7() {
            for (var i = 0; i < 100; i++) {
                console.log(i);
            }
            console.log(i+10); //在for 外边也可以访问
        }
        t7();
        function t71() {
            for (let i = 0; i <10 ; i++) {
                console.log("i="+i);
            }
            console.log(i);  // 用let 定义局部变量则 外边访问不到。
        }
        t71();

const 定义常量，在ES6之前都是约定大写变量为常量，这样的约束并不合理，很容易造成修改,所以改es5的代码不能随意更改大写名称的变量


        function t8() {
            const r = "111"; //常量只能在定义处修改值，其他处不能修改;
        }

4.3 方法

定义方法

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

var zdx = {
            name : "zhangyuhang",
            bitrh: 2000,
            age: function () {
                var now = new Date().getFullYear();
                return now- this.bitrh;
            }
        }

//属性调用
person.name;
//方法调用，方法一定要带（）
person.age();

apply方法

apply方法是可以控制this指向的，该方法有两个参数，第一个是getArg要使用的是那个对象，第二个是数组

function getAge(){
    var now = new Date().getFullYear();
    return now - this.brith;
}
getAge.apply(zdx,[]); //this指向了zdx，参数为空

5. 内部对象

内部对象

typeof 1
"number"
typeof 1.1
"number"
typeof NaN   //NaN 代表 Not a Number   但是也是number类型
"number"
typeof '1'
"string"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1 、Date

var now = new Date();   //  Wed Sep 08 2021 21:43:57 GMT+0800 (中国标准时间)
        now.getFullYear(); // 年
        now.getMonth();     //月    0-11 代表月
        now.getDate();      //日
        now.getDay();       //星期几
        now.getHours();     //小时
        now.getMinutes();   //分钟
        now.getSeconds();   //秒

        //时间戳为1970.1.1 0：00：00 到现在的毫秒数
        now.getTime();  //获取时间戳  1631108637804

        //时间戳转换为Date
        console.log(new Date(1631108637804));
        //Wed Sep 08 2021 21:43:57 GMT+0800 (中国标准时间)

5.2 Json 对象

早期，所有数据传输习惯使用XML文件!

JSONlavaScript Object Notation, JS对象简谱)是- -种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript -切皆为对象、任何js支持的类型都可以用JSON来表示; number, string…
格式:
对象都用{}
数组都用[]
所有的键值对都是用key:value

json 字符串和js对象互相转换

var zdx = {
            name : "zdx",
            age : 4
        }
        //对象转换为json
        var zdxJson = JSON.stringify(zdx);
        //JSON转换成json对象
        var use = JSON.parse('{"name":"zd","age":"2"}');

很多人搞不清楚 JSON 和js对象的区别

var obj = {name:'zzz',age:'3'};
var json = '{"a":"hello","b":"b"}';

6.面向对象编程

6.1、什么是面向对象

JavaScript、Java、C#…面向对象；

JavaScript有些区别！

类：模板
对象：具体的实例

类是实体的抽象

在JavaScript 这个需要大家转换一下思考方式

 //模板
        var Student = {
            name : "student",
            age : 3,
            run : function () {
                console.log(this.name + "run....");
            }
        }


        var xiaoming = {
            name: "xiaming",
        }

        //把小明的原型指向Student
        xiaoming.__proto__=Student;

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

        //把小明的原型指向Bird
        xiaoming.__proto__=Bird;

// 小明从学生变成了鸟

class继承

class关键字，是在ES6引入的

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

            hello(){
                alert('hello');
            }
        }
        var xiaoming = new Student('xiaoming');
        var xiaohong = new Student('xiaohong');

继承

class xiaoStudent extends Student{
            constructor(name,age) {
                super(name);
                this.age = age;
            }

            mygrade(){
                alert('我是一个小学生');
            }
        }
        var xiaoStudent1 = new xiaoStudent('zhang',1);

原型链

在Javascript中每一个函数都有一个prototype属性指向函数的原型对象，Object指向Object

在这里插入图片描述

__ proto __指向原型对象

7. 操作BOM对象（重点）

B/S 架构：浏览器服务器

B:browser,S:server

BOM: browser Object Model 浏览器对象模型

浏览器内核：

IE 6-11
Chrome
Safari
Firefox
Opera

三方

QQ浏览器
360浏览器

window 对象

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
355
window.innerWidth
767
window.outerHeight
831
window.outerWidth
782
//用浏览器窗口对象获取 窗口的内外高度和宽度

Navigator 封装了浏览器信息

Navigator 封装了浏览器信息

navigator.appName
'Netscape'
navigator.appVersion
'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.userAgent
'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36'
navigator.platform
'Win32'

大多时候我们不会使用navigator对象因为会被修改。

不建议使用这些属性来判断和编写代码。

screen 代表屏幕对象

代表屏幕尺寸

screen.width
1536 px
screen.height
864 px

location (重要) 定位

location 代表当前页面的URL信息

host: "www.baidu.com"  主机
href: "https://www.baidu.com/"  链接
protocol: "https:"  协议
reload: ? reload()  // 刷新网页
//设置新的地址，这样访问百度就会跳到新的地址。
location.assign('https://www.csdn.net/')

document (重要) 文档对象

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

document.title
'百度一下，你就知道'
document.title='aaaa'
'aaaa'

获取具体的文档树节点

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

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

获取网页cookie

document.cookie
'BIDUPSID=39ED3B037D56FE8061C51F3A4FBFBEFD; PSTM=1628389088; BAIDUID=39ED3B037D56FE80C3DE2CB255D29F5D:FG=1; BD_UPN=12314753; BDORZ=B490B5EBF6F3CD402E515D22BCDA1598; H_PS_PSSID=34649_34439_34067_31660_34711_34525_34584_34505_34707_34578_26350_34761_34424_34691_34673; BAIDUID_BFESS=39ED3B037D56FE80C3DE2CB255D29F5D:FG=1; delPer=0; BD_CK_SAM=1; PSINO=1; COOKIE_SESSION=7_3_9_9_4_7_0_0_9_7_0_0_2663_8_0_0_1633698288_1633695615_1633782197%7C9%230_3_1633695593%7C1; BD_HOME=1; BA_HECTOR=2ha5a521a1a0a00lq91gm35id0r'

劫持cookie 的原理

www.xxx.com
<scrpit src = "aa.js"></scrpit>
<!--当你访问这个网站时会植入一个叫aa的js代码，如果这个js获取你的cookie然后通过Ajax请求到他的服务器这样隐私就泄露了-->

尽量不要把cookie暴露出来

在服务器端设置 cookie：httponly 来保护cookie

history (不建议使用)

history 代表浏览器的历史纪录

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

8.操作DOM对象

核心

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

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

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

获得dom节点

 //通过标签选择器 来获取页面节点
    var h1 = document.getElementsByTagName('h1');
    //通过id选择器来获取页面节点
    var p1 = document.getElementById('p1');
    //通过class选择器来获取页面节点
    var p2 = document.getElementsByClassName('p2');

    var father =document.getElementById('father');
	//获取父节点下的所有子节点
    var childrens = father.children;
	//获取父节点下的第一个子节点
	father.firstElementChild  
	//获取父节点的最后一个子节点
	father.lastElementChild
	//获取节点的相邻节点
	father.nextElementSibling

更新节点

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

操纵文本

id1.innerHTML='<h1>aaa</h1>'’
id1.innerText='aaaaaaaaaaaa'

操作css

id1.style.fontSize='89px'
id1.style.color='red'
id1.style.padding='22px'
id1.style.padding='99px'

删除节点

删除节点必须通过父节点删除子节点，因为没有节点可以删除自己。

<body>
<div id="father">
    <h1>h1</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
</body>
<script>
    //通过class选择器来获取页面节点
    var child = document.getElementById('p1');
    //获取子节点的父节点
    var father =child.parentElement;
    //删除父节点
    father.removeChild(child);
    
    //删除节点是一个动态的过程，每删除一个节点数组下标就会向前变化一个。
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
    
</script>

插入节点

我们获取某个Dom节点，假设这个节点时空的，我们通过innerHTML就可以增加一个元素了，但这这个Dom节点已经存在元素了，我们就不能通过innerHTML来增加节点了，因为会覆盖原有的节点。

追加节点

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

        //把js追加到list下
        list.appendChild(js); //追加：相当于剪切
    </script>

创建一个新的节点

<script>

//创建一个新的节点
var newP = document.createElement('p');
newP.id="newP";
newP.innerText='helloNEWP';
list.appendChild(newP); // 追加节点
    
    
//创建一个标签节点
var myScript = document.createElement('style');
myScript.setAttribute('type','text/javascript'); //写入属性
list.appendChild(myScript);
//添加css样式
// var body = document.getElementsByTagName('body')[0];
// body.setAttribute('style','background-color: greenyellow');

//添加css样式
var myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerHTML='body{background-color: yellow}';
var haad =document.getElementsByTagName('head')[0];
haad.appendChild(myStyle);

    
</script>

在某一个节点前插入一个节点

<script>
    var js = document.getElementById('js')
        list = document.getElementById('list')
        ee = document.getElementById('ee');
    //在ee前面插入一个节点
    list.insertBefore(js,ee);

</script>

9. 操作表单（验证）


    <form action="" method="get">

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

        <p>
            <span>性别：</span>
            <input type="radio" name="sex" value="man" id="man">男
            <input type="radio" name="sex" value="women" id="women">女
        </p>
    </form>

<script>
    var user_text = document.getElementById('username');

    var man = document.getElementById('man');
    var women = document.getElementById('women');

    man.checked=true;  //被选中则为true
</script>

user_text.value
''
user_text.value
'12354'
user_text.value='zhasngd'  //修改输入框的值
'zhasngd'
man.checked=false
false
women.checked=true
true

提交表单 MD5加密密码 ,表单级别提交onsubmit

    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>

<!--
    onsubmit = 绑定一个提交检测的函数， true or false
    将这个结果返回给表单，使用onsubmit 接收
    onsubmit = "return aaa()"
-->
<form action="https://www.baidu.com/" method="post" onsubmit="return aaa()">
    <p>
        <span>用户名：</span><input type="text" name="username" id="username"/>
    </p>
   <p>
       <span>密  码：</span><input type="password" id="password"/>
   </p>
<!--    通过隐藏域进行提交MD5加密的密码-->
    <input type="hidden" name="password" id="md5_password">
    <button type="submit" >提交</button>
</form>

<script type="text/javascript">

    function aaa() {
        var username = document.getElementById('username')
            passowrd = document.getElementById('password')
            md5pass = document.getElementById('md5_password')
            ;
        //MD5对密码进行加密
        md5pass.value=md5(passowrd.value);
        //通过onsubmit提交   false不可以提交  返回true可以提交
        return false;
    }
</script>

10、jQuery

jQuery 是一个JavaScript库里边有大量的JavaScript函数

公式 😒(‘选择器’).actio();

获取jQuery

下载到本地导入到项目中
直接引入cdn

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

初体验


<a href="" id="test_jquery">点我</a>

<script type="text/javascript">
    //原生获取节点
    document.getElementById('test_jquery');
    //juqery 获取节点 公式 :$('选择器').actio(); 这里的选择器就是css选择器
    $('#test_jquery').click(function () {
        window.alert("a被点击了")
    });
</script>

选择器

<script>
    //原生js
    document.getElementById();  // id选择器
    document.getElementsByTagName(); //标签选择器
    document.getElementsByClassName(); //类选择器

    //jquery
    $('#id1').click(); //id选择器
    $('p').click(); //标签选择器
    $('.class').click(); //类选择器
</script>

事件

<style>

    #mouseMove {
        height: 500px;
        width: 400px;
        border: 1px solid red;
    }

</style>
<body>

    mouse: <span id="mouse"></span>

    <div id="mouseMove">鼠标在这里移动试试</div>
        
        
    <script type="text/javascript">

        //当页面加载完后执行事件为 $(document).read(function () {})  简写成 $()
        $(
            $('#mouseMove').mousemove(function (e) {
                    $('#mouse').text('x:'+e.pageX+'y:'+e.pageY);
            })
        );
        
        
    </script>


</body>

操作dom

<body>

    <ul id="ul">
        <li name="javascript">JavaScript</li>
        <li name="java">java</li>
    </ul>

    <script type="text/javascript">

        //操作文本
        $('#ul li[name=java]').text(); //获取值
        $('#ul li[name=java]').text('12312312'); //修改值

        //添加html
        $('#ul li[name=java]').html(); //获取值
        // $('#ul li[name=java]').html('<li>hhh</li>'); //添加元素

        //操作css
        $('#ul li[name=java]').css({'color':'red'});  //括号是键值对可以写多个

        //显示和隐藏
        $('#ul li[name=java]').hide(); //隐藏
        $('#ul li[name=java]').show(); //显示

    </script>