js基础-BOM+正则表达式+jq

BOM

BOM(Browser Object Model ) 是浏览器对象模型

• window对象是一个全局对象，也可以说是JavaScript中的顶级对象
• 像document、alert()、console.log()这些都是window的属性，基本BOM的属性和方法都是window的。
• 所有通过var定义在全局作用域中的变量、函数都会变成window对象的属性和方法
• window对象下的属性和方法调用的时候可以省略window

js执行机制

JavaScript 语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。
这是因为 Javascript 这门脚本语言诞生的使命所致——JavaScript 是为处理页面中用户的交互，以及操作DOM 而诞生的。比如我们对某个 DOM 元素进行添加和删除操作，不能同时进行。 应该先进行添加，之后
再删除。
单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。这样所导致的问题是： 如果 JS 执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞的感觉。

多线程

• 同步、异步
• 同步任务
  同步任务都在主线程上执行，形成一个执行栈。
• 异步任务
  JS 的异步是通过回调函数实现的。
  一般而言，异步任务有以下三种类型:
  1、普通事件，如 click、resize 等
  2、资源加载，如 load、error 等
  3、定时器，包括 setInterval、setTimeout 等
  异步任务相关添加到任务队列中（任务队列也称为消息队列。
  
  
  由于主线程不断的重复获得任务、执行任务、再获取任务、再执行，所以这种机制被称为事件循环（ event loop）。

location对象

• location 的数据类型是对象，它拆分并保存了 URL 地址的各个组成部分
• 常用属性和方法：
  • href 属性获取完整的 URL 地址，对其赋值时用于地址的跳转
  • search 属性获取地址中携带的参数，符号 ？后面部分
  • hash 属性获取地址中的啥希值，符号 # 后面部分
  • reload 方法用来刷新当前页面，传入参数 true 时表示强制刷新

navigator对象

• navigator的数据类型是对象，该对象下记录了浏览器自身的相关信息
• 常用属性和方法：
  • 通过 userAgent 检测浏览器的版本及平台

// 检测 userAgent（浏览器信息）
!(function () {
const userAgent = navigator.userAgent
// 验证是否为Android或iPhone
const android = userAgent.match(/(Android);?[\s\/]+([\d.]+)?/)
const iphone = userAgent.match(/(iPhone\sOS)\s([\d_]+)/)
// 如果是Android或iPhone，则跳转至移动站点
if (android || iphone) {
location.href = 'http://m.itcast.cn'
}
})()

histroy对象

• history 的数据类型是对象，主要管理历史记录， 该对象与浏览器地址栏的操作相对应，如前进、后退、历史记录等
• 常用属性和方法：
  
  （history 对象一般在实际开发中比较少用，但是会在一些 OA 办公系统中见到。）

本地存储

本地存储介绍

随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。
1、数据存储在用户浏览器中
2、设置、读取方便、甚至页面刷新不丢失数据
3、容量较大，sessionStorage和localStorage约 5M 左右

• 常见的使用场景：
• https://todomvc.com/examples/vanilla-es6/ 页面刷新数据不丢失

本地存储分类- localStorage

目标： 能够使用localStorage 把数据存储的浏览器中

• 作用: 可以将数据永久存储在本地(用户的电脑), 除非手动删除，否则关闭页面也会存在
• 特性：
  • 可以多窗口（页面）共享（同一浏览器可以共享）
  • 以键值对的形式存储使用
• 语法

存储数据：
	localStorage.setItem(key)
获取数据：
	localStorage.getItem(key)
删除数据：
	localStorage.removeItem(key)

• 浏览器查看本地数据:
  
• 特性：
  • 生命周期为关闭浏览器窗口
  • 在同一个窗口(页面)下数据可以共享
  • 以键值对的形式存储使用
  • 用法跟localStorage 基本相同

存储复杂数据类型

目标： 能够存储复杂数据类型以及取出数据

• 本地只能存储字符串,无法存储复杂数据类型.
• 解决：需要将复杂数据类型转换成JSON字符串,在存储到本地
• 语法：JSON.stringify(复杂数据类型)
  
  • 将复杂数据转换成JSON字符串 存储 本地存储中
    
• 问题：因为本地存储里面取出来的是字符串，不是对象，无法直接使用
• 解决：把取出来的字符串转换为对象
• 语法：JSON.parse(JSON字符串)
  
  • 将JSON字符串转换成对象 取出 时候使用
    

正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象

• 正则表达式在 JavaScript中的使用场景：
• 例如验证表单：用户名表单只能输入英文字母、数字或者下划线， 昵称输入框中可以输入中文(匹配)
• 比如用户名: /^[a-z0-9_-]{3,16}$/
• 过滤掉页面内容中的一些敏感词(替换)，或从字符串中获取我们想要的特定部分(提取)等 。

语法

• 定义正则表达式语法：
  
  • 其中 / / 是正则表达式字面量
    
• 判断是否有符合规则的字符串：
  • test() 方法 用来查看正则表达式与指定的字符串是否匹配
    语法：
  • 比如
    
  • 如果正则表达式与指定的字符串匹配 ，返回true，否则false
• 检索（查找）符合规则的字符串：
  • exec() 方法 在一个指定字符串中执行一个搜索匹配
  • 语法
    
  • 如果匹配成功，exec() 方法返回一个数组，否则返回null

元字符

• 元字符(特殊字符）
  是一些具有特殊含义的字符，可以极大提高了灵活性和强大的匹配功能。
  • 比如，规定用户只能输入英文26个英文字母，普通字符的话 abcdefghijklm……
  • 但是换成元字符写法： [a-z]
• 参考文档：
• MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions
• 正则测试工具:https://tool.oschina.net/regex

分类

• 边界符（表示位置，开头和结尾，必须用什么开头，用什么结尾）
• 量词 （表示重复次数）
• 字符类 （比如 \d 表示 0~9）

边界符

正则表达式中的边界符（位置符）用来提示字符所处的位置，主要有两个字符

如果 ^ 和 $ 在一起，表示必须是精确匹配

量词

量词用来 设定某个模式出现的次数

注意： 逗号左右两侧千万不要出现空格

字符类：

• [ ] 匹配字符集合
  • 后面的字符串只要包含 abc 中任意一个字符，都返回 true 。
    
• [ ] 里面加上 - 连字符
  • 使用连字符 - 表示一个范围
    
  • 比如：
    • [a-z] 表示 a 到 z 26个英文字母都可以
    • [a-zA-Z] 表示大小写都可以
    • [0-9] 表示 0~9 的数字都可以
• [ ] 里面加上 ^ 取反符号
  • [^a-z] 匹配除了小写字母以外的字符
• . 匹配除换行符之外的任何单个字符
• 预定义：指的是 某些常见模式的简写方式。
  
  

修饰符

• 语法
  
  • i 是单词 ignore 的缩写，正则匹配时字母不区分大小写
  • g 是单词 global 的缩写，匹配所有满足正则表达式的结果
    

RegExp(正则表达式)

RegExp 对象用于将文本与一个模式匹配。

jquery

https://jquery.cuishifeng.cn/index.html