原始值包装类型
为了方便操作原始值,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()