2.Javaweb-javascript

javascript回顾

运算符

==：类型不一样，值一样，返回true

===：类型一样，值一样，返回true（绝对等于）

数据类型

NaN：属于“number”类型，但它与所有的数值都不相等，包括自己

NaN === NaN; //false isNaN(NaN); //true

null：表示定义了，但没有赋值

undefined：未定义

数组

js中数组的定义

var arr = [1, 23, 4, "js", true, 22.4, null];

java中数组的定义

int[] a = {1, 2, 34};

数组相关的操作

let arr = [1, 2, 33, "richard", true]; arr[1] = "js"; console.log(arr); //(5) [1, "js", 33, "richard", true] // slice()：截取Array的一部分，返回一个新的数组，类似java中String的substring操作 // push()：将数据压入数组的尾部； // pop()：弹出尾部的一个元素； // unshift()：将数据压入数组的头部； // shift()：弹出头部的一个元素； // sort()：对数组中的元素进行排序； // reverse()：元素反转； // cancat()：将两个数组进行拼接（不修改原有数组，会返回一个拼接的新数组）； // join():将数组的元素通过给定的符号进行连接，返回连接的字符串 arr.jion("-"); //"1-js-33-richard-true"

对象

var person = { name: "richard", age: 3, tags: ["js", "java", "web", true] }; "age" in person; //true, 对象中的所有键都属于字符串，值可以是任意数据类型 "toString" in person; //true, toString属于person对象的原型具有的属性 person.hasOwnProperty("toString"); //false, hasOwnProperty指person对象自身拥有的属性

字符串

let a = "student"; a[0] = "w"; console.log(a); //student, 可以对字符数组的单个赋值，但不会改变原有变量的值；

map

var map1 = new Map([["tom", 100], ["jack", 90], ["haha", 80]]); map1.get("tom"); //100 map1.set("admin", 123456); //Map(4) {"tom" => 100, "jack" => 90, "haha" => 80, "admin" => 123456} map1.delete("jack"); //Map(3) {"tom" => 100, "haha" => 80, "admin" => 123456}

set：可以去重（无序、不重复的集合）

var set1 = new Set([2, 1, 3, 22, 1, 33, 3]); //Set(5) {2, 1, 3, 22, 33} set1.add(100); //Set(6) {2, 1, 3, 22, 33, 100} set1.has(33); //true

控制循环

forin / forof

let arr = [1, 2, 33, "richard", true]; for (let index in arr) { console.log(index); } // 打印了 0,1,2,3,4（即打印了数组的下标） for (let index in arr) { console.log(arr[index]); } // 打印了 1,2,33,"richard",true for (let value of arr) { console.log(value); } // 打印了 1,2,33,"richard",true for (let number of set1) { console.log(number); } // 见下图 for (let map1Element of map1) { console.log(map1Element); } // 见下图

函数

函数的定义：arguments数组参数

var abs = function (x) { console.log("x => " + x); for (let i = 0; i < arguments.length; i++) { // js会有一个默认的arguments数组，用来接收函数的参数； console.log("arguments[" + i + "] => " + arguments[i]); } }; abs(1, 23, "richard", true, 222);

ES6新特性：rest

function abs1(a, b, ...rest) { console.log("a => " + a); console.log("b => " + b); console.log("rest => " + rest); } abs1(1, 23, "richard", true, 222);

apply的使用：方法.apply(对象, 参数数组)

function getAge(){ var now = new Date().getFullYear(); return now - this.birth; }; var richard = { name: "richard", birth: 2000, age: getAge }; console.log(getAge.apply(richard, [])); // 20， 即使用richard对象去调用getAge()方法，getAge()方法中的this.birth指的是richard对象中的 birth属性

变量的作用域

let：定义局部变量的关键字；const：定义常量的关键字

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

var x = "hello, javascript"; alert(window.x); //弹出“hello, javascript” window.alert(x); //弹出“hello, javascript”

js实际上只有一个全局作用域，任何变量（函数也可以视为变量），如果在函数的作用域内找不到，就会向外查找；

由于所有的全局变量都会绑定到window对象上，如果不同的js文件使用了相同的全局变量，就会引起冲突，如何避免？ – 一般是自己定义个独有的全局变量对象，将自己的全局变量绑定到该对象上

var App = {}; App.name = "richard"; App.add = function (a, b) { return a + b; };

json

json中对象使用大括号{}

json中数组使用中括号[]

所有的键值对使用 key:value

JSON.stringify(对象)：注意：转成json字符串后，所有的key都是字符串

var person = { name: "richard", age: 3, tags: ["js", "java", "web", true] }; JSON.stringify(person); //"{"name":"richard","age":3,"tags":["js","java","web",true]}"

JSON.parse(json字符串)：json字符串中，最外层和里面要用单引号和双引号区分

JSON.parse('{"name":"richard","age":3,"tags":["js","java","web",true]}') //{name: "richard", age: 3, tags: Array(4)

ajax

原生的js方法：xhr异步请求jQuery封装的方法：$(选择器).ajax()axios请求

原型

指定某个对象A的原型为对象B，类型java中的继承（A为B的子类）

var Student = { name: "richard", age: 3, run: function () { console.log(this.name + " is running..."); } }; var xiaoming = { name: "xiaoming" }; xiaoming.__proto__ = Student; xiaoming.run(); // xiaoming is running...

继承

ES6开始的新写法

class Person { constructor(name) { this.name = name; } hello() { alert(this.name + ", hello~"); } }; var xiaoming = new Person("xiaoming"); xiaoming.hello(); // 弹出 xiaoming，hello~ class LittleKid extends Person { constructor(name, grade) { super(name); this.grade = grade; } myGrade(){ alert(this.name + "'s grade is " + this.grade); } } var xiaohong = new LittleKid("xiaohong", 5); xiaohong.myGrade(); // 弹出 xiaohong's grade is 5

BOM

navigator对象：代表浏览器

screen对象：代表屏幕

location对象：代表当前页面的URL信息

location.assign("https://www.csdn.net/"); //代表从当前页面设置新的url地址：https://www.csdn.net/

document对象：代表当前页面的HTML DOM树

document.cookie; //获取页面的cookie document.title; //获取网页的title，比如百度的“百度一下，你就知道” document.getElementById("id"); //根据id获取文档对象

history对象：代表浏览器的历史记录

history.back; history.forward;

DOM

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

获取dom元素；

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h4>dom节点</h4> <li> <p id="se" class="aa">javase</p> <p id="ee">javaee</p> <p id="me">javame</p> </li> <script> document.getElementsByClassName("aa"); //HTMLCollection [p#se.aa, se: p#se.aa] document.getElementById("ee"); //<p id="ee">javaee</p> document.getElementsByTagName("p"); //HTMLCollection(3) [p#se.aa, p#ee, p#me, se: p#se.aa, ee: p#ee, me: p#me] </script> </body> </html>

更新dom元素；

element.innerHTML = new html content //改变元素的 inner HTML element.attribute = new value //改变 HTML 元素的属性值 element.setAttribute(attribute, value) //改变 HTML 元素的属性值，可以设置任意属性和值 element.style.property = new style // 改变 HTML 元素的样式

删除dom节点元素：①先获取父节点，②然后再删除自己；

document.removeChild(element) //删除 HTML 元素

插入dom节点元素；

document.createElement(element) //创建 HTML 元素 document.appendChild(element) //添加 HTML 元素 document.replaceChild(element) //替换 HTML 元素 document.write(text) //写入 HTML 输出流 document.getElementById(id).onclick = function(){code} //向 onclick 事件添加事件处理程序

jQuery

公式：$(selector).action()

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.5.1.js" type="application/javascript"></script> </head> <body> <h4>dom节点</h4> <li> <p id="se" class="aa">javase</p> <p id="ee">javaee</p> <p id="me">javame</p> <a src="">a标签</a><br/> <input type="button" id="submit" value="提交"/> </li> <script> // 通过#xx选择id $("#submit").click(function () { alert("提交按钮被点击了") }); // 通过.xx选择class $(".aa").click(function () { alert("javase 被点击了"); }); //通过tag名称选择tagName $("a").click(function () { alert("<a>标签被点击了"); }); </script> </body> </html>

可以通过jQuery修改dom，css，发起ajax请求等，可参考：https://jquery.cuishifeng.cn

好看的前端组件

ElementUIAnt DesignLayer弹窗组件