看了点有关JS的内容

Scroll Down

JavaScript

引入

内部标签

<script>
	// script
    console.log("hello world!");
</script>

外部引入

helloWorld.js

console.log("hello world");

HelloWorld.html

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

数据类型简介

number

233 	// 整数
2.33	// 浮点数
2.33e3	// 科学计数法
-99		// 负数
NaN		// not a number
Infinity	// 表示无限大

字符串

'abc'
"abc"

布尔值

true
false

逻辑运算

&&	// 与
||	// 或
!	// 非

比较运算符

=	// 赋值运算
==	// 等于(类型不一样,值一样,也会判断为true)
===	// 绝对等于(类型一样,值一样才是true)

==尽量不使用“=="而是使用“==="==

  • NaN与所有值都不相等包括自己
  • 只能通过isNaN()进行判断

null, undefined

  • null 空
  • undefined 未定义

数组

var arr = [1,2,3];
new Array(1,2,3);

对象

var person = {
    name: "name",
    age: age,
    tags: ["tag1", "tag2", "tag3"]
}

数据类型

字符串

  1. 单引号或者双引号包裹

  2. 转义字符 \

  3. 多行字符串编写

    var s = `
    jflkdsa
    fjdks;
    fjkldsa
    `
    
  4. 模板字符串

    let name = "name";
    let age = 18;
    
    let msg = `你好,${name}`
    
  5. 字符串长度

    let str = "string";
    str.length;
    
  6. substring

    str.substring(2);	// [2, +)
    str.substring(1,5); // [1, 5)
    

数组

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

  1. 长度

    arr.length
    

    ==直接给arr.length赋值,数组大小会发生变化, 如果赋值过小元素就会丢失。==

  2. indexOf, 通过元素获得下标索引

  3. slice() 截取数组的一部分,返回一个新的数组(类似substring方法)

  4. push(),pop(): 添加在尾部/从尾部弹出一个元素

  5. unshift(), shift():添加在头部/从头部弹出一个元素

  6. 排序sort()

  7. 元素反转reverse()

  8. 数组拼接concat() // 返回新的数组,不改变原数组

  9. join() 打印拼接数组使用特定的字符串

  10. 多维数组

对象

若干个键值对

  1. 定义

    // 定义
    var person = {
        name: "name",
        age: 18,
        otherInfo: "info"
    }
    
  2. 赋值

    // 赋值
    person.name = "newName";
    
  3. 使用delete动态删除对象属性

    delete person.otherInfo;
    
  4. 动态添加(同赋值)

  5. 判断对象是否存在某属性

    'name' in person
    
  6. 判断属性是否是对象自身拥有的

    person.hasOwnProperty();
    

Map, Set

  1. map

    var map = new map[["key1", "value1"], ["key2", "value2"]];
    map.get("key1");
    map.set("key3", :"value3");
    map.delete("key2");
    
  2. set:无序不重复

    set.add(1);		// 添加	
    set.delete(1);	// 删除
    set.has(1);		// 判断是否存在
    

iterator

流程控制

  1. 判断if-else

  2. 循环while,for

  3. 数组循环for in

    for(let item in array){
    	sonsole.log(item);
    }
    

函数

定义函数

定义方式一

function f(parameter){
    let result = parameter;
    return result;
}

定义方式二

var f = function(parameter){
    var result = parameter;
    return result;
}

arguments

arguments 包含所有传入的参数

var f = function(parameter){
    for(let i of arguments){
        console.log(i);
    }
    var result = parameter;
    return result;
}

rest

rest 剩下的参数

var f = function(parameter1, parameter2, ...rest){
    for(let i of rest){
        console.log(i);
    }
    var result = parameter;
    return result;
}

变量的作用域

廖雪峰讲解js作用域

var定义的变量存在作用域,由{}划分,同名变量由内至外查找。

变量提升

JavaScript的函数定义有个特点,它会先扫描整个函数体的语句,把所有申明的变量“提升”到函数顶部:

'use strict';

function foo() {
    var x = 'Hello, ' + y;
    console.log(x);
    var y = 'Bob';			// var y; 会被提升至函数开头,但并不会赋值
}

foo();

由于JavaScript的这一怪异的“特性”,我们在函数内部定义变量时,请严格遵守“在函数内部首先申明所有变量”这一规则。最常见的做法是用一个var申明函数内部用到的所有变量。

全局作用域

JS默认有一个全局对象window,全局作用域的变量实际上是被绑定到window的属性。

var value = 1;
console.log(window.value);

==事实上js只有一个全局作用域。==任何变量(包括函数), 如果没有在当前函数作用域中找到,就会继续往上查找,最后如果在全局作用域中也没有找到,则报ReferenceError错误。

局部作用域

使用let关键字可以声明局部变量.

常量

使用const关键字声明常量.

解构赋值

'use strict'
// 基础用法
let [var1, var2, var3] = ['value1', 'value2', 'value3'];

// 嵌套数组
let [var1, [var2, var3]] = ['value1', ['value2', 'value3']];

// 解构赋值可忽略某些元素
let [,,var3] = ['value1', 'value2', 'value3'];

// 利用解构赋值快速从对象中获取指定属性
let person = {
    name: '小明',
    age: 20,
    gender: 'male',
    passport: 'G-12345678',
    school: 'No.4 middle school',
    address: {
        city: 'Beijing',
        street: 'No.1 Road',
        zipcode: '100001'
    }
};
let {name, age, passport} = person;

// 遇到嵌套属性时的解构赋值
let {name, address: {city, zip}} = person;

// 使用解构赋值对对象属性进行赋值时,如果对应的属性不存在,变量将被赋值为undefined,这和引用一个不存在的属性获得undefined是一致的。如果要使用的变量名和属性名不一致,可以用下面的语法获取:
let {name, passport:id} = person;

// 在解构赋值时可以附带初始值
let {name, age=0} = person;

方法

绑定到对象的函数叫做方法

==this指向调用方法的对象==, this指向不固定.

apply

使用函数本身的apply方法控制this的指向.

'use strict'
function getValue(){
    return this.value;
}

var obj = {
    key: "key",
    value: "value"
}

getValue.apply(obj, []);

内部对象

Date

获取当前时间

var now = new Date();
now; // Thu Sep 10 2020 09:49:56 GMT+0800 (中国标准时间)
now.getFullYear(); // 年份
now.getMonth(); // 月份,注意月份范围是0~11
now.getDate(); // 日期几号
now.getDay(); // 周几
now.getHours(); // 24小时制
now.getMinutes(); // 分钟
now.getSeconds(); // 秒
now.getMilliseconds(); // 毫秒数
now.getTime(); // 以number形式表示的时间戳

==Date中月份数字范围是: 0~11==

创建日期

// 直接赋值
var date = new Date(2020, 8, 10, 0, 0, 0);
// 字符串解析
var date = new Date("Thu Sep 10 2020 00:00:00 GMT+0800 (中国标准时间)");

JSON

JSON(JavaScript Object Notation)

JSON字符集必须为UTF-8, 字符串使用"", Object的键也使用"".

数据类型

  • number:和JavaScript的number完全一致;
  • boolean:就是JavaScript的truefalse
  • string:就是JavaScript的string
  • null:就是JavaScript的null
  • array:就是JavaScript的Array表示方式——[]
  • object:就是JavaScript的{ ... }表示方式。

序列化

'use strict'
var person = {
	name: "name",
    age: 18,
    otherInfo: "info"
}

var Jstring = JSON.stringify(person);

console.log(Jstring);

反序列化

'use strict'

var obj = JSON.parse('{"name":"name","age":18,"otherInfo":"info"}');

console.log(obj);

Ajax

  • 原生js写法, xhr异步请求
  • jQuery封装好的方法
  • axios请求

面向对象

创建对象

'use strict'

function Student(name){
    this.name = name;
    this.hello = function(){
        alert("hello, " + this.name);
    }
}

var student = new Student("student");

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

var student = new Student("student");

继承

原型继承

原型链

// 完整的修改js的原型链才算继承,可以通过编写继承函数实现.
function inherits(Child, Parent){
    var F = function(){};
    F.prorotype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
}

class继承

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

class PrimaryStudent extends Student{
    constructor(name, grade){
        super(name);
        this.grade = grade;
    }
    // other function
}

操作BOM对象

BOM(Browser Object Model)

  • window

    • 浏览器窗口
    • 全局作用域
  • navigator

    • 封装了浏览器的信息
    • 容易被人为修改
  • screen

    • 屏幕尺寸
  • location

    • 代表当前页面的url信息
  • document

    • 当前页面, HTML, DOM文档树
    • 获取具体文档树节点
    • 获取cookie
  • history

    • 浏览器的历史记录

DOM

DOM (Document Object Model)

  • 获取DOM节点

  • 更新DOM节点

    • innerText: 文本值
    • innerHTML: 可解析的html文本
  • 删除DOM节点

    1. 获取父节点
    2. 通过父节点删除
  • 插入DOM节点

    appendChild(newNode)

    insertBefore(newNode, targetNode)

  • 创建新的DOM节点

    createElement()

    var tempLink = document.createElement('link');
    var tempTag = document.createElement();
    
    tempTag.setAttribute('someAttribute');
    tempTag.someAttribute = "value";
    

表单

操作表单

  • 文本框 text
  • 下拉框 select
  • 单选框 radio
  • 多选框 checkbox
  • 隐藏域 hidden
  • 密码框 password
  • ...

提交表单

  • form onsubmit

jQuery

中文文档

公式: ==$(selector).action()==

事件

  • 鼠标事件
  • 键盘事件