前段 JavaScript

狂神说java（JavaScript）原视频地址

	解译	归属	备注
Script	脚本	脚本语言
alert	警觉，弹窗	Script
console	控制台	Script
log	日志，打印	console.
Element	基本部分,测试	浏览器调试
Source	源码	浏览器调试
Network	网络	浏览器调试
Application	应用	浏览器调试
var	全局变量	Script
let	局部变量	Script
number	数字，号码	Script	不区分小数，整数
null	无效的	number
undefined	未定义	Script
use	使用	Script
strict	严格检查模式	Script	use strict
upper	上边
case	具体情况
.toUpperCase()	转换为大写
lower	下面
.toLowerCase()	转换为小写
index	索引
.indexOf()	获得下标位置
t.substring()	获得指定下标的属性
indexOf()	通过元素获得下标索引	数组	相同数字会返回第一个
slice()	截取	数组	包前，不包后
push()	压入到尾部	数组
pop()	弹出尾部一个元素	数组
unshift()	压入到头部	数组
shift()	弹出头部的一个元素	数组
sort()	排序	数组
reverse()	元素反转	数组
concat()	合并多数组	数组	并未修改原数组
join	连接符	数组	特定字符串连接
* * * ： * * * ，	用：号描述用，结尾	对象
delete	删减	对象	动态删减属性
XXX in XXX	in 判断属性值是否相等	对象	可以继承父类属性
hasOwnProperty()	是否自身拥有	对象
forEach	循环	流量控制
for…in	遍历	流量控制	只能遍历数组下标
for…of	遍历	流量控制	可以遍历数组
Map	绘制	流量控制	遍历多个属性
arguments	转变成一个数组	流量控制
…rest	获取除了	已经定义的参数	之外的所有参数
window	窗，全局对象	方法	绑定所有全局变量
function	函数	方法
apply	申请，应用	方法	控制指向
JSON.stringify	对象转换为字符串	JSON
JSON.parse	字符串转化为对象	JSON
Date()	时间	Date()
__ proto __	原型对象		类似于继承
alert()	弹窗	BOM
Navigator	浏览器	BOM
screen	屏幕尺寸	BOM
location	位置	DOM	当前页面的URL信息
document	当前页面	DOM	获取节点
history	浏览器历史记录	DOM
getElementsByTagName()	获取标题	DOM
getElementById()	获取id	DOM
getElementsByClassName()	获取class	DOM
innerText	修改文本	DOM
innerHTML	修改HTML	DOM
.style.color	属性使用包裹	DOM
removeChild()	删除节点	DOM	通过父节点删除
children[]	动态删除	DOM	注意节点变化
appendChild()	追加到后面	DOM
createElement()	创建标签	DOM
setAttribute(）	同时创建标识和内容	DOM
inserBefore	插入	DOM
onsubmit	提交时	DOM
$(选择器).函数(动作)		jQuery

1、什么是JavaScript

1.1、概述

JavaScript 是一门脚本语言

一个合格的后端人员，必须要精通JavaScript

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

最新版本已经到 es6 版本

但是大部分浏览器还只停留在支持 es5 代码上

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

廖雪峰JavaScript

2、快速入门

2.1、引入JavaScript

内部标签6

<script>
	//备注
</script>

外部引入

abs.js

//...

test.html

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

第一个JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个JavaScript</title>
    <!-- script标签内，写JavaScript代码 -->
    <!--  内部标签  -->
<!--    <script>-->
<!--        alert('hello,world');-->
<!--    </script>-->

    <!--外部引入    -->
    <!--注意：script标签必须成对出现    -->
    <script src="js/dy.js"></script>

<!--  不用显示定义type，也默认就是 javascript  -->
    <script type="text/javascript"></script>
</head>
<body>

<!--这里也可以存放代码-->
</body>
</html>

2.2、基本语法入门

<script>
  // 1.定义变量 变量类型 变量名 = 变量值
    var score = 1;
    //alert(num);
    // 2.条件控制
    if(score>60 && score<70){
        alert("60~70")
    }else if(score>70 && score<80){
        alert("70~80")
    }else{alert("other")}
    
    /*
    console.log(score) 在浏览器的控制台打印变量！类似于System.out.println();
    
    */
</script>

console.log(）打印变量

浏览器必备调试须知

Elements：测试 HTML、CSS

Console（控制台）：测试 JavaScript，可以直接输入script，打印消息

Sources（源码）：可以断点测试

Network（网络）：发生网络请求

Application（应用）：外部数据库，存一些简单的数据保存到网页里面

2.3、数据类型

变量

var 王者荣耀 = “倔强青铜”；

number

js不区分小数和整数，Number

123 整数
123.1 浮点数123.1
1.123e3 科学计数法
-99 负数
NaN not a number
Infinity

字符串

‘abc’ “abc”

布尔值

true，false

逻辑运算

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

比较运算符！！！

=
类似于 1 == “1”(true)
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果true）

这是一个js的缺陷，坚持不能使用**==**比较

须知

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

浮点数问题

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

尽量避免使用浮点数进行运算，存在精度问题

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

可以这么计算，得出数已经接近于0

null 和 undefined

null 空
undefined 未定义

数组

Java数组的数值必须是相同类型的对象，js中不需要这样！

//保证代码的可读性，尽量使用[]
var arr = [1,2,3,'hello',null,true]

new Array(1,12,4,'hello')

取数组下标：如果越界了，会提示 undefined（未定义）

对象

对象是大括号{}，数组是中括号[]

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

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

取对象值

Person.name “qinjiang”

Person.age 3

2.4、严格检查规范

'use strict';严格检查模式，预防JavaScript的随意性导致产生的一些问题

<!--前提：IDEA 需要设置支持 ES6 语法
'use strict';   严格检查模式，预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript的第一行
局部变量建议使用 let 去定义
-->
<script>
    'use strict'
//全局变量
    //var
  let i = 1;
</script>

3、数据类型

3.1、字符串

正常字符串我们使用单引号（’ ‘），或者双引号（“ ”）包裹
注意转义字符 \
\ ’
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符

多行字符串编写

//`` teb 上面 esc键下面 （~）var msg = `	hello	
world	
你好ya	
你好	`

模板字符串

let name = "qinjiang";
let age = 3;
let msg = `你好呀，${name}`
//输出结果：你好呀，qinjiang

字符串的长度和打印指定位置
str.length
console.log(student[0])
字符串的可变性：不可重新赋值
赋值：student[0] = 1
打印：console.log(student)
结果：student
0号位，未重新赋值
大小写转换
// 注意，这里是方法，不是属性
student.toUpperCase() //转换为大写
student.toLowerCase() //转换为小写
获取指定属性下标位置
student.indexOf(‘t’)
1
获取指定下标的属性
substring
// [ ) 包含前面，不包含后面
输入：student.substring(1) // 指：包含1号位及之后的元素
输出：tudent
输入：student.substring(1，3) // 指：包含1号位及3号位之前的元素
输出：tu

3.2、数组

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

var arr = [1,2,3,4,5]； // 通过下标取值和赋值
arr[0];
arr[0] = 1;

长度
arr.length
注意：
- JavaScript 数组长度可变，加入给 arr.length 赋值，数组大小就会发生变化

新加入的元素显示为 undefined 未定义
- 如果赋值过小，就会将多余的元素丢失

indexOf，通过元素获得下标索引
arr.indexof(2)
1
字符串的 “1” 和数字 1 是不同的
（当有相同数字时，它会返回第一个数字下标）
slice()
- 截取Array的一部分，返回一个新数组
- 类似于 student.substring(1)
- [ ) 包含前面，不包含后面
push() 、pop() 尾部
- .push()：压入到尾部
- .pop() ：弹出尾部的一个元素
unshift()、shift() 头部
- .unshift() ：压入到头部
- .shift() ：弹出头部的一个元素
排序 sort()
(3) [“B”, “C”, “A”];
arr.sort()
(3) [“A”, “B”, “C”];
元素反转 reverse()
(3) [“A”, “B”, “C”];
arr.reverse()
(3) [“C”, “B”, “A”];
concat()
(3) [“C”, “B”, “A”];
arr.concat([1,2,3])
(6) [“C”, “B”, “A”, 1, 2, 3];
arr
(3) [“C”, “B”, “A”];
注意：concat（）并没有修改数组，只是会返回一个新的数组
连接符 join
打印拼接数组，使用特定的字符串连接
(3) [“C”, “B”, “A”];
arr.join(’-’)
“C-B-A”
多维数组
arr = [[1,2] , [3,4] , [“5” , “6”]];
arr[1][1]
4

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

3.3、对象

若干个键值对

var 对象名字 = {
    		属性名： 属性值，
       		属性名： 属性值，
            属性名： 属性值}
            //定义了一个person对象，它有四个值
            var person = {  
                name:"kuangsheng", 
                age:3,
                email:"24736743@qq.com",    
                score:59}

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

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

对象赋值
person.name = “qinjiang”
person.name
“qinjiang”
使用一个不存在的对象属性，不会报错！undefined
person.haha
undefined
动态的删减属性，通过 delete 删除对象的属性
delete person.name
true
person //不在存现name属性
动态的添加，直接给新的属性添加值即可
person.haha = “haha”
“haha”
person //已存在haha属性
判断属性值是否在这个对象中！ XXX in XXX！
‘age’ in person
true
//继承，JavaScript也可以继承父类属性
‘toString’ in person
true
判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty(“toString”)
false
person.hasOwnProperty(“aeg”)
true

3.4、流程控制

if 判断

var age = 3;
if(age>10){		//第一判断
    		alert("hehe")
    }else if(age>3){	//第二判断
   		 alert("haha")
    }else{		//否者...    alert("kuwa~")}

while 循环，避免程序死循环

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

for 循环

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

forEach 循环

ES5.1 引入

var age = [12,3,12,123,423,56,72];
//函数 == 方法
age.forEach(function(value)){
            console.log(value)
            }

for…in

//for(var index in object){}
for(var num in age){
    if(age.hasOwnProperty(num)){        
   	 	console.lg("存在")       
    	console.log(age[num])    
    }
  }

var arr = [3.4.5]
for(var x in arr){
        console.lg(x)     //只能遍历下标  
        }

var arr = [3.4.5]
for(var x of arr){
        console.lg(x)     //可以遍历数组
        }

3.5、Map 和 Set

Map 和 Set 是ES6新特性

Map：

//学生的成绩，学生的名字
var map = new Map(['tom',100],['jack',90],['haha',80])
var name = map.get('tom');	//通过key获value
map.set('admin',123456);	//新增或修改
map.delete('tom');	//删除

Set：无序不重复的集合

set.add(2);		//添加
set.delete(1);	//删除
console.log(set.has(3))		//是否包含某个元素

3.6、iterator

ES6新特性

遍历数组

//通过for of / for in 是下标
var arr = [3.4.5];
for(var x of arr){
        console.lg(x)     
        }

遍历map

var map = new Map(['tom',100],['jack',90],['haha',80]);
for(let x of arr){
        console.lg(x)     //可以打印数值
        }

遍历set

var set = new set([5,6,7,8]);
for(let 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(x){…}类似于一个匿名函数。但是可以把结果赋值给 abs

通过 abs 就可以调用函数

方式一和方式二等价

结果：

abs(10)		//返回
10abs(-10)		//返回10

调用函数

参数问题：javaScipt 可以传任意个参数（只返回第一个），也可以不传参数（返回undefined）

假设不存在参数，如何规避？

var abs = function(x){    
		//手动抛出异常来判断
		if(typeof x!== 'number'){        
		throw 'Not a Number'  
	}    
		if(x>=0){
		        return x;    
		}else{
		        return -x;
		 }
	}

手动抛出异常

arguments
是一个JS免费赠送的一个关键字;
代表，将传递进来的所有的参数，转变成一个数组

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

rest
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
以前：需要使用for循环才能获得定义参数之外的参数

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

新特性：

function aaa(a,b,...rest){
  console.log("a=>"+a)
  console.log("b=>"+b)
  console.log(rest)
}

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

4.2、变量的作用域

在 javascript 中，var 定义变量实际是有作用域的

假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，可以研究一下闭包）

function qj(){
    var x = 1;	//局部变量
    x = x +1;
}
x = x + 2;	//不可使用
//异常：Uncaught ReferenceError: x is not defined

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

function qj(){
    var x = 1;
    function q2(){
    var y = x + 1;	//2
   }
    var z = y + 1;	//异常：Uncaught ReferenceError: y is not defined
}

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

function qj(){
    var x = 1;
    function q2(){
    var x = 'A';
        console.log('inner'+x);		//innerA
   }
    console.log('outer'+x);		//outer1
    qj2()
}
qj()

假设咋 javaScript 中函数查找变量从自身函数开始！由“内”向“外”查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域

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

结果：xundefined (y = undefined)

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

function qj(){
    var y, x, z....
    
    var x = "x" + y;
    console.log(x);
    var y = 'y';
}

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

function qj2(){
    var x = 1,
        y = x + 1,
        z,i,a;	//提前定义
    //之后使用
    
    //当想使用新变量时，再回到首部定义
    	a = 5;
}

全局函数

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

全局对象 window

var x = 'xxx';
alert(x);
alert(window.x);
//默认所有的全局变量，都会自动绑定在 window 对象下；

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

var x = 'xxx';

window.alert(x);

var old_alert = window.alert;

//olid_alert(x);
window.alert = function(){
    
};
// 重写后 alert() 失效了
window.alert(123);

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

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

规范

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

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

//定义全局变量
KuangApp.name = "kuangshen";
KuangApp.add = function(a,b){
    return a + b;
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

jQuery

局部作用域 let

function aaa(){
    for(var i = 0;i < 100; i++){
        console.log(i)
    }
    console.log(i+1);	//i 出了这个作用域还可以使用
}

ES6 let 关键字，解决局部作用域冲突问题

function aaa(){
    for(let i = 0;i < 100; i++){	//var 改成 let
        console.log(i)
    }
    console.log(i+1);	//Uncaught ReferenceError: i is not defined
}

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

常量 const

在 ES6 之前定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值

var PI = '3.14';

console.log(PT);
pt = '213';	//实际上是可以改变这个值，这样就无法彻底保证安全
console.log(PT);

在 ES6 引入了变量关键字const

const PI = '3.14';	//只读变量
console.log(PT);
PI = '123';

4.3、方法

定义方法

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

var kuangshen = {
    name:'秦疆'，
    bitch:2000,
    //方法
    age:function(){
        //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitch;
    }
}
//属性
kuangshen.name
//方法，一定要带（）
kuangshen.age()

this. 指向调用它的人

function getAge(){
    //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitch;
}
var kuangshen = {
    name:'秦疆'，
    bitch:2000,
    //方法
    age:getAge
}

//	kuangshen.age()	ok
//	getAge() NaN	因为调用它的是window，this. 指向调用它的人，没有this.bitch

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

apply

在 js 中可以控制指向

function getAge(){
    //今年-出生的年
        var now = new Date().getFullYear();
        return now - this.bitch;
}
var kuangshen = {
    name:'秦疆'，
    bitch:2000,
    //方法
    age:getAge
}

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

5、内部对象

标准对象
typeof 123
"number"
typeof ‘123’
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1、Date

基本使用

var now = new Date();	//现在时间
now.getFullyear();	//年
now.getMonth();	//月	外国月份是 0~11月
now.getDate();	//日
now.getDay();	//星期几
now.getHours();	//时
now.getMinutes();	//分
now.getSeconds();	//秒

now.getTime();	//时间戳 全世界统一 是从1970 1.1 0:00:00 开始按毫秒计算

console.log(new Date(1620091399656))	//时间戳转为时间

转换

now = new Date(1620091399656);
Tue May 04 2021 09:21:22 GMT+0800 (中国标准时间)
new.toLocaleString	//注意，调用是一个方法，不是一个属性！
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2020/1/4 上午10：49:35"
now.toGMTString()
"Sat,04 Jan 2020 02:49:35 GMT"

5.2、JSON

什么是json

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

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

在 JavaScript 一切皆为对象，任何 js 支持的类型都可以用 JSON 来表示；number , string…

格式

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

JSON 字符串和 js 对象的转化

var user = {
    name:"qinjiang",
    age:3,
    sex:'男'
}

//对象转化为 json 字符串{"name":"qinjiang","age":3,"sex":"男"}
var jsonUser = JSON.stringify(user);

//json 字符串转化为对象，参数为 json 字符串
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}')；

JSON 和 JS 对象的区别

var obj = {a:"hello",b:"hellob"};	//对象
var json ='{"a":"hello","b":"hellob"}'		//字符串

5.3、Ajax（了解）

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

6、面向对象编程

6.1、原型对象

javascript、java、c#…面向对象；javascript有些区别！

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

在JavaScript这个需要大家换一个思维方式

原型proto

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

var xiaoming = {
    name : "xiaoming"
};

//原型对象 
xiaoming.__proto__ = Student;
//小明获得了Student的属性

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

//小明的原型 是bird
xiaoming.__proto__ = bird;

6.2、class 继承

class关键字，是在ES6引入的

旧方法

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

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

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

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

var xiaoming = new Student("xiaoming");
var xiaohong = new Student("xiaohong");
xiaoming.hello()

2、继承

//定义一个学生的类
class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert('Hello');
    }
}
//继承
class XiaoStudent extends Student{	//继承父类
    constructor(name，grade){
        super(name);	//继承父类方法
        this.grade = grade;
    }
    
    myGrade(){
        alert('我是一名小学生');
    }
}

var xiaoming = new Student("xiaoming");

var xiaohong = new XiaoStudent("xiaohong",1);

本质：查看对象原型

本质还是__proto__:Student

6.3、原型链

__proto__

任何类都会指向Object.prototype，Object.prototype会指向Object，同时Object类也会指向Object.prototype循环，所以查找属性的时候查到Object.prototype就可以停止查找了。

7、操作BOM对象（重点）

JavaScript.md

7.1、浏览器介绍

JavaScript 和浏览器关系？

JavaScript 诞生就是为了能够让他在浏览器中运行！

BOM：浏览器对象模型

IE 6~11
Chrome
Safari
FireFox

三方：可以切换浏览器内核

QQ浏览器
360浏览器

7.2、Window

window 代表：浏览器窗口

window.alert(1) //弹窗
undefined
window.innerHeight
804
window.innerWidth
844
window.outerHeight
804
window.outerWidth
1399
//大家可以调整浏览器窗口试验

7.3、Navigator

Navigator，封装了浏览器的信息

navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3861.400 QQBrowser/10.7.4313.400"
navigator.userAgent
"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.25 Safari/537.36 Core/1.70.3861.400 QQBrowser/10.7.4313.400"
navigator.platform
"Win32"

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

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

7.4、screen

代表屏幕的尺寸

screen.width
1600 px
screen.height
900 px

7.5、location (重要)

location 代表当前页面的URL信息

host: "www.baidu.com"
hostname: "www.baidu.com"
protocol: "https:"
reload: ƒ reload()
location.reload()	//刷新网页
//设置新的地址
locationassign('https://kuangstudy.com/')

7.6、document

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

//更改抬头文字
document.title
“百度一下，你就知道”
document.title = ‘狂神说’
“狂神说”

能获取具体的文档树节点

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

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

获取 cookie

document.cookie
"PSTM=1598793731; BAIDUID=05288B20C161E056233412EAFE3BB269:FG=1; BIDUPSID=7A2..."

劫持 cookie 原理

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

<!--恶意人员：获取你的cookie 上传到他的服务器-->

服务器可以设置 cookie : httpOnly 这样就安全了

7.7、history（不建议使用）

history代表浏览器的历史记录

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

8、操作DOM对象（重点）

8.1、核心

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

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

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

8.2、获得Dom节点

//对应 css 选择器
var h1 = document.getElementsByTagName('h1');	//标题
var p1 = document.getElementById('p1');		//ID
var p2 = document.getElementsByClassName('p2')；	//class
var father = document.getElementById('father');	

var childrens = father.children[index];	//获取父节点下的所有子节点
// father.firstChild
// father.lastChild

这是原生代码，之后我们尽量都是用jQuery()；

8.3、更新节点

<div id="id1">

</div>

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

操作文本

id1innerText='456' 修改文本的值
id1innerHTML='<strong>123</strong>' 可以解析HTML文本标签

操作css

id1.style.color = 'yellow';		//属性使用 字符串 包裹
id1.style.fontSize = '20px';	// - 转 驼峰命名问题
id1.style.padding = '2em'

8.4、删除节点

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

<div id="father">
    <h1>标题一</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
<script>
	var self = document.getElementById('p1');	//得到需要删除的元素
    var father = self.parentElement;	//通过子元素获得父元素
    father.removeChild(self)	//通过父类，删除子元素
    
    //删除是一个动态的过程
    father.removeChild(father.children[0]);		//father.children[0] 从父类的下标获取子类
    father.removeChild(father.children[1]);
    father.removeChild(father.children[2]);
    
     
</script>

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

8.5、插入节点

我们获得了某个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');		//获取id=js的元素
    var list = document.getElementById('list');	//获取id=list的元素
    
    list.appendChild(js);	//追加到后面
    //只能id追加，class不能追加
</script>

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

<script>
	var js = document.getElementById('js');		
    var list = document.getElementById('list');	
    
    //通过JS 创建一个新的节点
    var newP = document.createElement('p');	//创建一个p标签
    newP.id = 'newP';	//创建id
    newP.innerText = 'Hello,world';	//设置文本内容
    
    list.appendChild(newP);	
    
</script>

另外一种写法

<script>
	var myScript = document.createElement('script');	//创建一个标签
    myScript.setAttribute('type','text/javascript');	//同时创建标识和内容
</script>

插入颜色内容

创建style标签，加入html内容，将style添加到head[0]下标下

<script>
//可以创建一个style标签
var myStyle = document.createElement('style');  //创建了一个空style标签
myStyle.setAttribute('type','text/css');
myStyle.innerHTML = 'body{background-color:chartreuse;}';   //设置HTML标签内容
document.getElementsByTagName('head')[0].appendChild(myStyle);
//获取head标签，由于返回的是数组需要表示下标位，并添加内容
</script>>

直接body内加入颜色

<script>
    //直接获取body
var body = document.getElementsByTagName('body');
    //注意获得的是个数组，[0]为body
body[0].style.backgroundColor='red';
</script>

注意获取的是个数组

insertBefore 之前插入

var ee = document.getElementById('ee')	//定位点
var js = document.getElementById('js')	//准备插入的点
var list = document.getElementById('ee')	//父节点
//要包含的节点.insertBefore(newNode,targetNode)
list.inserBefore(js.ee);

9、操作表单（验证）

表单：form DOM 树

文件框 text
下拉框 < select >
单选框 radio
多选框 checkbox
隐藏框 hidden
密码框 password
…

表单的目的：提交信息

9.1、获得要提交的信息

输入框

<form>
	<p>
    span>用户名：</span><input type="text" id="username">
    </p>    
</form>
<script>
	var input_text= document.getElementById('username')
	input_text.value	//得到输入框的值
    input_text.value = '123'	//修改输入的值
</script>

单选框、多选框

<form action="post">
    
    <p>
        <span>性别：</span>
        <input type="radio" name="sex" value="man" id="boy">男
        <input type="radio" name="sex" value="women" id="girl">女
    </p>
</form>
<script>
    var boy_radio= document.getElementById('boy')
    var girl_radio= document.getElementById('girl')
    
    // boy_radio.value	
	//"man"		
    //对于单选框，多选框等固定的值,value只能取到当前的值
    
    //查看返回的结果，可是使用checked判断
    boy_radio.checked；	//查看返回结果，true为选中，false为未选中
    boy_radio.checked = true;	//赋值可以更改结果
    
</script>

提交表单
MD5加密密码

按键提交

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
    <!--  MD5 工具类  -->
    <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
</head>
<body>
<form action="#" method="post">
    <p>
        <span>用户名：</span> <input type="text" id="username" name="username">
    </p>
    <p>
        <span>密码：</span> <input type="password" id="password" name="password">
    </p>
    <!-- 按钮 绑定事件， onclick 被点击 -->
    <button type="submit" onclick="aaa()">提交</button>
</form>
<script>
    //声明一个函数
    function aaa() {
        var uname = document.getElementById('username');    //获取id值
        var pwd = document.getElementById('password');
        console.log(uname.value);   //打印这个值
        console.log(pwd.value);

        //pwd.value = '***'     获取的值变为*** 

        //MD5 算法 密码转换
        pwd.value = md5(pwd.value);
        
        
    }
</script>
</body>
</html>

表单提交

οnsubmit= 绑定一个提交检测的函数， true false
将这个结果返回给表单，使用onsubmit 接收
οnsubmit=“return aaa()”

<body>
<!--表单绑定提交
οnsubmit= 绑定一个提交检测的函数， true false
将这个结果返回给表单，使用onsubmit 接收
οnsubmit="return aaa()"
-->
<form action="http://www.baidu.com/" method="post" onsubmit="return aaa()">
    <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="md5_password" name="password">
    <!-- 绑定事件， onclick 被点击 -->
    <button type="submit">提交</button>
</form>
<script>

    function aaa() {
        var uname = document.getElementById('username');    //获取值
        var pwd = document.getElementById('input_password');
        var md5pwd = document.getElementById('md5_password');
        pwd.value = md5(pwd.value); // 密码提交瞬间变化,前段密保

        md5pwd.value = md5(pwd.value);      //将获得的密码，导入隐藏域中
        
        alert(1);
        //可以进行判断，效验表单内容，true通过，false 阻止提交
        return true;
    }
</script>
</body>

10、jQuery

jQuery学习网

jQuery.cuishifeng.cn

jQuery库，里面存在大量的javascript函数

10.1、获取jQuery

下载 jQuery
官网：https://jquery.com/
- 编译版.min.js（压缩版）
- 开发版.js
导入IDEA使用
CDN jQuery
在线的连接，更方便

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!-- jQuery在线连接 <script src="https://....."></script>-->
    <!-- jQuery文件导入 <script src="***/****.js"></script>  -->
</head>
<body>
    <a href="" id="test-jquery">点我</a>
    <script>
        
        //选择器就是css的选择器
        $('#test-jquery').click(function(){
            alert('hello.jQuery')
        })
    </script>
</body>
</html>

公式：

$(selector选择器).action(动作)

10.2、选择器

<body>
<script>
    //原js，选择器少，麻烦不好记
    //标签选择器
    document.getElementsByTagName();
    //ID选择器
    document.getElementById();
    //类选择器
    document.getElementsByClassName();

    //jQuery  css中的选择器它全部都能用
    $('p').click(); //标签选择器
    $('#id名').click(); //id选择器
    $('.class名').click(); //class选择器

</script>
</body>

其他选择器，都可以在开发工具站学习：https://jquery.cuishifeng.cn

10.3、事件

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

鼠标事件

mousedown() 按下
mousemove() 移动
mouse…（）

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.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){        //选择器#mouseMove 鼠标移动  e
        $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)})     //#mouseMove 文本 鼠标xy坐标
    })

</script>
</body>
</html>

操作DOM

节点文本操作

$('#test-u li[name=python]').text();	//获得文本值	ID#test-u 下的 li[name=python] 属性
$('#test-u li[name=python]').text('设置值');	//设置文本值
$('#test-ul').html();	//获取html值
$('#test-ul').html('<strong>123</strong>');	//设置html值

css的操作

$('#test-u li[name=python]').css({"color","red"});

元素的显示和隐藏：本质display : none

$('#test-u li[name=python]').show();	//显示
$('#test-u li[name=python]').hide();	//隐藏
$('#test-u li[name=python]').toggle();	//切换

娱乐测试

$(window).width()
$(window).height()

未来重点：ajax()

!!!

练习小技巧

如何巩固 JS（看 jQuery 源码，看游戏源码，源码之家）
巩固HTML , CSS（扒网站，全部 down 下来，然后对应修改看效果）
学习 Layer 弹窗组件
Element-ui

原文链接：https://blog.csdn.net/rzz65452064/article/details/116720931