BOM
BOM 提供了与浏览器窗口进行交互的对象和方法。它允许 JavaScript 代码与浏览器的各种功能进行交互，比如控制浏览器窗口的大小、位置，获取浏览器的相关信息（如用户代理字符串）等。
window 对象：
它是 BOM 的核心对象，代表浏览器的一个窗口。所有的全局 JavaScript 变量和函数都自动成为 window 对象的成员。
例如，当你定义一个全局变量var myVariable = 5;，实际上它是window.myVariable。通过window对象可以进行很多操作，如window.alert('Hello');会弹出一个警告框。同时，window对象可以用于获取窗口的大小，像window.innerWidth和window.innerHeight可以分别获取浏览器窗口的内部宽度和高度（不包括浏览器边框、菜单栏等）。
location 对象：
用于获取或设置当前页面的 URL 相关信息。例如，location.href（assign）可以获取当前页面的完整 URL，location.reload()可以重新加载当前页面。如果要跳转到一个新的页面，可以通过location.href = 'https://newpage.com';来实现。
点击跳转按钮，就会跳转到百度链接，点击刷新按钮就是刷新页面
<button>跳转</button>
<button class="btn2">刷新</button>
<script>
//跳转
const btn=document.querySelector('button')
btn.addEventListener('click',function(){
location.assign('https://www.baidu.com')
console.log(location.hash)
})
// 刷新
const btn2=document.querySelector('.btn2')
btn2.addEventListener('click',function(){
location.reload()
// console.log(location.hash)
})
</script>navigator 对象：
包含了有关浏览器的信息。
- navigator.userAgent可以获取用户代理字符串，它包含了浏览器的名称、版本、操作系统等信息。
- language 属性返回用户的浏览器语言设置，通常是由浏览器根据用户操作系统的默认语言自动设定的。
- platform 属性返回用户的操作系统信息，它主要用于判断用户使用的是桌面操作系统还是移动设备的操作系统。
- onLine 属性用于检查用户当前是否处于联网状态。如果用户断开网络连接，navigator.onLine 将返回 false，否则返回 true。
- geolocation 属性提供了访问用户位置信息的能力。调用 navigator.geolocation.getCurrentPosition() 方法，开发者可以获取用户的经纬度信息
<script>
console.log(navigator.userAgent)
console.log(navigator.onLine)
console.log(navigator.platform)
</script>
history 对象：
可以用于操作浏览器的历史记录。比如history.back()可以让浏览器回退到上一个页面，就像用户点击了浏览器的 “后退” 按钮一样；history.forward()则是前进到下一个页面。同时，history.pushState()可以向历史记录中添加一个新的状态，这在单页应用（SPA）中用于实现页面导航而不刷新整个页面的功能。
<button>跳转</button>
<button class="back">后退</button>
<button class="forward">前进</button>
<script>
const btn=document.querySelector('button')
btn.addEventListener('click',function(){
location.assign('https://www.baidu.com')
})
const back=document.querySelector('.back')
const forward=document.querySelector('.forward')
forward.addEventListener('click',function(){
history.go(1)
})
</script>定期器（延迟函数）
setTimeout 仅仅只执行一次，所以可以理解为就是把一段代码延迟执行
间歇函数 setInterval : 每隔一段时间就执行一次
清除延时函数： clearTimeout(timerId)
注 意
- 延时函数需要等待,所以后面的代码先执行
- 返回值是一个正整数，表示定时器的编号
<script>
let timerld=setTimeout(function(){
console.log('只执行一次')
},3000)
console.log(timerld)
clearTimeout(timerld)
</script>
|
正则表达式
正则表达式是一种特殊的字符序列模式，通过使用特定的语法规则，可以在文本中进行复杂的模式匹配。它就像是一种文本搜索和处理的 “公式”，能够帮助程序员快速、准确地定位和处理符合特定模式的字符串。
用途
文本搜索与匹配
在大量文本中查找特定的单词、短语或字符模式。例如，在一篇文章中搜索所有的电子邮件地址、网址，或者查找某个特定单词的所有出现位置。
文本验证
用于验证用户输入是否符合特定的格式要求。如验证手机号码是否为 11 位数字、密码是否满足一定的强度规则（包含大小写字母、数字等）、身份证号码是否符合格式等。
文本替换与处理
可以对匹配到的文本进行替换操作。比如将文本中所有的连续空白字符替换为单个空格，或者将特定格式的日期字符串从一种格式转换为另一种格式。
// 概念
// const str = 'web 前端开发'
// const reg = /web/
// console.log(reg.test(str))
// console.log(reg.test('java 开发')) 
元字符
正则表达式中具有特殊含义的字符，
脱字符（^）
- 在字符类外的含义：匹配字符串的开头。例如，^abc只会匹配以abc开头的字符串，如abcdef，而不会匹配defabc。
- 在字符类内的含义：表示否定，用于匹配除了字符类中指定字符之外的任意字符。例如，[^abc]可以匹配除a、b、c之外的任何一个字符，像d、1、$等。
// 1. 匹配开头的位置 ^
const reg = /^web/
console.log(reg.test('web 前端'))
console.log(reg.test('前端 web'))
console.log(reg.test('前端 web 学习'))
console.log(reg.test('we'))美元符号（$）
- 含义：匹配字符串的结尾。例如，abc$只会匹配以abc结尾的字符串，如defabc，而不会匹配abcdef。
// 2. 匹配结束的位置 $
const reg1 = /web$/
console.log(reg1.test('web 前端'))
console.log(reg1.test(' 前端web')) 3. 精确匹配 ^ $
const reg2 = /^web$/
console.log(reg2.test('web前端'))
console.log(reg2.test('前端web'))
console.log(reg2.test('前端web学习'))
console.log(reg2.test('web')) 量词
正则表达式中的量词用于指定某个模式出现的次数。以下是对常见量词的详细介绍：
1. *（星号）
- 含义：匹配前面的元素零次或多次。它允许所修饰的模式出现任意次数（包括不出现）。
// 1. * 重复次数 >= 0 次
const reg1 = /^w*$/
console.log(reg1.test(''))
console.log(reg1.test('w'))
console.log(reg1.test('ww'))2. +（加号）
- 含义：匹配前面的元素一次或多次。与*不同，它要求所修饰的模式至少出现一次。
// 2. + 重复次数 >= 1 次
const reg2 = /^w+$/
console.log(reg2.test(''))
console.log(reg2.test('w'))3. ?（问号）
- 含义：匹配前面的元素零次或一次，即前面的元素是可选的。
// 3. ? 重复次数 0 || 1
const reg3 = /^w?$/
console.log(reg3.test(''))
console.log(reg3.test('w'))
console.log(reg3.test('ww'))4. {n}
- 含义：匹配前面的元素恰好n次。
// 4. {n} 重复 n 次
const reg4 = /^w{2}$/
console.log(reg4.test(''))
console.log(reg4.test('w'))
console.log(reg4.test('ww'))
console.log(reg4.test('www'))5. {n,}
- 含义：匹配前面的元素至少n次。
// 5. {n,} 重复次数 >= n
const reg5 = /^w{2,}$/
console.log(reg5.test(''))
console.log(reg5.test('w'))
console.log(reg5.test('ww'))
console.log(reg5.test('www'))6. {n,m}
- 含义：匹配前面的元素至少n次且最多m次。
// 6. {n,m} n =< 重复次数 <= m
const reg6 = /^w{2,4}$/
console.log(reg6.test('w'))
console.log(reg6.test('ww'))
console.log(reg6.test('www'))
console.log(reg6.test('wwww'))范围
表示字符的范围，定义的规则限定在某个范围，比如只能是英文字母，或者数字等等，用 表示范围
-
[abc] 匹配包含的单个字符， 多选1
const reg1 = /^[abc]$/
console.log(reg1.test('a'))
console.log(reg1.test('b'))
console.log(reg1.test('c'))
console.log(reg1.test('d'))
console.log(reg1.test('ab'))-
[a-z] 连字符 单个
const reg2 = /^[a-z]$/
console.log(reg2.test('ab'))
console.log(reg2.test('p'))
console.log(reg2.test('0'))
console.log(reg2.test('A'))
console.log('-----------------------')-
想要包含小写字母，大写字母 ，数字
const reg3 = /^[a-zA-Z0-9]+$/
console.log(reg3.test('aB1'))
console.log(reg3.test('b'))
console.log('-----------------------')-
用户名可以输入英文字母，数字，可以加下划线，要求 6~16位
const reg4 = /^[a-zA-Z0-9_]{6,16}$/
console.log(reg4.test('abcd1'))
console.log(reg4.test('abcd12'))
console.log(reg4.test('ABcd12'))
console.log(reg4.test('ABcd12_')) 总结
扫一扫
876
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
