免费网站空间和域名,义乌外贸论坛,成都爱品阅网络科技有限公司,wordpress 小说 采集目录
一、BOM 介绍
二、Window 对象
#xff08;一#xff09;基本介绍
#xff08;二#xff09;定时器 —— 延时函数
1.语法
2.清除时间函数
3.和 interval 间歇函数的区别
#xff08;三#xff09;JS 执行机制
1.介绍
2.同步任务
3.异步任务
4.执行过程…目录
一、BOM 介绍
二、Window 对象
一基本介绍
二定时器 —— 延时函数
1.语法
2.清除时间函数
3.和 interval 间歇函数的区别
三JS 执行机制
1.介绍
2.同步任务
3.异步任务
4.执行过程
四location 对象
1.location.href
2.location.search
3.location.hash
4.reload 方法
五navigator 对象
六history 对象
三、本地存储
一localStorage
1.介绍
2.语法
二sessionStorage
三存储复杂数据类型
1.把复杂数据类型转换成 JSON 字符串
四、数组中的别的渲染方法
一map() 方法
二join() 方法
三map() 方法 join() 方法 渲染页面
五、正则表达式
一介绍
二语法
1.定义正则表达式的语法
2.判断是否有符合规则的字符串
3.检测符合规则的字符串
三元字符
1.介绍
2.分类
边界符
量词
字符类
预定义类
修饰符
练习5s 后自动跳转
练习密码正确格式
练习敏感词隐藏练习 一、BOM 介绍
BOM 是浏览器对象模型是整个浏览器也可以说 BOM 里面包含 DOM
主要对最大的对象 Window 对象操作
二、Window 对象
一基本介绍
window 对象是一个全局对象也可以说 是 JavaScript 里面的顶级对象
document 是 window 里面的 document window.document
以前的很多语法全称应该是下面这样的
ps通过 var 定义的变量、函数最后都会变成 window 的属性和方法
window 的对象和函数在调用是可以省略前面的 window bodyscriptwindow.document.querySelector()function fn() {console.log(1)}window.fn()var num 10console.log(window.num)/script
/body
二定时器 —— 延时函数
屏幕中出现广告显示过几秒关闭 然后不再出现了 就可以用延时函数
我们用 JavaScript 内置的一个让代码延时执行的函数 setTimeout()
1.语法
setTimeout(回调函数 等待的毫秒数) 这个函数只执行一次理解成让代码延时执行
2.清除时间函数
bodyscriptlet timer setTimeout(function () {console.log(时间到了)clearTimeout(timer)}1000)/script
/body
3.和 interval 间歇函数的区别
对比执行次数
延时函数只执行一次
间歇函数每隔一段时间执行一次必须手动清除才能停下
三JS 执行机制
1.介绍
JS 语言最大的特点是单线程同一个时间只能做一件事
html5 提出 Web Worker 标准允许 js 脚本创建多个线程因此 js 中出现了 同步 和 异步
同步前一个任务完成再去做下一个程序的执行顺序和排列顺序一致是同步的
异步在做一件事的同时也能去做另一件事
本质区别在流水线上的各个流程的执行顺序不同
2.同步任务
同步任务都是在主线程上执行形成一个执行栈
3.异步任务
耗时的任务异步任务是单独放到任务队列中去例如定时器
4.执行过程
1.先执行执行栈中的同步任务
2.异步任务放到任务队列中去
3.当执行栈里面的所有同步任务执行完成然后再读取任务队列中的异步任务到执行栈中进行执行然后循此以往读取执行我们称这个循环过程为事件循环event loop
下面依次输出 哈哈 我们 人们
bodyscriptconsole.log(哈哈)setTimeout(function () {console.log(人们)}, 0)console.log(我们)/script
/body
四location 对象
1.location.href
它是对象类型全称是 Window.location location
它拆分并保存了 URL 地址的各个组成部分可用于自动跳转页面 不用链接跳转 用 js
比如注册页面注册成功自动跳转页面
bodyscriptlocation.href http://www.baidu.com/script
/body
2.location.search
search 属性获得 地址中携带的参数就是是地址 后面的部分
假如是表单获得的就是表单里的信息表单必须有 name 属性
bodyscriptconsole.log(location.search)/script
/body
3.location.hash
获得网页地址 #后面的部分 哈希
bodya href#/my我的/aa href#/friend朋友/aa href#/download下载/ascriptconsole.log(location.hash)/script
/body
4.reload 方法 location 的 reload 函数 用于页面刷新 如果里面有 true 则是强制刷新
bodybutton classreload刷新/buttonscriptconst reload document.querySelector(.reload)reload.addEventListener(click, function(){location.reload()})/script
/body
五navigator 对象
数据类型是对象该对象记录了浏览器自身的相关信息
userAgent 这个属性很重要
用来检查浏览器的版本和平台
如果是安卓苹果端跳转到另一个界面不用自己写直接利用这个属性就行
六history 对象
数据类型是对象管理历史记录该对象与浏览器地址栏的操作相对如应后退前进历史记录等功能
常用属性和方法
back() 后退
forward() 前进功能
go(参数) 前进后踢都能干 1 是前进一个页面 -1就是后退一个界面
bodybutton后退/buttonbutton前进/buttonscriptconst back document.querySelector(button:first-child)const forward back.nextElementSiblingback.addEventListener(click, function () {history.back()})forward.addEventListener(click, function () {history.forward()})/script
/body
三、本地存储
类似于数据库但是存在内存中的数据 一刷新就没了我们因此把数据存在用户浏览器中本地建一个小仓库
设置读取方便刷新页面不丢失数据容量较大
一localStorage
1.介绍
可以将数据永久存储再本地用户电脑中除非手动删除否则关闭页面也有
可以多窗口共享同一浏览器共享
以键值对的形式存储 本地存储只能存自负床会自动转成字符串注意一下
键永远带引号
2.语法
就是数据的增删改查 代码写完后在 f12 中查看 application 选项然后查看本地存储就能看见存储的数据
具体操作如下
bodyscriptlocalStorage.setItem(uname, 一个人)console.log(localStorage.getItem(uname))localStorage.removeItem(uname)localStorage.setItem(uname, 三个人)/script
/body
二sessionStorage
特性这个不同的地方是浏览器窗口一关就没了同一个页面下可以共享键值对存储用法和 localStorage 基本相同
获取数据 localStorage.getItem(key,)
三存储复杂数据类型
因为里面是以字符串类型存储的所以复杂数据类型无法直接使用
办法把复杂数据类型转换成 JSON 字符串再存储到本地
1.把复杂数据类型转换成 JSON 字符串
语法JSON.stringify(转换对象)
JSON 不管属性还是值都有引号 而且都是双引号称之为 JSON 对象
bodyscriptconst obj {uname: 一个人,age: 18,gender: 女}localStorage.setItem(obj,JSON.stringify(obj)) console.log(obj)/script
/body 2. JSON 字符串转换成 对象
利用 parse 函数
bodyscriptconst obj {uname: 一个人,age: 18,gender: 女}localStorage.setItem(obj,JSON.stringify(obj)) console.log(JSON.parse(localStorage.getItem(obj)))/script
/body
四、数组中的别的渲染方法
一map() 方法
用于拼接字符串不用之前的方法了给数组中的所有元素拼接相同的文字
可以进行迭代数组遍历数组返回新的数组
也称为映射 map() 有返回值 forEach 没有返回值
返回数组元素 console.log(ele)
返回数组下标 console.log(index)
bodyscriptconst arr [red, blue, yellow]const newarr arr.map(function (ele, index) {return ele 颜色})console.log(newarr)/script
/body二join() 方法
join()方法用于把数组中的所有元素转换一个字符串就是把数组中的所有元素拼接成一个字符串
括号里面规定那些元素变成一个字符串以后以什么符号分隔
如果只有一个空引号就是没有分隔都连在一起。
如果只有小括号就是以逗号分隔
下面输出red颜色blue颜色yellow颜色
bodyscriptconst arr [red, blue, yellow]const newarr arr.map(function (ele, index) {return ele 颜色})console.log(newarr.join())/script
/body
三map() 方法 join() 方法 渲染页面
1. map() 遍历数组处理数据生成 tr 返回一个数组
2.通过 join() 方法把map() 返回的数组转换为字符串
3.把字符串通过 innerHMTL 赋值给 tbody
五、正则表达式
一介绍
用于匹配字符串中字符组合的模式在 js 中 正则表达式也是对象‘
用来查找替换符合正则表达式的文本
使用场景
匹配验证表单用户名只能输入英文字母数字或下划线昵称可以输入中文
替换过滤敏感词等
提取字符串中提取我们想要的部分
二语法
定义规则然后查找
1.定义正则表达式的语法
const 变量名 /表达式/ / / 是正则表达式的字面量
2.判断是否有符合规则的字符串
test() 方法 查看正则表达式和指定的字符串是否匹配
被定义的规则.test(被检测的字符串)
返回 true 或者 false
bodyscriptconst str 我要学前端const reg /前端/console.log(reg.test(str))/script
/body3.检测符合规则的字符串
exec() 方法 在一个指定字符串中执行一个搜索匹配
返回一个数组
bodyscriptconst str 我要学前端const reg /前端/console.log(reg.exec(str))/script
/body
三元字符
1.介绍
如果是具体的字符就是普通字符 比如 ’123‘ ’abc‘
但是我们如果规定只能输入英文字母 就得输入abcdeghijklmn。。。26个英文字母很不方便
我们可以用元字符写法 [a-z] 提高灵活性
2.分类
边界符
规定什么开头什么结尾就是设置密码时必须以字母开头那种
^ :以谁开始
$:以谁结束
bodyscriptconsole.log(/^你/.test(我和你是人))console.log(/你/.test(你和我是人))/script
/body 注意如果两个符号都出现这种情况叫精确匹配必须完全和前面的内容一致不是开头结尾一样就行下面的例子输出就是 false
bodyscriptconsole.log(/^你$/.test(你你你))/script
/body
量词
设置某个模式的出现次数
*代表出现0次或者多次 只能是相同的文字重复
重复1次 或者多次
?重复0次或1次
{n}:重复 n 次 写几就出现几次
{n,}:重复 n 次 或更多次
{n,m}:重复n 到 m次
注意逗号左右两边千万不能有空格
这下面就返回 true
bodyscriptconsole.log(/^你*$/.test(你你你))/script
/body
字符类
a - z 表示26个小写字母
A - Z 表示26个大写字母
0 - 9 表示数字 0- 9
注意可以 三个组合使用 console.log(/^[a-zA-Z0-9$]/.test(p)) 这样就只能输入 大小写字母和数字
只要显示 abc 中的任何一个字符 都返回 true
下面返回 true 因为 andy 里面有 a 有 abc 中的一个就行
后面的大括号里面填入数字几 就能出现方括号里面的东西几次
bodyscriptconsole.log(/^[abc]{2}$/.test(andy))/script
/body腾讯 qq 号 ^[1-9][0-9]{4,}$(腾讯qq号从10000开始)
^写在方括号里面是取反的意思 在外面就是以什么开头的意思 . 表示除了换行都行
预定义类
\d : 0 - 9
\D :除了 0 - 9
\w :匹配任意的字母数字下划线
\s: 匹配空格
\S :匹配非空格的字符
修饰符
用于区分是否大小写 是否支持多行匹配等
语法/表达式/修饰符
主要有两种
i 是 ignore 的缩写 正则匹配时不区分大小写
g 是 global 的缩写匹配所有满足正则表达式的结果 全局查找
bodyscriptconsole.log(/^java$/.test(java))console.log(/^java$/i.test(JAVA))console.log(/^java$/i.test(Java))/script
/body
replace 替换
下面是一个全局匹配替换
bodyscriptconst str java是一门编程语言学完JAVA工资很高const re str.replace(/java/ig,前端)console.log(re)/script
/body练习5s 后自动跳转
界面展示 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv {width: 200px;height: 200px;background-color: pink;}/style
/head
a hrefhttp://www.baidu.com再过span5/span秒钟跳转页面/abodyscriptconst a document.querySelector(a)let i 5setInterval(function () {i--a.innerHTML 再过span${i}/span秒钟跳转页面if (i 0) {clearInterval()location.href http://www.baidu.com}}, 1000)/script
/body/html
练习密码正确格式
界面展示 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.right {background-color: green;}.error {background-color: red;}/style
/headbodyinput typetextspan/spanscriptconst reg /^[a-zA-Z0-9-_]{6,16}$/const input document.querySelector(input)const span input.nextElementSiblinginput.addEventListener(blur, function () {if (reg.test(this.value)) {span.innerHTML 输入正确span.className right} else {span.innerHTML 输入错误span.className error}})/script
/body/html
练习敏感词隐藏练习
展示部分 代码部分
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/style
/headbodytextarea name id cols30 rows10/textareabutton发布/buttondiv/divscriptconst tx document.querySelector(textarea)const btn document.querySelector(button)const div document.querySelector(div)btn.addEventListener(click, function () {div.innerHTML tx.value.replace(/黄色|敏感/g, **)tx.value })/script
/body/html
