BOM&&正则

window对象

window对象 (所有浏览器都支持 window 对象。它代表浏览器的窗口。所有全局 JavaScript 对象，函数和变量自动成为 window 对象的成员。

全局变量是 window 对象的属性。全局函数是 window 对象的方法。

获取浏览器的宽高;

可视区的宽高(与实际宽高不同);

q/Width //对于IE9以上异界chrome,firefox,opera,safair,都兼容;

IE9以下用：

document.documentElement.clientHeight/Width //可以很好的兼容;

document.body.clientHeight/Width //获取body在获取宽高;

一个实用的 JavaScript 解决方案（包括所有浏览器）获取浏览器的宽高;

var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerheight || document.documentElement.clientHeight || document.body.clientHeight;

实际宽高（包含内外边距以及文本溢出）

scrollWidth/Height //获取滚动区域的的宽度和高度，假如文本溢出了，加上溢出的宽高;

兼容：IE(Ie7以下)与Opear是可以小于页面可视宽高的，FF与NS最低是页面可视宽高;

兼容写法：

var h=document.documentElement.scrollHeight||document.body.scrollHeight;

 var w=document.documentElement.scrollWidth||document.body.scrollWidth;

1，获取元素相关尺寸(只可读，不可写)

clientWidth/Height  //也可以获取元素的尺寸，（不包含边框）边框里面的长和宽;   大多数用来获取整个页面可视区的宽高;

scrollWidth/Height   //同上，不包含边框（内容溢出加上溢出内容），大多数用来检测整个页面的长度;

offsetWidth/Height  //包含所有元素的高度和宽度，（包含边框的宽度）;

clientLeft/Top   //获取边框多少像素;不是多长;

2,获取元素的位置信息（只可读，不可写）

offsetLeft/Top //获取元素位置的值（如果没有定位，就是到浏览器的顶部和左侧的距离），（如果有定位就是到定位的父元素的位置）;

getBoundingClientRect().top/left/bottom/right   //获取可视区元素的位置;  

3,获取滚动区域的宽高

scrollWidth/Height  //获取整个页面的宽度和高度

window.pageYOffset  window.scrollY   document.body.scrollTop    //文档在窗口垂直方向滚动的高度,(页面向上卷曲的高度);

4 获取样式表里面的样式

window.getComputedStyle(获取的元素);  //获取元素样式表里面的样式;(返回样式表里面的所有样式，在js中打点调用);

offset

offsetWidth/Height  //获取元素的宽和高，包含边框;  也可以获取整个页面包含边框和滚动条的宽高;

offsetLeft/top  //获取元素居上/左的距离,如果没有定位元素，获取body元素的宽高，有定位元素，是定位元素的宽高;

client

clientWidth/Height  //页面可视区宽高，详细介绍上面有;

clientLeft/Top  获取边框的宽度,不是长度;

scroll

scrollWidth/Height  //获取整个页面的宽度和高度（如果文本溢出，加上文本溢出的宽高）

scrollTop/left  //获取页面向上卷曲的宽度;

window.scrollY  window.pageYOffset  //获取整个页面向上卷曲的宽度;

window.scrollBy(x,y)  //在当前滚动条位置为基础上进行操作;
  
window.scrollTo(x,y)  //整个页面跳转到指定位置;

scrollTo(options)  //options有三个参数，（left,top,behavior ）,
top 等同于  y-coord
left 等同于  x-coord
behavior  类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant
   window.scrollTo({
                    top: 0,
                    behavior: "smooth"
                });

js 实现平滑滚动

document.scrollingElement.scrollTop/Left  获取当前页面向上卷曲的距离，最小值为0 ，也就是页面没有卷曲，也可以设置具体值，卷曲到你设置的值， 

也就滚动到具体的位置; 设置负值的情况下，也为0 ;

使用 document.scrollingElement.scrollTop/Left 进行页面动画滚动;

原理 先获取当前卷曲的高度 ，document.scrollingElement.scrollTop，

在计算处当前页面需要滚动的高度，dom.offsetTop（元素的偏移量） -  document.scrollingElement.scrollTop（已经滚动的距离）

在需要滚动的高度基础上 平均分为n 份 每次执行滚动到   （每一个份的高度+document.scrollingElement.scrollTop ）

在执行 n 次后  return 出去，

具体代码

      var offsetTop = DOM.offsetTop - 100;   //元素的偏移量
      var scrollTop = document.scrollingElement.scrollTop;  //当前页面向上卷曲的距离;
      var distance = offsetTop - scrollTop;   //需要滚动的距离;
      var num = 20;  //设置平均分为20份
      var step = distance / num;  //每份的高度
      function move() {     //多次调用
        scrollTop = scrollTop + step;   //在当前基础上每次加一份
        document.scrollingElement.scrollTop = scrollTop;   //设置卷曲的高度
        num--;
        if (num == 0) {   //执行完毕之后返回
          return;
        }
        requestAnimationFrame(move)  //使用帧动画持续执行
      }
      requestAnimationFrame(move） //使用帧动画调用

弹窗

confirm()  //确认对话框；可以省略window,返回你点击的布尔值;

prompt('提示信息','输入框默认值')  //文本输入框，返回一个字符串,点击取消返回null,不输入为空字符串，配合.trim()剪切空格判断用户是否输入;

open()  //打开一个新页面，第一个参数为地址，第二个地址是否从新页面打开，参数3是新窗口打开的配置;

console()  //关闭页面

moveTo()  //移动窗口,(仅Ie支持);

resizeTo()  //定义页面的大小;(仅Ie支持);

layui弹窗

关于layui的一点操作,为什么要用layui,因为window消息框会阻塞代码的执行

外部链接layui
<link rel="stylesheet" href="layui/css/layui.css">
    
<script src="layui/layui.all.js"></script>

layer.open({             //通过layer.open()  同样可以实现确认弹窗效果，并且不会阻塞代码的执行;
    title: '头部',
            : '确认框内容',
})

layer.alert('提示',{icon:1})  //带图片的alert弹窗，可以自定义图片;

layer.confirm('提示'，{icon:1})  //于window.confirm()效果相同，但是不会阻塞代码执行，并且不会返回布尔值;返回的是点击数;

layer.prompt({formtypr: 0,title: 头部,value:'默认输入',},function(vlaue,index){代码执行（value代表输入的字符串，index代表第几次输入）})

---

History 对象

(history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。)

history.length; //返回浏览器历史列表中的URL数量;

back() //加载 history 列表中的前一个 URL。返回前一个浏览的页面

forward() //加载 history 列表中的下一个 URL，如果倒退之后，再想回到倒退之前浏览的页面，则可以使用forward()方法

go() //根据当前所处的页面，加载 history 列表中的某个具体的页面。go(1)=forward()  go(-1)==back() go(0)代表当前页面;

牵扯到跨域，》》》后面讲跨域在解;

replaceState("添加数据,可以是基本类型也可以是引用类型","测试","two.html")  //只修改url地址，不跳转;

pushstate("添加数据,可以是基本类型也可以是引用类型","测试","two.html")   //进行跳转操作，但是不添加url历史记录，不能前进和后退;

---

Location

浏览器页面之间的跳转与定位

Location对象  (用于获取或设置窗体的URL，并且可以用于解析URL);

location.reload()  //刷新页面,相当于按下F5

location.assign('地址')  //加载新的页面;等价于给页面重新附地址;

location.href=location.href;  //重新给href赋值，从而实现页面刷新;

location.href  //获取url完整的信息;也可以修改href属性;

location.protocol  //获取url中的协议名称; file:文件路径;

location.host  // 获取url主机的名称;(注意:带端口号)

location.hostname  //获取url主机名称(ip地址/域名 不带端口);

location.pathname  //获取url的路径（文件所在的位置）

location.search   //获取url中的查询字段

location.hash   //获取url中的字段;

location.port    //获取url中的端口;

---

Navigator对象

主要保存浏览器的相关信息;

navigator.userAgent; //返回由客户机发送到服务器的user-agent头部的值 所在浏览器的信息（用户代理） ,可以判断浏览器;

navigator.appName; //返回浏览器的名称;Netscape 为了兼容，统称

navigator.appCodeName; //返回浏览器字符串的名字;浏览器代号;

navigator.appVersion; //返回浏览器的平台或者版本;

navigator.platform;  //返回运行浏览器的操作系统平台;(平台的意思);

navigator.systemLanguage //操作系统语言;(测试没有效果);

navigator.language   //返回浏览器语言 zh-cn:简体中文;

navigetor.geolocation   //地理定位; 可用于判断浏览器是否支持此属性;

navigetor.geolocation.getCurrentPosition(callback1,callback2)      //通过地理定位获取用户的地理位置,

callback1(位置对象)   callback2(错误对象);

具体访问 菜鸟教程;

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

navigator.cookieEnabled   //检测浏览器是否使用了cookie缓存;

---

screen对象;

screen.Width/Height  //获取客户段屏幕的宽高;

screen.availWidth/availHeight  //获取减去任务栏的屏幕宽高;

---

正则表达式

正则表达式(regular expression)描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。

创建正则的两种方式

1，通过字面量创建正则 let pattent=/正则的模式或其他正则/修饰符;

2,通过内置对象的方式创建正则; let pattent=new RegEXP(/表达式的规则/);

(.)代表除了换行符之外所有单个字符;

修饰符

i  ignore //表示不区分大小写；

g   global//表示进行全居搜索;

m   multline//进行隔行收缩/n  配合^$使用;

u  "Unicode模式"，//用来正确处理大于 \uFFFF 的Unicode字符;

y   粘连修饰符  //也是全局匹配，后一次匹配都从上一次匹配成功的下一个位置开始。 

使用字符串方法配合正则

match和matchAll都是字符串的api 注意在使用的时候不要提前调用正则的api:test()

match()  //对字符串进行筛选，有则返回一个包含的数组，没有返回未定义;

matchAll()  //同上;

search()   //判断是否包含这个字节，有返回下标，没有返回-1;(相当于indexOf());

replace()  //通过正则进行替换字符串;

正则API

test()  //判断字符串是否包含此正则;包含为真，不则false;

exec()   //对字符串进行筛选，有则返回一个包含的数组，没有返回未定义；(与字符串中的match相似)

flags  //返回正则的修饰符;

global  //判断正则是否全局搜索;

ignoreCase  //判断正则是否区分大小写;

multiline  //判断正则是否启用m修饰符;

unicode  //返回当前正则的编码格式

正则的量词

n*  //匹配至少包含0次n或者多次n的字符串;n

n+  //匹配至少一个n,或者多个n;少于一次为null;

n?  //匹配至少零个n，或者一个n的字符串;

^n  //匹配任何以n开头的字符串;

n$  //匹配任何以n结束的字符串;

n{x}  //匹配x个n的字符串;

n{x，y}  //匹配至少x个最多y个n的字符串;

n{x,}   //匹配至少x个n的字符串;

?=n   //匹配任何紧接字符串n之后的字符串;

?!n   //匹配任何没有紧接字符串n的字符串;

元字符

\w  //查找字母数字下划线的字符;

\W   //查找不是字母数组下划线的字符;(取反);

\d   //查找所有数字的字符;

\D   //查找所有不是数字的字符;

\s   //查找所有空格字符;

\S   //查找所有不是空格的字符;

\n匹配一个换行符(软换行 自动换行  常用)

\r匹配一个回车符(硬换行 相当于按下了enter键  常用)

中括号

[0-9a-zA-Z]  //查找中括号之间的所有字符;

[^]    //取反操作;

\1  //代表第一个（）里面的值;

\2  //代表第二个（）  \3以此类推\9;

前瞻与后瞻

// 前瞻：
exp1(?=exp2) 查找exp2前面的exp1

// 后顾：
(?<=exp2)exp1 查找exp2后面的exp1

// 负前瞻：
exp1(?!exp2) 查找后面不是exp2的exp1

// 负后顾：
(?<!exp2)exp1 查找前面不是exp2的exp1

贪婪与懒惰

默认正则为贪婪，在尾部加上？为懒惰，两个？？为不在查询;