js02

回顾

js 代码有哪两种引入方式

<script> //js </script> // js 代码写在 *.js文件中 <script src="js文件的路径"></script>

声明变量和常量

let 变量名; const 常量名;

六种基本类型

number boolean null string undefined bigint

== (比较值) 与 === （比较类型和值）

数组

let array = []; // 长度可变 // 索引遍历 array[0] = 值; array.push(值); array.pop(); array.splice(索引, 个数);

函数

定义函数

function 函数名(参数) { // js 代码 // return 返回值 }

调用函数

函数名(实参)

匿名函数

function (参数) { // js 代码 // return 返回值 }

查找标签

document.getElementById(id值); document.getElementsByTagName(标签名); document.getElementsByClassName(class值); document.getElementsByName(name值); 子.parentElement // 找父亲

增加标签

document.createElement(标签名); 父.appendChild(子);

删除标签

父.removeChild(子);

管理属性

元素.属性名 元素.属性名=值 元素.removeAttribute("属性名") 元素.style.样式 元素.style.display = "none|block" 元素.className // 对应标签的 class 属性

标签内容

元素.innerText 元素.innerHTML

定义事件

<button onclick="函数名()"> </button> <script> function 函数名() { } </script> <button id="id值"> </button> <script> document.getElementById("id值").onclick = function() { } </script>

今日内容

1. 面向对象(了解)

字面量对象的定义方式(重点) let person = { name: "张三", hobby: ["xx","yy"], address: { city:"北京", street:"西二旗" }, 方法名: function(参数) { }, 方法名(参数) { } } person.address.city

2. 内置对象

参考网址：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

Number

parseIntNaN 代表非数字

Math

randomfloor

Date

getFullYeargetMonth (要+1)date.getTime() 获取毫秒值可以根据构造方法创建日期对象 new Date(毫秒值)

正则表达式(重点，会用，不需要从头写)

对字符串格式进行校验

验证邮件地址

aaa@bbb.net/^\w+@\w+\.\w+$/[a-zA-Z0-9_] 可以简化为 \w

量词

{n} 固定n次{m,n} 最小m次，最多 n 次{m,} 最小m次，最多不限{1, } 简化为 +, 最小1次{0, } 简化为 *，可以0，可以无限{0,1} 简化为 ?. 表示任意字符，真正的小数点 \.

年龄 18~60 竖线代表或者 一对圆括号代表一组

/^([2-5][0-9])|(60)|(1[89])$/ 20~59|60|18|19

中文

[a-z]

[\u4e00-\u9fa5]

数组

pushpopshiftincludessort - （原来是数字）排序是把元素当成了字符串 let arr = [1,2,3,4,5,11]; 解决： arr.sort( (a,b) => { return a-b } );

Set

* keys() .next.value

Map

set(key, value)get(key)delete(key)

遍历方式

// let arr = [1,2,3,4,5]; /*let arr = new Set(); arr.add(1); arr.add(2); arr.add(3); arr.add(4); for(let x of arr) { console.log(x); }*/ let map = new Map(); map.set("bj", "北京"); map.set("sh", "上海"); for(let [k,v] of map) { console.log(k, v); }

JSON.stringify(js对象) => json 的字符串

JSON.parse(json字符串) => js 对象

浏览器和服务器交换数据，很多时候会用 json

name=value{“name”:“value”} json 格式的参数

服务器返回的数据格式

... html格式响应 {“name”:“value”} json 格式响应

json格式

{ "名称":值（string, number, boolean, null） 没有方法 并且不能省略名字两步的双引号 }

3. 表单校验案例

<form onsubmit="return 函数()"> <!-- 函数执行返回 false 则不会提交，否则提交 --> </form> <form id="form1"> </form> <script> document.getElementById("form1").onsubmit = function() { //return false; 表单不会提交 //return true; 表单提交 } </script>

4. BOM（个别方法重要）

let t = window.setTimeout(函数, 毫秒值); window.clearTimeOut(t); let t = window.setInterval(函数, 间隔毫秒值); window.clearInterval(t); // 事件的定义window.不能省略 window.onload = function() { // 此函数会在页面所有内容都加载完毕后被值 // 初始化代码（不会存在找不到标签的情况） } location.href="要跳转的新的地址"; location.reload();