原始值包装类型
为了方便操作原始值,ES提供了3种特殊的引用类型：Boolean，Number，String。
这些类型具备其他引用类型一样的特点，也具备与各自原始类型对应的特殊行为。每当用到某个原始值的方法或属性时，后台都会创建一个相应原始包装类型的对象，从而暴露出操作原始值的各种方法。
Boolean
布尔类型要知道原始布尔值与布尔实例的区别
let falseObject = new Boolean(false);//创建一个Boolean类型的实例
let result = falseObject && true;//所有对象在布尔表达式中都会自动转换为true
console.log(result);// true
let falseValue = false;//原始值
result = false && true;//与操作
console.log(result);//false
console.log(typeof falseObject);// object
console.log(typeof falseValue);// boolean
console.log(falseObject instanceof Boolean);//true
console.log(falseObject instanceof Boolean);//false instanceof对原始值返回false
理解原始布尔值和Boolean对象之间的区别非常重要，强烈建议永远不要使用后者。
Number
let num = 10;
num.toString();//"10"
num.tostring(2);//"1010"
toFixed()
返回包含指定小数点位数的数值字符串
let num = 10;
num.toFixed(2);//"10.00"
如果数值本身的小数位超过了参数指定的位数，则四舍五入到最接近的小数位
let num = 10.005;
num.toFixed(2);//"10.01"
toFixed自动舍入的特点非常适合处理货币
toPrecision()
该方法接收一个参数，表示结果中数字的总位数
let num = 99;
num.toPrecision(2);//99
num.toPrecision(3);//99.0
在typeof 与 instanceof 方面与Boolean类似。
isInteger()
用于辨别一个数值是否为整数
Number.isInteger(1);//true
Number.isInteger(1.00);//true 有时候，小数位的0可能会让人误以为数值是一个浮点值
Number.isInteger(1.01);//false
String
创建一个String对象
let stringObj = new String("Hello world");
每个String对象都有一个length属性，表示字符串中字符的数量
let stringVal = "hello world";
stringVal.length;//11
charAt()
该方法返回给定索引位置的字符,由传给方法的整数参数指定
let stringVal = "abcdef";
stringVal.charAt(2);//"c"
concat()
将一个或多个字符串拼接成一个新字符串
let str = "hello ";
let res = str.concat("world");
log(res);//"hello world"
log(str);//"hello "
可以一次性拼接多个字符串
let str = "hello ";
let res = str.concat("world","!");
log(res);//"hello world!"
log(str);//"hello "
slice(),substr(),substring()
从字符串中提取子字符串
let str = "hello world"
str.slice(3)//"lo world"
str.substr(3)//"lo world"
str.substring(3)//"lo world"
str.slice(3,7)//"lo w"
str.substring(3,7)//"lo w"
str.substr(3,7)//"lo worl" 第二个参数表示返回的字符数
indexOf(),lastIndexOf
在字符串中定义子字符串，并返回位置，indexOf()从字符串开头开始搜索，lastIndexOf()从结尾搜索。
let str = "hello world"
str.indexOf("o")//4
str.lastIndexOf("o")//7
他们的第二个参数表示开始搜索的位置
let str = "hello world"
str.indexOf("o",6)//7
str.lastIndexOf("o",6)//4
for与while的区别
- 在不确定循环次数时使用while
- 确定循环次数使用for
数组
-
增
-
arr.push(“要添加的数据”)—数据添加到数组的末尾
let arr = ["a", "b"] arr.push("c") console.log(arr)// a,b,c -
arr.unshift(“要添加的数据”)–数据添加到数组的开头
let arr = ["a","b"] arr.unshift("c") console.log(arr)//c,a,b -
splice(a,0,c) — 在索引a的前面，删除0个元素，添加c数据
let arr = ["a","b"] arr.splice(0,0,"c") console.log(arr)//c,a,b
-
-
删
-
pop() ---- 删除数组最后一个元素
let arr = ["a","b","c"] arr.pop(); console.log(arr)//a,b -
shirt() — 删除数组第一个元素
let arr = ["a","b","c"] arr.shirt(); console.log(arr)//b,c -
splice(a,b) ---- 从数组位置a开始,删除b个元素
let arr = ["a","b","c"] arr.splice(1,2);//从索引1开始，删除两个元素 console.log(arr)//a
-
对象
-
for in
let person = { username: 'xiaoming', age: 18, height: 180 } for (let k in person) { console.log(k) //username,age,height console.log(person[k])// xiaoming,18,180 }
栈
- 存放简单数据类型
堆
- 存放引用数据类型
Web API
- 作用和分类
- 作用: 就是使用JS去操作 html 和 浏览器
- 分类：DOM（文档对象模型），BOM（浏览器对象模型）
DOM
概念
- 作用：可以开发网页内容特效和实现用户交互
- DOM树
- 将 HTML 文档已树状结构直观的表现出来，我们称之为文档树或DOM树
- 作用：文档树直观的体现了标签与标签之间的关系
- DOM对象：浏览器根据 html 标签生成的JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
- 浏览器自动帮我们创建
- 打印DOM对象需要使用console.dir()
- document对象
- 是DOM里提供的一个对象
- 提供的属性和方法都是用来访问和操作网页内容的
- 网页所有内容都在document里面
DOM的使用
-
想要获取页面的标签 可以通过 document.querySelector(选择器)
let input = document.querySelector('.类名') -
document.querySelectorAll 获取多个匹配的dom元素
let input = document.querySelectorAll('.类名')//返回一个数组
-
querySelector 只能够获取第一个满足条件的标签
-
如果选择器找不到元素 querySelector 只会返回null
-
dom.innerHTML—在dom元素内写入标签(很好用)
let div = document.querySelector('.类名') div.innerHTML = '<h3>程序猿的头发都很多</h3>' -
dom.innerText – 在dom元素内写入文本
let div = document.querySelector('.类名') div.innerText = '程序猿的头发都很多' -
innerHTML和innerText都是作用于双标签，单标签无效
-
设置 /修改dom元素样式属性
//对象.style.样式属性 = 值 let box = document.querySelector('.box') box.style.width = '200px' box.style.backgroundColor = 'pink' -
设置元素类名
let box = document.querySelector('.box') box.className = 'active' //会清空这个dom元素原有的类，然后添加新的类 //如果要设置多个类，用空格分隔即可 box.className = 'active active2' //不影响之前的类，添加新的类 box.classList.add('active') //添加多个类 box.classList.add('active','active2') //移除元素的类 box.classList.remove('active') //移除多个类 box.classList.remove('active','active2') //切换 本来有就会移除，没有就会添加 box.classList.toggle('active') -
表单属性设置
//设置普通的输入框的输入值 input.value = '表单的值' //设置按钮的启用/禁用 button.disable = true/false //设置单选框/复选框的选中/取消选中 radio.checked = true checkbox.checked = false //设置下拉列表select option.selected = true //文本域标签有一点特殊 //获取文本内容,除了innerText都可以用 textarea.value textarea.innerText textarea.innerHTML //设置文本内容,三者都可以用，都不会转义标签 textarea.value = `<h1>xxxxx</h1>` textarea.innerText = `<h1>xxxxx</h1>` textarea.innerHTML = `<h1>xxxxx</h1>`
事件
-
概念
- 事件：编程时系统内发生的动作或者发生的事情
- 事件监听：系统监测是否有事件产生，一旦事件触发，立即调用一个函数响应，也成为注册事件
-
使用方式
//1. 触发事件dom元素 //2. 事件类型 //3. 响应事件的函数 let btn1 = document.querySelector('.btn1'); btn1.addEventListener('click',() => { console.log('回应点击事件') }) //addEventListener可以绑定多个函数 btn1.addEventListener('click',() => { console.log('回应点击事件') }) btn1.addEventListener('click',() => { console.log('回应点击事件') }) -
事件类型
- 鼠标点击：click
- 鼠标经过：mouseenter
- 鼠标离开：mouseleave
- 表单获得焦点：focus
- 表单失去焦点：blur
- 键盘按下触发：keydown
- 键盘抬起触发：keyup
- 表单输入触发：input
- 鼠标右键触发：contextmenu
- 滚动触发(window/dom)：scroll
- 屏幕尺寸发生变化触发（window）：resize
- 表单内容变化触发：change
- 动画开始播放触发：animationstart
- 动画重新播放触发：animationiteration
- 动画结束播放时触发：animationend
dom节点
-
概念：DOM数里每一个内容都称之为节点
-
节点类型：
- 元素节点：如body,div等，html是根节点
- 属性节点：所有的属性 比如href
- 文本节点：所有的文本
-
查找节点
- 父节点查找：子元素.parentNode
- 子节点查找（获得所有的子节点）：父元素.children 返回一个伪数组，该伪数组没有foreach方法
- 兄弟节点查找：nextElementSibling(下一个兄弟节点) previousElementSibling(上一个兄弟节点)
-
追加节点
-
创建节点
let li = document.createElement('li');//li 可以设置样式，文本 //创建文本节点 let text = document.createTextNode('创建的新闻本'); -
插入节点
let ul = document.querySelector('ul'); //插入 //插入到父标签的底层 ul.appendChild(li); //插入到某个子元素的前面 //父元素.insertBefore(要插入的元素,在哪个元素前面) ul.insertBefore(li,ul.children[0]);//永远插入到ul的顶层 //apend可以插入多个标签 div.append(span,img)- 克隆节点
-
//克隆一个已有的元素节点
//被克隆的元素.cloneNode(布尔值)
let newBox = oldBox.cloneNode(true) //oldBox的后代节点一起克隆(深拷贝)
let newBox = oldBox.cloneNode(false) //oldBox的后代节点不克隆（浅拷贝）
-
删除节点
-
//父元素.removeChild(要删除的元素) let ul = document.querySelector('ul') let il = document.querySelector('li') ul.removeChild(ul.childNodes[index]) //元素.remove() //删除该元素 li.remove() //父元素.innerHTML = '';
//移除父元素所有的子元素
ul.innerHTML = ‘’ -
-
小结
-
插入的节点不一定非要新创建的，也可以剪切其他的元素节点来插入
-
一个被创建的节点是不能被重复添加的，父元素每添加一个节点，就要新创建一个节点来添加，如：
//点击一次按钮，给ul添加一个li标签 sendDom.addEventListener('click',() => { let liDom = document.createElement('li');//每次添加都要新建一个li元素 liDom.innerText = textareaDom.value; ulDom.insertBefore(liDom,ulDom.children[0]);//永远在ul内的顶部插入 numDom.innerText = 0; textareaDom.value = ''; });
-
定时器
使用方式
-
开启定时器
//setInterval(函数,间隔时间) //作用：每隔一段时间调用这个函数 //间隔时间单位是毫秒 setInterval(()=>console.log('a'),1000) //给定时器调用的函数传递参数 let a = 'a' setInterval(sayhello,1000,a) function sayhello(str) { console.log(str); } -
关闭定时器
let a = setInterval(()=>console.log('a'),1000) clearInterval(a)//关闭定时器
this
概念
- 代表当前函数运行时所处的环境
- 谁调用this,this就指向谁
时间对象
概念
- 用来表示时间的对象
使用
-
获得当前时间
let date = new Date() -
获得特定时间
let date = new Date('1949-10-01') let targetDate = new Date("2021/06/07 09:00:00");
时间戳
-
获取时间戳
Date.now() //特定时间的时间戳 let date = new Date('1949-10-01'); date.getTime(); date.valueOf();
事件对象
概念
- 也是个对象，这个对象有事件触发时的相关信息
- 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息
获取事件对象
-
在事件绑定的回调函数的第一个参数就是事件对象
btn.addEventListener('click',function(event) { console.log(event) })
事件对象常用属性
- type: 获取当前的事件类型
- clientX/clientY: 获取光标相对于浏览器可见窗口左上角的位置
- offsetX/offsetY: 获取光标相对于当前DOM元素左上角的位置
- key: 获取键盘按下事件的按键值
- preventDefault():阻止浏览器标签的默认行为
事件流
- 事件流指的是事件完整执行过程中的流动路径
- 捕获阶段是从父到子
- 冒泡阶段是从子到父
- 默认情况，如果要修改冒泡，可以将addEventListener第三个参数传入true既是捕获阶段
- 以后的开发过程中，还是继续使用默认的冒泡阶段
- 阻止冒泡行为添加：event.stopPropagation()
阻止标签的默认行为
- event.preventDefault()
事件委托
- 概念：事件委托是利用事件流的特征解决一些开发需求的知识技巧
- 原理：事件委托其实是利用事件冒泡的特点，给父元素添加事件，子元素可以触发
- 实现：事件对象.target 可以获得真正触发事件的元素
- 事件对象.target.nodeName可以获得当前元素节点的大写名称
- 一些动态生成要触发事件的元素可以通过事件委托来完成
- 自定义标签属性data-XXX可能会用到，获取该属性使用event.target.dataset.XXX
自定义标签属性
使用方式
- 固定搭配：标签内写上data-xxx
- 调用：dom.dataset.xxx
加载事件
概念
- 加载外部资源（图片，外联css，js）加载完毕时触发的事件
- 事件名：load
使用
-
监听页面所有资源加载完毕
window.addEventListener('load',function(){ //执行的操作 });
元素大小和位置
scroll全家桶
-
页面滚动
window.addEventListenner('scroll') -
页面的滚动距离
document.documentElement.scrollTop -
元素滚动
dom.addEventListenner('scroll') -
获取元素滚动的距离
dom.scrollTop dom.scrollLeft -
获取可以滚动的区间的宽度
dom.scrollWidth -
获取可以滚动的区域的高度
dom.scrollHeight
offset全家桶
-
获取元素的宽度（包含滚动条）
dom.offsetWidth -
获取元素的高度（包含滚动条）
dom.offsetHeight -
获取距离自己定位父元素的左距离，若父级没有定位，则获取距离window的距离
dom.offsetLeft -
获取距离自己定位父元素的上距离
dom.offsetTop
client家族
-
获取宽（不包含边框，滚动条）
dom.clientWidth -
获取高（不包含边框，滚动条）
dom.clientHeight -
获取左边框
dom.clientLeft -
获取上边框
dom.clientTop
window对象
延时函数
- 语法：setTimeout(回调函数,等待的毫秒数)
location对象
属性
- href：获取完整的URL地址，对其赋值用于地址的跳转
- reload(): 刷新当前页面，传入参数true时表示强制刷新
- search: 获取url上 ？ 后面一串字符
- hash: 获取 # 后面一串字符
histroy对象
概念
- 该对象与浏览器地址栏操作相对应，如前进，后退，历史记录等
属性
- back(): 可以后退功能
- forward(): 前进功能
- go(参数): 前进后退功能，参数如果是1 前进一个页面，如果是-1 后退一个页面
正则表达式
概念
- 用于匹配字符串中字符组合的模式
作用
- 表单验证（匹配）
- 过滤敏感词（替换）
- 字符串中提取我们想要的部分（提取）
语法
-
简单的定义正则表达式语法：
let 变量名 = /表达式/(可选的修饰符) -
判断是否有符合规则的字符串
let str = 'abschuosahdjlshaoihfdiosh' let reg = /chuo/ let flag = reg.test(str) console.log(flag) //true
元字符
边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
| 边界符 | 说明 |
|---|---|
| ^ | 表示匹配行首的文本（以谁开始） |
| $ | 表示匹配行尾的文本（以谁结束） |
量词（用来设定某个模式出现的次数）
| 量词 | 说明 |
|---|---|
| * | 重复0次或更多次 |
| + | 重复一次或更多次 |
| ? | 重复0次或一次 |
| {n} | 重复n次 |
| {n,} | 重复n次或更多次 |
| {n,m} | 重复n到m次 |
字符类（占位符）
| 预定类 | 说明 |
|---|---|
| \d | 匹配0-9之间的任一数字，相当于[0-9] |
| \D | 匹配所有0-9以外的字符，相当于[ ^ 0 - 9] |
| \w | 匹配任意的字母，下划线，数字，相当于[ ^ A-Za-z0-9] |
| \W | 除所有字母。数字和下划线以外的字符，相当于[ ^A-Za-z0-9_] |
| \s | 匹配空格(包括换行符，制表符，空格符等) |
| \S | 匹配非空格的字符 |
修饰符
| 修饰符 | 描述 |
|---|---|
| i | 执行对大小写不敏感的匹配 |
| g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止) |
| m | 执行多行匹配 |
localStorage
心得
- 使用localStorage时，离不开JSON.stringify()和JSON.parse()
133
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
