持续性学习-Day16（前端基础JavaScript）

LearnJavaScript

参考教学视频：秦疆

参考知识

UI框架

• Ant-design:阿里巴巴出品，基于React的UI框架

• ElementUI、iview、ice：饿了吗出品，基于VUE的UI框架

• BootStrap：Twitter推出的一个用于前端开发的开源工具包

• AmazeUI：一款HTML5跨屏前端框架

JavaScript构建工具

• Babel：JS编译工具，主要用于浏览器不支持的ES新特性，比如用于编译TypeScript

• WebPack：模块打包器，主要作用是打包、压缩、合并和按序加载

浮点数问题

尽量避免浮点数运算

Math.abs()<0.00000001 近似相等

严格检查模式strict

// 前提：需要支持ES6语法，必须写在JavaScript的第一行

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

// 局部变量建议使用let定义

特殊字符串

~~ // 长字符串

${name} // 模板字符串

slice() // 截取array的一部分，返回一个新的数组

push() // 压入到尾部

pop() // 弹出尾部的一个元素

unshift() // 压入到头部

shift() // 弹出头部的一个元素

sort() // 排序

reverse() // 元素反转

concat() // 拼接，返回一个新的数组

--- 对象 ---

delete() // 可以动态的删除对象的属性

// 动态的添加

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

// JavaScript中所有的键都是字符串

hasownProperty() // 判断一个属性是否是这个对象自身拥有

arr.forEach(function(value){console.log(value)}) // forEach遍历下标

for(var x of x) //遍历map

for(var index in object){} // 遍历

arguments

代表函数传入的所有参数，是一个数组

rest

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

function test(a,b,rest...){} //

函数

内部函数和外部函数的变量重名：双亲委派机制，在JavaScript中函数查找变量重自身开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量

//js执行引擎，自动提升变量的声明，但不会提升变量的赋值

默认所有全局变量都会绑定在window对象下

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

建议都使用let定义局部变量，常量const

function name(){};

name.apply(对象,参数);

Date

var now = new Date(); // Mon May 27 2024 16:35:16 GMT+0800 (中国标准时间)

now.getFullYear();

now.getMonth();

now.getDate();

now.getDay();

now.getHours();

now.getMinutes();

now.getSeconds();

now.getTime(); //时间戳 全世界统一 1970 1.1 0:00:00 毫秒数

JSON

json.parse();

json.stringify();

JavaScript对象

obj.__proto__ = obj2;   //继承
function student(name){
    this.name = name;
}
student.prototype.hello = function(){
    alert("hello");
}
//ES6之后
//定义一个类
class Student{
    constructor(name){
        this.name = name;
    }
    hello(){
        alert("hello");
    }
}

操作BOM对象

navigator:封装了浏览器信息

navigator.appName
navigator.appVersion
navigator.userAgent
navigator.platform

screen:屏幕

screen.width;
screen.height;

location:代表当前页面的URL信息

location.host;
location.href;
location.protocol;
location.reload();
location.assign("url");

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

document.title
document.cookie

服务器端可以设置cookie:httpOnly

history:代表浏览器的历史记录

history.back();
history.forward();

操作DOM对象

浏览器网页就是一个树型DOM结构

• 更新：更新DOM节点

• 遍历DOM节点：得到DOM节点

• 删除：删除一个DMO节点

• 添加：添加一个新的节点

要操作一个DOM节点，就要先获得这个DOM节点

document.getElementByTagName();
document.getElementById();
document.getElementByClassName();
.children;

更新节点
.innerText = "";
.innerHTML = "";
操作CSS
.style.color = "";
.style.fontSize = "";
.style.padding = "";
删除节点
.removeChild();
//删除多个节点的时候，children是在时刻变化的，删除节点的时候一定要注意

插入节点
.appendChild()
.insertBefore(new,old);
创建节点
.createElement()
var myScript = document.createElement("script");
myScript.setAttribute("type","text/javascript");

操作表单

md5加密:

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

md5(value);

表单提交出发submit事件

<form action="#" method="post" onsubmit="return fuc()"> //调用函数，可以阻止提交
</form>

jQuery

获取jQuery:https://jquery.com/

公式：$(selector).action()

• jQuery事件

$(selector).mousedown(function (e){})

// 当网页元素加载完成之后响应事件
$(document).ready(function(){});
// 简写
$(function(){});