Web APIs
关注
分享
扫一扫
文章平均质量分 70
Web
FG.
在等你
展开
-
BOM移动端
1.触屏事件概述移动端浏览器兼容性较好，不需要考虑以前的JS的兼容性问题。touch 对象代表一个触摸点，触摸点可能就是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。常见的触屏事件：触屏touch事件说明touchstart手指触摸到一个DOM元素时触发touchmove手指在一个DOM元素上滑动时触发touchend手指从一个DOM元素上移开时触发...原创 2022-02-22 20:57:01 · 195 阅读 · 0 评论 -
BOM本地存储
1. 本地存储特性数据存储在用户浏览器中设置、读取方便、甚至页面刷新不丢失数据容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify()编码后存储2. window.sessionStorage生命周期为关闭浏览器窗口在同一个窗口（页面）下数据可以共享以键值对的形式存储使用存储数据：sessionStorage.setItem(key,value)获取数据：sessionStorage.getIt原创 2022-02-22 20:51:30 · 178 阅读 · 0 评论 -
BOM动画函数封装
1. 动画实现原理(加定位)核心原理：通过定时器 setInterval() 不断移动盒子位置。2. 动画函数简单封装注意函数需要传递2个参数，动画对象和移动到的距离。3.动画函数给不同元素记录不同定时器如果多个元素都使用这个动画函数，每次都需要var声明定时器。我们可以给不同的元素使用不同的定时器（自己专门用对自己的定时器）。核心原理：利用JS是一门动态语言，可以很方便的给当前对象添加属性。<!DOCTYPE html><html lang="en"><h原创 2022-02-22 20:50:43 · 389 阅读 · 1 评论 -
BOM元素三大系列
1. offset 概述可以使用offset系列相关属性得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位offset系列常用属性：offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetLeft返回元素相对带有定原创 2022-02-11 11:48:01 · 338 阅读 · 1 评论 -
BOM location对象、navigator对象、history对象
1. location对象URL统一资源定位符（Uniform Resource Locator,URL）是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。URL的一般语法格式为：protocol://host[:port]/path/[?query]#fragmenthttp://www.itcast.cn/index.html?name=andy&age=18#link组成说明protocol原创 2022-01-14 01:15:55 · 683 阅读 · 1 评论 -
JS执行机制
1. JS是单线程JavaScript语言的一大特点就是单线程，也就是说，同一时间只能做一件事。原创 2022-01-14 00:01:12 · 454 阅读 · 0 评论 -
BOM定时器
1. setTimeout() 定时器window.setTimeout(调用函数,[延迟的毫秒数]);setTimeout() 方法用于设置一个定时器，该定时器在定时器到期后执行调用函数一次。setTimeout() 这个调用函数称为回调函数 callback注意：window可以省略这个调用函数可以直接写函数，或者写函数名或者采取字符串 ‘函数名()’ 三种形式。第三种不推荐延迟的毫秒省略默认是0，如果写必须是毫秒因为定时器可能有很多，所以经常给定时器赋值一个标识符 &l原创 2022-01-13 17:24:44 · 385 阅读 · 1 评论 -
BOM window对象的常见事件
1. 窗口加载事件window.onload = function() {}或者window.addEventListener("load", funtion() {});window.onload 是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等)，就调用的处理函数。注意：１. 有了window.load就可以把JS代码写到页面元素的上方，因为onload是 等页面内容全部加载完毕，再去执行处理函数。2. window.onload传统注册事件方原创 2022-01-13 15:27:11 · 109 阅读 · 0 评论 -
BOM概述
1. 什么是BOMBOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。2. BOM构成BOM 比 DOM 大，它包含 DOMwindow 对象是浏览器的顶级对象，它具有双重角色。它是JS访问浏览器窗口的一个接口。它是一个全局对象。定义在全局作用域中的变量、函数都会变成window 对象的属性和方法。（在调用的时候可以省略window）原创 2022-01-13 14:56:52 · 437 阅读 · 1 评论 -
DOM事件对象
1. 事件对象event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。eventTarget.onclick = function() {event}eventTarget.addEventListener('click', function(event) {})// 这个event就是事件对象，可以写成 e 或 evt这个event 是个形参，系统帮我们设定为事件对象，不需要传递实参过去。当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器(事件原创 2022-01-13 13:11:52 · 423 阅读 · 0 评论 -
DOM事件流
事件流描述的是从页面中接收的顺序。事件发生时会在元素节点之间按照特定的是顺序传播，这个传播过程即DOM事件流。比如给一个 div 注册了点击事件：DOM事件分为3个阶段：捕获阶段当前目标阶段冒泡阶段事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程。事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程。注意：JS代码中只能执行捕获或者冒泡其中的一个阶段。onclick 和 att原创 2022-01-12 23:54:03 · 365 阅读 · 0 评论 -
DOM注册事件
1. 注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用on开头的事件onclick<button onclick= "alert(hi~)"></button>btn.οnclick=function() { }特点：注册事件的唯一性同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数方法监听注册方式w3c标准推荐方式addEventListener()原创 2022-01-12 23:13:08 · 166 阅读 · 0 评论 -
DOM节点操作案例
1. 新浪下拉菜单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2022-01-12 21:38:21 · 368 阅读 · 2 评论 -
DOM节点操作
节点概述一般地，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这三个基本属性。元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeValue 为 3（文本节点包含文字、空格、换行等）主要操作是元素节点2. 节点层级利用DOM树可以把节点划分为不同层级关系，常见的是父子兄层级关系。1. 父级节点nodeparentNodeparentNode属性可返回某结点的父节点，注意是最近的一个父节点如果原创 2022-01-12 21:38:06 · 194 阅读 · 0 评论 -
DOM操作元素案例
仿淘宝二维码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2022-01-12 09:57:40 · 321 阅读 · 0 评论 -
DOM操作元素
JavaScript的DOM操作可以改变页面内容、结构和样式，我们可以利用DOM操作元素来改变元素里面的内容、属性等。注意以下都是属性1. 改变元素内容element.innerText从起始位置到终止位置的内容，但它去除html标签，同时空格和换行也会去掉element.innerHTML起始位置到终止位置的全部内容，包括html标签，同时保留空格和换行<!DOCTYPE html><html lang="en"><head> <me原创 2022-01-05 13:25:36 · 788 阅读 · 6 评论 -
DOM事件基础(鼠标)
1. 事件三要素<body> <button id="btn">FG</button> <script> // 点击一个按钮，弹出对话框 // 事件是由三部分组成：事件源、事件类型、事件处理程序 // 1. 事件源 事件被触发的对象 var btn = document.getElementById('btn'); // 2. 事件类型 如何触发 什么事件 比如鼠原创 2021-12-12 20:32:23 · 686 阅读 · 0 评论 -
DOM获取元素
如何获取元素？根据ID获取根据标签名获取通过HTML5新增的方法获取特殊元素获取1. 根据ID获取使用getElementById()方法获取带有ID的元素对象。var element = document.getElementById(id);参数element是一个Element对象。如果当前文档中拥有特定ID的元素不存在则返回null.id是大小写敏感的字符串，代表了所要查找的元素的唯一ID返回值返回一个匹配到ID的DOMElement对象。若在当前Document下原创 2021-12-12 08:50:14 · 249 阅读 · 1 评论 -
DOM简介
1. 什么是DOM文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C已经定义了一系列的DOM接口，通过这些DOM接口可以改变网页的内容、结构和样式。2. DOM树文档：一个页面就是一个文档，DOM中使用document表示元素：页面中的所有标签都是元素，DOM中使用element表示节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM中使用node表示DOM把以上内容都看做原创 2021-12-11 20:21:33 · 780 阅读 · 0 评论 -
API 和 Web API
1. APIAPI（Application Programming Interface，应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而有无需访问源码，或理解内部工作机制的细节。简单理解：API是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。2. Web APIWeb API是浏览器提供的一套操作浏览器功能和页面元素的API（BOM和DOM）。主要用于针对于浏览器讲解常用的API，针对浏览器做交互效果。MDN详细APIW原创 2021-12-11 19:30:13 · 408 阅读 · 0 评论