1 根底语法

比拟运算符

===  //等于（类型不同，值一样，也会判断为true）=== //相对等于（类型一样，值一样，后果才为true）

这是一个JS的缺点，保持不要应用 == 比拟

须知：

  • NaN===NaN返回false，NaN与所有数值都不相等，包含本人
  • 只能通过isNaN(NaN)来判断这个数是否是NaN

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

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

严格查看模式

全局变量 i = 1;

局部变量 var i = 1; let i = 1;（ES6倡议应用let）

严格查看模式

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

字符串

多行字符串：

`XXX

XXX`

模板字符串

`hello,${变量}`

str.length str[0] str.toUpperCase() str.toLowerCase()

str.subsring(X,Y)返回str[X,Y)

数组

var arr = [1,2,3,4,5,'hello',null,true];new Array(1,2,3,4,5,'hello',null,true);

取数组下标，如果越界(arr[8]),就会提醒undifined

如果给数组的长度arr.length赋值，数组大小就会发生变化

indexOf：通过元素取得下标索引

slice()截取Array的一部分，相似字符串中的substring

arr.push(),arr.pop() // 尾部

arr.unshift(),shift() // 头部

arr.sort()

arr.reverse()

arr.concat() // 不会扭转原数组

arr.join('-') // 连接符 打印

arr.fill(X)

对象

每个属性之间应用逗号隔开，最初一个不须要增加
var person = {    name:"XXX",    age:18,    tags:['js','java','...']}

对象赋值：person.name = "XXX"

取对象的值：person.name

应用一个不存在的对象属性，不会报错！undefined

动静删除，增加对象的属性：delete person.name person.XXX=XXX

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

判断属性值是否在这个对象中！'XXX' in XXX

判断一个属性是否是这个对象本身领有的 hasOwnProperty()

流程管制

arr.forEach(function (value){  // ES5.1    console.log(value)})for(var i in arr){   // i为数组下标}for(var e of arr){   // e为数组元素}

Map和Set

ES6的新个性

var map = new Map([['tom',100],['jack',90]]);var name = map.get('tom');map.set('admin',123); // 新增map.delete('XXX');console.log(name);var set = new Set(1,1,1,3); // 去重set.add(x);set.delete(x);set.has(x);

iterater ES6新个性

函数

function abs(x){    //定义形式一    //...}var abs = function(x){    //定义形式二    //...}

如果没有执行return，函数执行完也会返回后果：undefined

JavaScript能够传任意参数，也能够不传参数

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

arguments参数示意函数传入的所有参数，是一个数组

rest残余参数，只能写在最初面，必须用...示意

function aaa(a,b,...rest){    consloe("a->"+a);    consloe("b->"+b);    consloe("rest->"+rest);}

全局对象 window

所有全局变量都绑定在全局对象window上的

window.x（全局变量）

windows.alert(window.x)

var old_alert = window.alert;//old_alert(x);window.alert = function(){    };window.alert(123); //生效//复原window.alert = old_alert;window.alert(456);

全局变量→抵触

//惟一全局变量var App = {};//定义全局变量App.name = 'XXX';App.add = function (a,b) {    return a + b;}

把本人代码全副放入本人定义的惟一命名空间中，升高全局命名抵触的问题（JQuery）

ES6倡议应用let关键字去定义部分作用域的变量（解决部分作用域抵触的问题），应用const定义常量const PI = '3.14'

办法

var XXX = {    name:'xxx',    birth:2020,    //办法    age:function(){        var now = new Date().getFullYear();        return now - this.birth;    }}XXX.nameXXX.age()

apply在js中能够管制this指向，通过 apply() 办法，可能编写用于不同对象的办法。函数.apply(对象,参数列表)this指向apply的对象

2 外部对象

规范对象

number, string, boolean, object

typeof NaN"number"typeof []"object"typeof undefined"undefined"

2.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 00:00 - msconsole.log(new Date(113224222)) //工夫戳转为工夫//转换为字符串now.toLocaleString()now.toGMTString()

2.2 JSON

JSON(JavaScript Object Notation, JS 对象表示法) 是一种轻量级的数据交换格局。

特点：简洁，清晰的层次结构；易于人浏览和编写，同时也易于机器解析和生成，无效晋升网络传输效率

在JavaScript中所有皆对象，任何JS反对的类型都能够用JSON来示意

格局：

  • 对象：{}
  • 数组：[]
  • 键值对：key:value

JSON字符串和JS对象的转化

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

2.3 Ajax

  • 原生的js写法 xhr异步申请
  • JQuery封装好的办法 $("#name").ajax("")
  • axios 申请

3 面向对象编程

原型：子类（对象）.__proto__ = 父类（原型对象）; //子类的原型是父类

随便指向

class关键字是在ES6引入的

class Student{    constructor(name){        this.name = name;    }    hello(){        alert('hello')    }}class pupil extends Student{    constructor(name,grade){        super(name);        this.grade = grade;    }    myGrade(){        alert('我是一名小学生')    }}var xiaoming = new Student("xiaoming");var xiaohong = new Student("xiaohong");xiaoming.hello();

原型链：__proto__

4 操作BOM对象（重点）

BOM(Browser Object Model) 是指浏览器对象模型，是用于形容这种对象与对象之间档次关系的模型，浏览器对象模型提供了独立于内容的、能够与浏览器窗口进行互动的对象构造。

浏览器：

内核：IE， Chrome, Safari, FireFox

三方：QQ，360

4.1 window

window代表浏览器窗口

window.alert(1)// 调整浏览器窗口大小window.innerHeightwindow.innerWidthwindow.outerHeightwindow.innerWidth

4.2 navigator

navigator封装了浏览器的信息

navigator.appNamenavigator.appVersionnavigator.userAgentnavigator.platform

个别不应用，因为会被人为批改，不倡议用这些属性来判断浏览器版本

4.3 screen

screen代表屏幕尺寸

screen.widthscreen.height

4.4 location（重要）

location代表以后页面的URL信息

host: "www.bilibili.com"hostname: "www.bilibili.com"href: "https://www.bilibili.com/video/BV1JJ41177di?p=19"protocol: "https:"reload: ƒ reload() // 刷新页面// 设置新的地址location.assign('https://...')

4.5 document

document代表以后的页面（document.），HTML DOM文档树

//获取具体的文档树节点<dl id="app">    <dt>Java</dt>    <dd>JavaSE</dd></dl><script>    var dl = document.getElementById('app');</script>

获取cookie

document.cookie"finger=158939783; _uuid=C56A5201-E5AB-30A7-6A3D-33573CFAEC4B75115infoc; buvid3=2DE4F72B-D52C-4628-B6F6-D25A79D4DFBD155818infoc; sid=jsr4r70q; im_notify_type_775959=0; LIVE_BUVID=AUTO6215819975268326; LIVE_PLAYER_TYPE=2; DedeUserID=775959; DedeUserID__ckMd5=5a93072db131a757; bili_jct=e4c30825e9523f0d624509aa21012a7e; rpdid=|(J~RllJRmlY0J'ulm)RkRm)l; blackside_state=1; CURRENT_FNVAL=80; bp_t_offset_775959=434460479141307658; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1600696828; CURRENT_QUALITY=80; bp_video_offset_775959=438421933640865406; finger=158939783; PVID=3"

劫持cookie原理

www.taobao.com

<script src="aa.js"></script><!-- 歹意人员：获取你的cookie上传到他的服务器 -->

服务器能够设置：httpOnly（平安）

4.6 history

history代表浏览器的历史记录（不倡议应用）

history.back()history.forward()

5 操作DOM对象（重点）

文档对象模型（Document Object Model，简称DOM），是W3C组织举荐的解决可扩大置标语言的规范编程接口。它是一种与平台和语言无关的利用程序接口(API),它能够动静地拜访程序和脚本,更新其内容、构造和www文档的格调(目前,HTML和XML文档是通过阐明局部定义的)。

浏览器网页就是一个DOM树形构造，要操作一个DOM节点，就必须先取得这个DOM节点

5.1 取得DOM节点

标签选择器：document.getElementsByTagName('h1')（返回数组）

id选择器：documen.getElementById('id')

class选择器：document.getElementByClassName('class')（返回数组）

取得子节点：Node.children

5.2 更新DOM节点

批改文本值：

Node.innerText = 'xxx'

Node.innerHTML = 'xxx'（超文本）

设置款式：

Node.style.color/fontSize/... = 'xxx'（驼峰命名）

5.3 删除DOM节点

先获取父节点，再通过父节点删除本人

Node.parentElement.removeChild(Node)（只能通过id选择器抉择节点删除）

留神：删除节点过程中，父节点的children是动态变化的

5.4 插入DOM节点

取得的DOM节点若为空节点，能够通过innerText减少元素

追加节点：Node1.append(Node2)

创立新节点：document.createElement('p')

设置节点属性：Node = setAttribute('属性名','属性值')

插入节点：Node.insertBefore(newItem,existingItem);

6 操作表单（验证）

表单的目标：提交信息

取得要提交的信息

input_text.valueboy_radio.checked //boolean

MD5加密明码

表单绑定提交事件

onsubmit= 绑定一个提交检测的函数，返回布尔值（return false：不提交表单）

7 jQuery

公式：$(selector).action()

$('#id').click(function(){    //...})//当网页元素加载结束之后，响应事件$(document).ready(function(){    //...})//↑简写,获取坐标$(function(){    $('#divMove').mousemove(function(e){        $('mouseMove').text('x:'+e.pageX+'y:'+e.pageY)    })})

文档工具站：https://jquery.cuishifeng.cn/

操作DOM：

$('#test-ul li[name=python]').css({"color","red"})$('#test-ul li[name=python]').show()/hide()$(window).width

LayUI 弹窗组件

ElementUI 款式难看