Web APIs汇总学习

翔GG
249 阅读10分钟
  1. 明白Web APIs和JS基础的关联性：

  • JS包含三个部分：ES语法部分、DOM部分、BOM部分。

  • 而DOM和BOM部分则组成了Web APIs。

  • JS是Web APIs的基础。

 2.W3c制定的一些标准。

 3.一般用于实现页面的交互效果。

 4.Web API是浏览器提供的一套操作浏览器功能和页面元素的API。

5.DOM：处理标记性语言的接口，可以用来改变网页的内容、结构和样式。

6.一个页面就是一个文档：document。页面的每个标签就是一个元素：element。网页中所有内容都是节点。都被看作是对象。

7.获取页面元素的方法

  • ID名获取-getElementById。
  • 标签名获取-getElementsByTagName,返回的是元素对象的集合，伪数组，还可以得到某个元素里面的所有标签对象。
  • H5新增的方法获取-getElementsByClassName,IE9以上支持。querySelector,通用选择器（类、id等），返回第一个满足条件对象。querySeletctorAll，返回所有元素对象。
  • 特殊元素获取-body元素，document.body。html元素，document.doucumentElement来获得。

8.事件：触发-响应机制。事件源、事件类型、事件响应程序。

9.元素内容：

  • innerText：去除html标签，空格、换行去除。
  • innerHTML：包括html标签，空格、换行。
  • 两个属性都可读写。
  • innerHTML是w3c推荐使用的属性，常用。

10.一些复杂的元素属性操作：

  • 表单元素的属性：type、value、checked、selected、disabled等。
  • 元素样式的dom操作：原来css样式里面的斜杠改为驼峰命名法（.style访问）。

11.如果设置了ul元素的listStyleType为none,而li里面没有内容且没有设置背景颜色或者宽高的话，页面就会什么内容也没有。

12.可以使用className改变元素的类名，从而改变样式，注意，是覆盖，如果需要合并，那么可设置双类标签。

13.Bom部分学习：

  • 浏览器对象模型，主要是与浏览器进行交互。
  • 没有固定标准，最早是由网景公司制定标准的一部分。浏览器厂商自己定义了一些自己的标准。
  • 顶级对象是window。
  • Bom包含dom：也就是window下面包含document（文档）、location（地址）、navigation（导航）、screen（屏幕）、history（历史）。
  • 全局作用域的变量和方法都会成为window的属性。
  • 声明属性时最好不要使用name这个字符串，因为window自带name这个属性。
  • 窗口加载事件，window.onload事件，当文档内容全部加载完毕时，触发这个事件。如果有多个只会触发第一个，但是如果使用addEventListener则没有限制。
  • DOMContentLoaded，仅是DOM加载完成，不包括样式、图片等。（如果是图片太多时，则推荐使用这个事件）
  • window.onsize，窗口大小改变事件。
  • window.innerWidth当前屏幕的宽度。可利用这个宽度和onsize事件来实现页面的响应式布局。
  • 两个定时器函数：
  1. setTimeout:到期后，执行目标函数，执行函数可以直接写在函数里面，也可以传入函数名。多个时，我们经常给他们加标识符，也就是给他们赋值。而这个输入的函数也称作回调函数，因为要到了时间才去调用。停止是clearTimeout（标识符）。
  2. setInterval：每隔一段时间去执行目标函数，不停止就会一直执行。其他与setTimeout相似。调用这个函数可能会引起页面空白，可以在调用定时器之前调用一次回调函数。
  • 学习了两个关于时间的操作：
  1. 倒计时：利用设定的时间减去此时此刻，那么就会显示倒计时，但是注意要单独提取出时、分、秒。
  2. 根据时间戳获得UTC格式时间，有两种方法:第一种是直接调用getFullYear之类封装好的函数，再拼接字符串；第二是使用正则表达式去匹配固定格式，然后再使用getFullYear之类封装好的函数，这样就可以自适应用户输入的格式输出时间。
  • 绑定原生button在标签内 onclick需要函数名（），并且此时函数的调用者是window。
  • 通过button.onclick绑定的函数，函数的调用者是button。
  • 可以把变量定义在函数里面，作为局部变量，函数调用完且没有其他引用指向这个变量时，它就会自动销毁。
  • this指向问题：
  1. 全局函数或一般函数的this指向window，定时器的this也指向window。
  2. 对象中定义的函数this指向这个对象，除非是箭头函数，箭头函数指向window，因为箭头函数没有this，其this是指向最近的作用域。
  3. 构造函数中的this指向构造函数的实例。
  • JS执行机制：
  1. 单线程：同一时间只能做一个事。
  2. H5提出了Web Worker标准。
  3. JS出现了异步和同步。
  4. 同步任务都放在主线程上面执行，形成一个执行栈，
  5. 回调函数是异步任务，还有普通事件、资源加载、定时器。
  6. 异步任务被放在消息队列中或任务队列中。
  7. 先执行执行栈中的同步任务。
  8. 遇到异步函数放到任务队列中。
  9. 同步任务执行完毕，系统会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈，开始执行。
  10. 当有多个线程时，会启动异步进程程序来管理异步事件，来决定要不要将事件加入任务队列。加入了之后，就会等待主线程来访问。
  11. 主线程访问任务队列，再将任务队列中事件添加到执行栈，再访问，再执行，称为事件循环，event loop。
  • location对象：
  1. URL:统一资源定位符。
  2. href：返回整个URL。
  3. host：返回域名。
  4. search：返回参数。
  5. 提交表单时，可以获得url后面的参数。
  6. 去掉url的问号,使用substr。
  7. 获得值，使用splite去划分等号后面的值。
  8. 获得div给div设置innerHtml。
  9. 默认是get请求-表单提交。
  10. assign方法：跳转页面，有返回按钮。replace:替换当前页面，不能后退页面。reload相关与是刷新页面（如果输入参数true是ctrl+F5 强制刷新，从服务器重新请求数据）。
  • navigator对象：
  1. 包含浏览器信息。
  2. 尤其是userAgent信息，用正则来判断是移动端还是PC端。
  • history对象，与浏览器的历史记录进行交互，包含访问过的url。
  1. back、forward方法进行页面的前进和后退。
  2. go方法，前进几步、后退几步。
  3. OA系统中比较常用。
  • 元素偏移量offset系列：
  1. 动态获得该元素的位置、大小等信息。
  2. 只有offsetTop和offsetLeft。去找和有定位的父元素的偏移量。
  3. 刚开始body元素一般有一个初始的margin值。
  4. offsetwidth和offsetheight包含本身长度+border+padding,不包含margin。
  5. offsetParent是返回带有定位的父元素，否则就一直往上找，直至body元素。和parentNode的区别就是在这里，parentNode直接返回父元素。
  6. 与style的区别：

  • offset能得到任何样式表中的样式值。而style只能获得行内样式的值。

  • offset不带单位，style带单位，字符串类型。

  • offsetwidth包含border、padding，style.width不包含border、padding。

  • offset只读属性，而style可写。

  • 所以想要获取元素位置使用offset适合，改变大小用style适合。

  • 元素可视区client系列：

  • client系列的长度不包含边框，包含padding。

  • 淘宝flexible.js源码分析

  • 立即执行函数：

  • （function（）{}）（）

  • （function(){}()）

  • 多个立即执行函数必须加分号隔开。

  • 作用是创建一个独立的作用域：里面都是局部变量，不会互相影响。

  • window.documentElement获得了页面的html根元素。

  • dpr：物理像素比。pc端一般是1，其他端可能是2。

  • Domcontentloaded事件是指dom主要元素加载完毕时触发的。

  • 火狐浏览器有往返缓存功能，退回 以前页面时不会触发页面的load，所以这个时候可以用pageshow事件。persisted为true，表示这个页面是从缓存中加载的。

  • 有些移动端浏览器不支持0.5像素的写法。

  • 元素scroll系列：

  • width和height返回自身实际的宽度，不含边框。不带单位。

  • top:被卷去的头部高度。

  • left：被卷去的左部长度。

  • 三个系列对比：

  • 常用来获取元素长度：client系列。

  • 获取元素位置：offset系列。

  • 获取滚动位置:scroll系列。

  • 获取页面滚动位置：window.pageXoffset(兼容性问题：doucument.documentElement.scrollLeft、document.body.scrollLeft).

  • mouseover和mouseenter（mouseleave同理）对比：前者经过子盒子可以冒泡到父盒子，后者不可以冒泡。

  • animation：动画效果。

  • 利用定时器实现。

  •  精度处理问题：Math.ceil往上取整。Math.floor往下取整。

  • 可以加上回调函数，做出其他行为。

  • 可以封装为一个js文件以供调用。

  • 本地存储：数据存储在用户浏览器中。只能存储字符串。

  1. window.sessionStorage（5M左右）:
  • 生命周期是关闭浏览器窗口。
  • 同一个页面（窗口）下面，数据可以共享。
  • 键值对形式存储。
  • setItem、getItem、removeItem、clear。
  1. window.localStorage（20M左右）:

  • 关闭页面数据才会存在。

  • 同一浏览器不同页面可以共享。

  • 键值对形式存储。

  • 其他操作方法和sessionStorage相同。

  • 模拟鼠标长按用定时器来模拟。鼠标形态用cursor决定。

  • 应用：

  1. 模拟弹窗拖拽需要三个事件，鼠标点击，鼠标移动，鼠标松开。然后把新的坐标值赋给弹窗的left和top，就能实现一起移动。也就是鼠标在页面的位置减去鼠标在窗内的位置就是弹窗需要更新的位置。而鼠标在窗里的位置是第一次鼠标按下的时候确定的。鼠标移动事件、鼠标松开事件需要写在按下事件里面。如果是给style的left、top赋值，需要带上px单位，不然无效。

  2. 绑定事件两种方式：传统方式on、方式绑定addEventListener、标签行内绑定事件，移除事件on=null,removeEventListener。

  3. 放大镜应用：

  • opacity:可控制透明度。

  • 分为三个模块：

  • 鼠标经过div盒子，显示放大镜和放大结果图片，离开时隐藏。

  • 放大镜随着鼠标移动。

  • 因为放大镜是相对于图片盒子绝对定位，所以要把鼠标在盒子的坐标给放大镜。

  • 记得offset系列的坐标是相对于有定位的父元素的，所以不一定是最外层的元素。

  • 要让鼠标在放大镜的中央，需要将放大镜向上、向左移动高度和宽度的一半。

  • 放大镜不能超出父亲元素的边界，使用判断条件，判断左边和右边边界，上边和下边边界。

  • 放大结果图片随着放大镜移动。

  • 因为放大结果图片和放大镜的大小不一样，所以移动距离得成正比移动，要根据公式来求得。

  • 并且放大结果图片跟放大镜的移动方向是相反的。

  • 外部引入js，要在js中加上window.onload事件，等待Dom加载完毕才行。

avatar
文章
阅读
粉丝