JavaScript基础总结

JavaScript(行为)：

1.js概述：

一种弱类型脚本语言，源代码不经过编译（在发到客户端运行之前不需要经过编译），将文本格式和字符代码发送给浏览器解释运行，控制网页行为
Native原生JS开发，按照ECMAScript（JS规范）标准的开发方式所有浏览器都支持,做后台也可以，但支持不了高并发
es2-es3(通行标准)-es4(内部，未正式发布)-es5（全浏览器支持）-es6(常用，当前主流版本：webpack打包为es5支持)-es7-es8-es9-es10-es11-es12
问题：开发用es6,线上浏览器用es5,不一致问题
TypeScript微软的标准，是js的超集，添加了可选的静态类型和基于类的面向对象编程，除了具备es特性还纳入了不在标准范围内的特性，是浏览器不直接支持typescript,要编译js后才能被浏览器执行

2.js框架：

Jquery：js库，简化DOM操作，缺点Dom操作太频繁，影响前端性能；使用他兼容ie 6/7/8
Angular:Coogle收购前端框架，java程序员开发，将后台mvc模式搬到前端，加入了模块化开发理念，与微软合作，采用typescipt语法，对前端程序员不友好；迭代版本不合理
React:facebook出版，高性能JS前端框架，提出新概念（虚拟DOM），减少真实dom操作，在内存中模拟dom操作，有效提升前端渲染效率（相应速度），使用复杂，学习JSX语言
Vue：渐进式JS框架，逐步实现新特性，模块化开发、路由、状态管理等。是综合了Angular（模块化）、React的优点
Axios:前端通信框架，vue边界明确，为了处理DOM,不具备通信能力，额外使用通信框架与服务器交互；也可以使用jquery提供的Ajax通讯功能

2.2 ui框架：

Ant-Design：阿里出品，基于React的UI框架
Element、ice、iview:饿了么出品，基于Vue的UI框架
BootStrap:twitter推出前端开发的开源工具包
AmazeUI，H5跨屏前端框架

2.3 JS构建工具

Babel:js编译工具，用于浏览器不支持ES新特性，如编译typeScript
WebPack:模块打包器，用于打包，压缩，合并和按序加载
以上技术是webapp需要技能

2.4 前端需要了解的后端技术nodejs（笨重）

nodejs需要框架和项目管理工具，
Express:nodejs框架
Koa:Express简化版
NPM：项目综合管理工具，类似于Maven
YARN:NPM的替代方案，类似Maven和Gradle关系

3.入门

3.1 引入js：严格区分大小写

内部标签：//注释和java一样
外部引入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jsDemo01</title>
    <!--js内联-->
    <!--js可以放这里-->
    <!--type不用显示定义，默认也是js-->
    <script type="text/javascript">
        //注释
        alert("hello!")
    </script>
    <!--外联，script必须成对出现，成对标签不要整成自闭合标签-->
    <script src="js/jsDemo01.js"></script>
</head>
<body>
<!--js可以放这里-->
</body>
</html>
<!--js不放这里-->

js语句不写“:”结尾，打包时会把多行合并成一行

4.数据类型

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

变量var
变量命名规则：不能以数字、#开头，可以用_$开头

number js不区分小数和整数都为number

整数、小数、科学计数法1.12e3

负数、NaN（not a number）、Infinity 无穷大

字符串 “asd”、‘asd’

布尔值 true false

逻辑运算 && || ！

比较运算符！！不同点不用==比较

= 赋值

== 等于（类型不一样，值一样，判断为true）

=== 绝对等于（类型一样，值一样，判断为true）

NaN===NaN,这个与所有数值不相等，包括自己

只能通过isNaN(NaN) 进行判断是否是NaN

null 空

undefined 未定义

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

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

//差值的绝对值
console.log(Math.abs(1/3-(1-2/3))<0.000001);

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

//保证代码可读性，使用[]
var arr = [1,2,3,"ad",undefined,null];
var array = new Array(1,2,3,"ad",undefined,null);

js中数组下标越界后会undefined，不报错
对象用大括号，数组用中括号，对象每个属性用逗号隔开，等同于json格式，最后一个属性不加，

var student = {
    name:"zk",
    age:2,
    sex:'男',
    love:["音乐","跑步","电脑"]
}

取对象的值student.love
严格检查模式；作用域不一样，var是函数作用域，而let是块作用域，也就是说，在函数内声明了var，整个函数内都是有效的，比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，

/*前提：idea设置支持es6语法
* 严格检查模式，不允许i=1;存在，预防js的随意性导致产生的一些问题
* 必须卸载script第一行
*局部变量使用let去定义
* */

"use strict"
let num1=1;    //变量
const str = "sdfs"  //常量

i=1;
console.log(i)

4.1 字符串

正常字符串使用单引号、双引号包裹
注意转义字符”‘”

\'
\n
\r
\u4e2d  \u**** unicode字符
\x41    Ascall字符

多行字符串编写

//tab键上面，Esc下面
var str = `789
123
456
add`;
console.log(str);

模板字符串

let nae = 'haha';
//用飘`
let msg = `hello,${str} ${nae}`
console.log(msg);

字符串长度

let name='adbsadf';
console.log(name.length)

字符串的可变性，不可变

name[0]=1
1
console.log(name)
VM1453:1 adbsadf

大小写转换，方法非属性

name.toLocaleUpperCase()

//获取字符串第一个字符
console.log(name.charAt(1));
//获取字符串指定字符下标索引
console.log(name.indexOf("b"));

substr和substring区别

console.log(name.substr(1));	//包头截取
console.log(name.substr(1,3)); //[]包头包尾
console.log(name.substring(1));   //包头截取
console.log(name.substring(1,3)); //[)包头不包尾

4.2 数组

可以包含任意数据类型，里面元素可变

let arr = ["a",'b',1,2,3,null,undefined];

数组长度：arr.length,java数组无法通过length扩容，数组长度不可变
若给arr.length赋值，则数组大小会发生变化；扩容了扩容元素为undefined，减容了，元素会丢失

arr.length = 10;
console.log(arr[9]);  
-->undefined

arr.indexOf(‘a’) //获取数组指定字符下标索引

字符串’1’和数字1是不同的，字符下标索引不同

切片slice(start,end):同字符串的substring,包左不包右

let arr = ["a",'b',1,2,3,null,undefined];
let sliceArr = arr.slice(1,3);
console.log(sliceArr)
-->['b', 1]

通过push()/pop()尾部，数组定义失败，通过此方法进行初始化数组

arr.push("hj","sdf");  压入到尾部
arr.pop();  从尾部弹出一个元素

通过unshift()/shift()头部

arr.unshift("hj","sdf");  压入到头部
arr.shift();  从头部弹出一个元素

排序：arr.sort();
元素反转：arr.reverse()
拼接数组concat(),并没有修改数值，只是会返回一个新的数组

arr.concat([7,8,9])

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

arr.join('=')
[undefined, null, 'b', 'a', 3, 2, 1, 7, 8, 9]
jsDemo03.html:29 ==b=a=3=2=1

多维数组：

let arr1=[[1,2],[3,4],[5,6]];

fill(‘x’)用x填充数组内的元素

arr.fill("red")

数组：和集合框架的存取数据( 如何存，取，方法都可以实现)

4.3 对象，js也是面向对象语言，若干个键值对，所有键是字符串，值是任意对象

取值时可以是 :对象名.属性名/对象名[‘属性名’]

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

var student = {
    name:"zk",
    age:2,
    sex:'男',
    love:["音乐","跑步","电脑"]
}

js对象，{…}表示一个对象，键值对描述xx:xx，多个属性间用’,’隔开，最后一个不需要
对象赋值 student.name = ‘zs’;
使用一个不存在的对象属性，不会报错，undefined
动态删减属性，通过delete删除对象属性

delete student.name;
console.log(student)

动态添加属性，直接给新的属性添加值

student.add = '北京';
console.log(student)

判断属性值是否在这个对象中：‘xxx’ in 对象名

console.log('name' in student);
console.log(toString() in student);
true
false
//继承父类方法
console.log('toString' in student);
true

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

console.log(student.hasOwnProperty('toString'));  false
console.log(student.hasOwnProperty('name'));   true

4.4 流程控制和循环和java一样

避免死循环，否则关闭浏览器
idea中js代码提示和java一样
forEach函数循环5.1

//匿名函数
arr.forEach(function (e) {
    console.log(e)
})
//不使用匿名函数
function f(e) {
    console.log(e)
}
arr.forEach(f,arr)

for…in循环5.1

for (const index in Object) {
    	//索引
}
for (let arrKey in arr) {
    console.log(arr[arrKey]);
}

for…of循环，直接遍历值

for (let number of arr) {
    console.log(number);
}

4.5 Map和Set,es6新出

let map = new Map([['zs',11],['ls',22],['ww',33],['zl',44]]);
let zs = map.get('zs');   //通过key获得value
console.log(zs);
map.set('ls',77);         //新增或修改值
map.set('lo',77);
map.delete('lo');       //删除值

无需不重复集合

let set = new Set([1,2,3,5,5,4]);
set.add(8);   //新增值
set.delete(4);//删除值
console.log(Array.from(set))   //输出seth中各元素
console.log(set.has(5));  //是否包含元素

map/set也可以for…of循环，直接遍历值
BUG:数组外加值，for…i（输出）n、for…of（不输出）的遍历不同处

arr=[4,5,6,1,2,3];
//arr[name] = '123'
arr.name = '123';
console.log(arr);
(6) [4, 5, 6, 1, 2, 3, name: '123']
for (let arrKey in arr) {
    console.log(arrKey);
    console.log(arr[arrKey]);
}
0
jsDemo03.html:68 4
jsDemo03.html:67 1
jsDemo03.html:68 5
jsDemo03.html:67 2
jsDemo03.html:68 6
jsDemo03.html:67 3
jsDemo03.html:68 1
jsDemo03.html:67 4
jsDemo03.html:68 2
jsDemo03.html:67 5
jsDemo03.html:68 3
jsDemo03.html:67 name
jsDemo03.html:68 123
for (let number of arr) {
	console.log(number);
}
4
jsDemo03.html:71 5
jsDemo03.html:71 6
jsDemo03.html:71 1
jsDemo03.html:71 2
jsDemo03.html:71 3

4.6 iterator迭代器es6添加新特性；一种特殊的对象, 它具有专门为迭代过程设计的专有接口，所有的迭代器对象都有一个 next()方法

对迭代过程的封装
每次都调用返回一个结果对象。
结果对象有两个属性：迭代模式：设计模式，迭代模式规范了迭代器规格
value : 下一个将要返回的值：迭代器应该具有得到下一个数据的能力
done : 布尔类型，当没有更多值时返回 true：迭代器应该具有判断是否还有后续数据的能力

let arr = ["a",'b',1,2,3,null,undefined];
const iterator = {
    i:0,
    next(){
        var result = {
            value:arr[this.i],
            flag :this.i<arr.length
        }
        this.i++
        return result;
    }
}
let data = iterator.next();
console.log("外部："+data)
while (data.flag){
    console.log(data.value);
    data = iterator.next();
    console.log("内部："+data)
}

function creatIterator(arr) {
    let i = 0;
    return{
        next() {
            let done = i < arr.length;
            let value = done ? arr[i++] : undefined;
            return {
                done : done,
                value : value
            }
        }
    }
}
let creatIterator1 = creatIterator(arr);
let val = creatIterator1.next();
while (val.done){
    console.log("值："+val.value);
    console.log("标识："+val.done);
    val = creatIterator1.next();
}

斐波拉契数列

function getFeiboIterator() {
    let prev1 = 1,prev2 = 1,n = 1;
    return{
        next(){
            let value;
            if (n<=2){
                value = 1;
            }else {
                value = prev1 + prev2;
            }
            const  result = {
                value,
                done:false
            }
            //n右移，需要更新前两位的数据
            prev1 = prev2;
            prev2 = result.value;
            n++;
            return result;
        }
    }
}
let feiboIterator = getFeiboIterator();
let i = 0;
while (i<20){
    console.log(feiboIterator.next().value);
    i++;
}

4.7 Generator生成器es6添加新特性：

一个生成器对象，它使得创建迭代器对象的过程变得很简单
生成器是一种迭代器函数，通过function关键字后面的（*）来标识。函数中会用到新的关键字 yield

function *createIterator() {
     // 指定next()方法返回值以及返回顺序
     yield 1;
     yield 2;
     yield 3;
 }
 let iterator2 = createIterator();
 console.log(iterator2.next().value); // 1
 console.log(iterator2.next().value); // 2
 console.log(iterator2.next().value); // 3
 let num = createIterator();
 console.log(num.next().value+"//"+num.next().done)
 console.log(num.next().value+"//"+num.next().done)
 console.log(num.next().value+"//"+num.next().done)
jsDemo05.html:99 1//false
jsDemo05.html:99 3//true
jsDemo05.html:100 undefined//true

生成器函数每当执行完一条yield语句函数后都会自动停止执行，直到
再次调用迭代器的next()方法才会继续调用.使用yield关键字可以返回任何值或者表达式

function *createIt(items) {
    // 指定next()方法返回值以及返回顺序
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}
let generator = createIt(['p','o','p']);
console.log(generator.next().value)
console.log(generator.next().value)
console.log(generator.next().value)

生成器函数表达式

let createIts = function *(items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}
let generator = createIts(['p','o','p']);
console.log(generator.next().value)
console.log(generator.next().value)
console.log(generator.next().value)

/*生成器函数表达式*/
let createIts = function *(items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}

let arr = ['p','o','p'];
let generator = createIts(arr);
let i=0;
while (i<arr.length){
    console.log(generator.next().value);
    i++;
}

生成器对象的方法

const obj = {
    createIts : function *(items) {
        for (let i = 0; i < items.length; i++) {
            yield items[i];
        }
    }
}
let generator1 = obj.createIts(["java","js","pythn"]);
console.log(generator1.next().value)
console.log(generator1.next().value)
console.log(generator1.next().value)

4.8 迭代和遍历的区别

迭代：迭代强调的是依次取数据的过程，并不保证取多少，也不保证把所有的数据都取完
遍历：遍历强调的是要把整个数据依次全部取出

5.函数及面向对象

5.1 函数定义

方法：对象（属性、方法）
函数：对象外部
方法赋值给变量，所以方法也是变量
return 后不要换行，浏览器会在return行后加return;
执行ruturn代表函数结束，返回结果，如果没有执行ruturn，函数执行完也会返回结果，如：NaN（not a number），undefined(参数没传，方法体不识别)
定义方式：function (items){…}是匿名参数，可以把结果赋值个createIts，通过createIts可以调用。效果等同与function createIts(items){…}

let createIts = function *(items) {
    for (let i = 0; i < items.length; i++) {
        yield items[i];
    }
}

方法调用：参数问题：js可以传递任意一个或多个参数，也可以不传递参数,只有符合形参个数的参数起作用。

arguments 是js关键字，代表传递进来的所有参数，是一个数组

if(arguments.length<1){
    throw 'NaN!';
}else if(arguments.length>1){
    throw 'arguments error!';
}

参数进来是否存在问题？
假设不存在，如何规避？抛异常

//参数不存在，抛异常
function abs(num) {
    if(typeof num !== 'number'){
        throw 'not a number';
    }
    if(num>=0){
        return num;
    }else{
        return -num;
    }
}

问题：arguments 包含所有的参数，当使用多余的参数进行附加操作，需要排除已有的参数

rest es6新特性 …rest可变长参数，获取以定义的参数之外的所有参数，只能写在参数最后面

function test(num,...rest) {
    console.log(num);
    console.log(rest);
}

5.1.2 变量的作用域

在js中，var定义变量实际是有作用域的
假设在函数体中声明，则在函数体外不可以用（想在外部用要闭包）
两个函数使用了相同的变量名，只要在函数内部，就不冲突
内部函数可以访问外部函数成员，反之不行
内部函数和外部函数的变量重名，，则js会查找变量从自身函数开始，由内向外查找，假设外部存在同名函数变量，则内部函数会屏蔽外部函数变量。

function t1() {
    let n = 1;
    function t2() {
        let n =2 ;
        console.log(n);
    }
    console.log(n);
    t2();
}
t1();

js执行引擎自动提升了y的声明，但不会提升变量y的赋值。是在js建立之初就存在的特性。规范，变量定义放在函数头部，便于代码维护；

function t2() {
    var x = 'x' + y;
    console.log(x);
    var y = 'y'
}
t2();
xundefined
//相当于声明提前
function t3() {
    var y;
    var x = 'x' + y;
    console.log(x);
}

5.1.3 全局变量

5.1.4 全局对象window，默认所有的全局变量都会自动绑定到window对象下；

let i=0;
alert(i);
window.alert(i);

alert()函数是window变量

var old_alert = window.alert;
/*old_alert(111);*/
window.alert = function () {

}
//window.alert失效
window.alert(123);
window.alert = old_alert;
//恢复
window.alert(456)

js只有一个全局作用域window，任何变量（函数可视为变量），假设没有函数作用范围内找到，就会向外查找，若在全局作用域都找不到，报错Uncaught ReferenceError: m is not define
所有全局变量绑定到window上，不同JS文件使用同样的全局变量，冲突->如何解决

//唯一全局变量，不绑定到window
let content = {};
//定义全局变量
content.name  = 'zk';
content.test = function () {
    //...
    return "xxx";
}

把自己代码定义到自定义的空间名字中，降低全局匿名冲突的问题。jquery绑定到jquery上,简化为$
let 局部作用域变量关键字，解决局部作用域冲突问题。var是函数作用域，let 是块作用域

function test2() {
    for (var j = 0; j <5; j++) {  //var
        console.log(j)
    }
    console.log(j+1);  //6
}
test2();

const是常量，修饰后不可更改，只读变量；es6之前，用大写字母命名的变量是常量，不要修改其值。

jsDemo06.html:107 Uncaught TypeError: Assignment to constant variable.

5.2 方法

方法把函数放在对象里面，对象只有：属性和方法

let person = {
    name:'zs',  //属性
    birth:'2000',
    age:function () { //方法
    return new Date().getFullYear() - this.birth;
    }
}
console.log(person.birth); //属性调用
console.log(person.age());  //方法调用

this代表什么，this是无法指向的，默认指向调用它的对象

function getAge() { //方法
    return new Date().getFullYear() - this.birth;
}
let person = {
    name:'zs',  //属性
    birth:'2000',
    age:getAge
}
console.log(person.birth); //属性调用
/*this指向调用它的对象 person*/
console.log(person.age());  //方法调用
/*this指向调用它的对象 window*/
console.log(getAge());  //NaN window

apply()函数控制this指向，所有的函数都有，在function上一级父类定义

function getAge() { //方法
    return new Date().getFullYear() - this.birth;
}
let person = {
    name:'zs',  //属性
    birth:'2000',
    age:getAge
}
console.log(person.birth); //属性调用
/*this指向调用它的对象 person*/
console.log(person.age());  //方法调用
/*this指向调用它的对象 window*/
console.log(getAge());  //NaN window
console.log(getAge.apply(person,[]));  //apply参数两个，指向对象，和参数同java要空参String[] args

5.5 创建对象

js/java/C#面向对象，js有区别
类：模板（原型对象）、对象：具体实例
原型，相当于父类

let persons={
    name:'zs',
    age:4,
    addr:'beijing',
    run:function () {
    console.log(this.name+'run');
    }
}
let zm = {
	name:'zm'
}
//原型指向persons
zm.__proto__ = persons;

5.6 class继承（新特性）es6引入

原来往对象加方法

'use Strict'
let student = {
    name:'zs'
}

student.hello=function () {
    alert('方法');
}
console.log(student.hello());

es6后class继承，定义一个类，属性方法；

class Student{
    constructor(name) {
        this.name = name;
    }
    run(){
        alert(this.name+':run');
    }
}
let student = new Student('zs');
console.log(student.run());

继承》本质，__ proto __: Student

class St1 extends Student{
    constructor(name,age) {
        super(name);
        this.age =age;
    }
    study(){
        alert(this.name+'在学习');
    }
}
let st1 = new St1('ls',3);
console.log(st1.run());

5.7 原型链继承（难）

__ proto __: 在js中每个函数都有Prototype属性，指向函数的原型对象

6.常用对象

标准对象

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

6.1 Data：基本使用

let date = new Date(); //Sat Apr 16 2022 10:52:08 GMT+0800 (中国标准时间)
date.getMonth(); //月 0~11
date.getDate(); //日
date.getDay();  //星期几
date.getTime();//时间戳 全世界唯一，从1970-1-1 0：0:00 到现在的毫秒数
//时间戳转时间
let date1 = new Date(date.getTime());
console.log(date);
console.log(date1);
//当前时间转换,都是方法不是属性，属性在vue中
date.toLocaleString(); // '2022/4/16 10:57:04'
date.toLocaleTimeString(); //'10:57:04'
date.toGMTString();//'Sat, 16 Apr 2022 02:57:04 GMT'

6.2 Json

6.2.1 概述

BSON：nosql使用，名称源于Json，数据交换格式，用于MongoDB数据库中的数据存储和网络格式。二进制表示，标识简单数据机构，关联数组（对象。文本）其他数据类型。大文本形式。
xml:json前一代数据交换格式，规范的标签形式。解码Dom4j/DOM/SAX 等
json:轻量级的数据交换格式，简易的语法，用在js中，扩展性xml、json都不错。
- 简介清晰的层次结构使得json称为理想的数据交换语言
- 易于阅读编写，机器解析和生成，有效提升网络传输效率。
js中一切皆为对象，js支持的类型都可以用json标识

6.2.2 格式

对象用{}
数组，list用[]
键值对用key:value
JSON字符串和js对象的转换

let persons={
    name:'zs',
    age:4,
    addr:'beijing'
}
console.log(persons);
let jsonPersons = JSON.stringify(persons);
console.log(jsonPersons);  //{"name":"zs","age":4,"addr":"beijing"}
let parse = JSON.parse(jsonPersons);
let parse1 = JSON.parse('{"name":"zs","age":4,"addr":"beijing"}');
console.log(parse);
console.log(parse1);

JSON字符串’{“name”:“zs”,“age”:4,“addr”:“beijing”}’
js对象{name: ‘zs’, age: 4, addr: ‘beijing’}

6.2.3 前端请求

原生js写法，XHR异步请求
Jquery封装好的方法$(“#xx”).ajax(‘’)
axios请求

7.操作Dom元素：

文档对象模型，整个浏览器网友就是一个Dom树形结构。
操作一个Dom节点，先要获取这个Dom节点

7.1 动态插入Dom节点

获得某个节点，若这个dom节点是空的可以通过innerHTML增加一个元素（覆盖式的增加）若这个dom节点已经存在元素了，就不能这么做。
追加操作：追加到后面

<p id="p0">p0</p>
<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>


 let
        father = document.getElementById('father'),
        p0 = document.getElementById('p0');
        father.appendChild(p0)

创建一个新的标签插入

let p4 = document.createElement('p');
    p4.id = 'p1';
    p4.innerText = '测试';
    father.append(p4);

设置属性的通用写法，标签和类选择器获取的是HTMLCollection 集合，不是head/body元素

let headEles = document.getElementById('he'),  //getElementsByTagName()获取的没法，head中无法加入
myScript = document.createElement('script');

body = document.getElementById('bd');//getElementsByTagName()无法获取body元素

//设置标签属性通用写法
myScript.setAttribute('type','text/javascript');
myScript.src = 'js/jsDemo01.js';
/*father.appendChild(myScript);*/
headEles.appendChild(myScript);
 body.style.backgroundColor = '#68a0d9';

body = document.getElementsByClassName('bd');//返回集合元素，集合第一个是页面元素
body[0].style.backgroundColor = '#68a0d9';

myStyle = document.createElement('style');
myStyle.setAttribute('type','text/css');
myStyle.innerText = 'body{background-color:#68a0d9}'
headEles.appendChild(myStyle);

元素插入到某元素之前

let
    father = document.getElementById('father'),
    p0 = document.getElementById('p0'),
    p1 = document.getElementById('p1');
   /* father.appendChild(p0)*/
   //要包含的元素，新元素，坐标元素
    father.insertBefore(p0,p1);

元素插入到某元素之后

//坐标元素，新元素
p1.append(p0);

7.2 动态更新Dom节点

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>
father.innerText = '哈哈';
father.innerHTML='<p id="p1">p3</p><p class="p2">p4</p>'

操作文本
- innerText修改文本的值
- innerHTML可以解析HTML文本标签

操作CSS

father.style.fontSize = '50px'  //属性使用字符串包裹
'50px'
father.style.color = 'red' 
'red'
father.style.paddingLeft = '1em' //-转驼峰命名问题padding-Left ~ paddingLeft

7.3 动态删除Dom节点

步骤：先获取父节点，然后在删除子节点，不能自我删除

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

let father = document.getElementById('father');
let children = father.children;
//children[1].remove();
father.removeChild(p1);
//通过自己找到父类在删除自己
let self = document.getElementById('p1');
let father1 = self.parentElement;
father1.removeChild(self);
//删除自己
 let self = document.getElementById('p1');
 let father1 = self.parentElement;
 let children1 = father1.children;
 father1.removeChild(self);
 father1.removeChild(children1[0]);

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

7.4 遍历Dom节点：得到Dom节点

<div id="father">
    <h1>标题</h1>
    <p id="p1">p1</p>
    <p class="p2">p2</p>
</div>

let father = document.getElementById('father');
let children = father.children; //获取父节点下的所有子节点father.children[index]某个节点
//操作元素
console.log(children[1]);	//方式1
father.firstElementChild    //方式2
<h1>标题</h1>
father.lastElementChild
<p class="p2">p2</p>

8.操作Bom元素、B/S浏览器B对象O模型M

js最初作用在浏览器中运行
ie8中css3的一些特性不支持
linux默认支持FireFox

8.1 window：代表浏览器窗口，全局作用域

window.innerHeight
422
window.outerHeight
824
window.outerWidth
1536
window.innerWidth
1536
//浏览器窗口对象

8.2 navigator：浏览器对象，封装了浏览器信息（不建议使用）

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

大多数时候不会使用navigator对象，Navigator类，因为会被认为修改，不建议使用这些属性来判断和编写代码

8.3 screen：全屏幕属性

screen.height//尺寸
864px
screen.width
1536

8.4 location:当前定位url信息

代表当前页面的url信息

//重定向url
location.assign('https://fanyi.baidu.com/')
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
//刷新
location.reload()

8.5 Document:当前页面信息，文档，thml用dom文档树显示

//修改网页面板titile
document.title
'百度一下，你就知道'
document.title='haha'
'haha'

获取具体的文档树节点，删减节点修改网页，控制行为

<body>
<dl id="sa">
    <dt>类目</dt>
    <dd>1</dd>
    <dd>2</dd>
</dl>
<script>
    let elementByIds = document.getElementById('sa');
    console.log(elementByIds)
</script>
</body>

获取cookie

document.cookie
'sts=1; zh_module_btn=1; wc=71109; lc=71109; lc2=71109; wc_n=%25u9102%25u5C14%25u591A%25u65AF; Hm_lvt_190fe29a5ff5a6f0c6d3fb4f2e7d5390=1649820988; Hm_lpvt_190fe29a5ff5a6f0c6d3fb4f2e7d5390=1650088544; bdUid=CB896256453A000BB76997D40008'

劫持cookie原理，恶意人员通过三方脚本获取浏览器的cookie上传到他服务器
服务器端可以设置cookie:httpOnly只读保证安全性

8.6 History：浏览器前进后退，历史记录（不建议使用）

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

用ajax替代

8.7 操作表单：验证

表单目的：提交信息
获取和设置表单的值

<form action="jsDemo09.html" method="post">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username">
    <label for="pwd">密码:</label>
    <input type="password" name="pwd" id="pwd">
    <label >性别:</label>
    <input type="radio" name="boy" id="boy" value="boy">男
    <input type="radio" name="girl" id="girl" value="girl">女
    <input type="submit"><input type="reset">
</form>
let username = document.getElementById('username'),
    boy = document.getElementById('boy'),
    girl = document.getElementById('girl')
//得到输入框的值
username.value
//修改输入框的值
username.value='456'
//判断单选框是否选中
girl.checked;  //true/false，对于单选框、多选框girl.value只能获取属性值
girl.checked=true;  //选中单选框某项

提交表单。MD5加密密码

<head>
    <meta charset="UTF-8">
    <title>jsDemo11</title>
    <script src="js/md5.js"></script>
    <!--区域节点不同-->
    <!--<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>-->
</head>
<body>
<!--
onsubmit="return checkfunct()"  配合<input type="submit">  type="submit"使用
表单绑定提交事件，onsubmit绑定一个提交检测函数true，false
将这个结果返回表单，使用onsubmit接受
-->
<form action="jsDemo09.html" method="post" onsubmit="return checkfunct()">
    <label for="username">用户名:</label>
    <input type="text" name="username" id="username" required>
    <label for="pwd">密码:</label>
    <!--为保证密码的安全性和可视性显示一个密码框没有name而不提交，提交的是hidden后的md5加密密码-->
    <input type="password" id="pwd">
    <input type="hidden" name="pwd" id="pwdhidden">
    <label >性别:</label>
    <input type="radio" name="boy" id="boy" value="boy">男
    <input type="radio" name="girl" id="girl" value="girl">女
    <!--<input type="submit">-->
    <button type="submit">提交</button>
    <!--绑定事件onclick被点击xx()-->
    <!--<input type="button" onclick="" value="提交">-->
    <input type="reset">
</form>
<script>
    function checkfunct(){
        let username = document.getElementById('username'),
            pwd = document.getElementById('pwd'),
            pwdhidden = document.getElementById('pwdhidden');
            pwdhidden.value = blueimp_md5(pwd.value);
        //可以校验判断表单内容，true是通过提交，false阻止提交
        return true;
    }

</script>

8.8 操作文件

9.JQuery

JQuery是js的函数库

<head>
    <meta charset="UTF-8">
    <title>jsDemo12</title>
     <!--cdn引入-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>

<body>
<a href="#" id="aid">点击</a>
<script>
    /*公式 $(selector).action*/
    /*选择器就是css选择器*/
    $('#aid').click(function () {
        alert('hello!')
    })
</script>

/公式 $(selector).action()/ 选择器:事件

选择器：站点https://jquery.cuishifeng.cn/index.html

9.1 事件

鼠标事件

$('#p1').mousedown(function () {
        alert('鼠标点击!')
})

$('#p1').mousemove(function () {
    alert('鼠标移动!')
})

    <style>
        #content{
            width: 500px;
            height: 500px;
            border: 2px saddlebrown solid;
        }
    </style>
    <!--cdn引入-->
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>
<a href="#" id="aid">点击</a>
<p id="p1">aaa</p>
<div id="content"></div>
<script>
    //当网页元素加载完毕后，相应事件
    $(document).ready(function () {
        /*alert('hello!dddd')*/
    })
    //简写
    $(function () {
        $('#content').mousemove(function (e) {
            $('#p1').text('x:'+e.pageX+'=='+'y:'+e.pageY);
        })
    })
</script>

9.2 操作Dom

节点文本操作

<ul id="content">
    <li id="li1">li1</li>
    <li class="li2">li2</li>
    <!--<p class="p1">ps3</p>-->
</ul>
<script>
    $('#content li[id=li1]').text();  //获得值
    //文本操作
    $('#content li[id=li1]').text('123') //设置值
    $("#content li[id='li1']").text('789')
    $('#content li[id=li1]').html();
    /*$('#content li[id=li1]').html('<p class="p1">ps3</p>');*/
   $('#content li[class=li2]').after('<p class="p1">ps3</p>');
</script>

css操作:键值对，键值对数组

$('#content li[id=li1]').css({"color":"red","background":"blue"});
$('#content li[class=li2]').css("color","blue")

元素的显示和隐藏；本质是display: none;

$('#content p[class=p1]').hide();
$('#content p[class=p1]').show();

扩展测试

$(window).height()
496
$(window).width()
1536
$(document).height()
515
$(document).width()
1536

ajax

$(selector).ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

前端提升：研究网页游戏，看jquery源码

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/123973.html