![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
web-api
web-api
玉安_ZhangDe
web前端后进之学。
咬定青山不放松,自缘身在破岩中。
千磨万击还坚劲,任尔东西南北风。
展开
-
Web-api学习 15:click 延时解决方案
移动端 click 事件会有 300ms 的延时,原因是移动端屏幕双击会缩放(double tap to zoom) 页面。解决方案:1. 禁用缩放。浏览器禁用默认的双击缩放行为并且去掉300ms 的点击延迟。 <meta name="viewport" content="user-scalable=no">2.利用touch事件自己封装这个事件解决300ms 延迟。原理就是: 当我们手指触摸屏幕,记录当前触摸时间 当我们手指离开屏幕, 用离开的时间减.原创 2022-05-15 23:13:03 · 107 阅读 · 0 评论 -
Web-api学习 14:classList属性
classList属性是HTML5新增的一个属性,返回元素的类名。但是ie10以上版本支持。该属性用于在元素中添加,移除及切换 CSS 类。有以下方法添加类:element.classList.add(’类名’); focus.classList.add('current');移除类:element.classList.remove(’类名’);focus.classList.remove('current');切换类:element.classList.toggle原创 2022-05-15 23:04:14 · 164 阅读 · 0 评论 -
Web-api学习 13:触屏事件
触屏事件概述移动端浏览器兼容性较好,我们不需要考虑以前 JS 的兼容性问题,可以放心的使用原生 JS 书写效果,但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件),Android和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手指,也可能是一根触摸笔。触屏事件可响应用户手指(或触控笔)对屏幕或者触控板操作。常见的触屏事件如下:2. 触摸事件对象(TouchEvent)TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。.原创 2022-05-15 22:56:39 · 199 阅读 · 0 评论 -
Web-api学习 12:动画函数封装
动画函数封装缓动动画就是让元素运动速度有所变化,最常见的是让速度慢慢停下来思路: 让盒子每次移动的距离慢慢变小,速度就会慢慢落下来。 核心算法: (目标值 - 现在的位置) /10 做为每次移动的距离步长 停止的条件是: 让当前盒子位置等于目标位置就停止定时器 注意步长值需要取整 动画函数多个目标值之间移动可以让动画函数从 800 移动到 500。当我们点击按钮时候,判断步长是正值还是负值1.如果是正值,则步长往大了取整2....原创 2022-05-15 22:14:05 · 66 阅读 · 0 评论 -
Web-api学习 11:元素偏移量 offset
offset 概述offset 翻译过来就是偏移量, 我们使用 offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位 案例:获取鼠标在盒子内的坐标<head> <style> .box { margin: 100px auto; width: 300..原创 2022-05-12 19:46:46 · 301 阅读 · 0 评论 -
Web-api学习 10:onload 和 DOMContentLoaded 的区别
onloadwindow.onload 是窗口 (页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。DOMContentLoadedDOMContentLoaded 事件触发时,仅当DOM加载完成,不包括样式表,图片,flash等等。IE9以上才支持!!!需要兼容请使用onload如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现,必然影响用户的体验,此时用 DOMCon.原创 2022-05-12 19:21:21 · 118 阅读 · 0 评论 -
Web-api学习 09:e.target 和 this 的区别
this 是事件绑定的元素(绑定这个事件处理函数的元素) 。 e.target 是事件触发的元素。 只有一个元素的时候this 和 e.target都指向了函数调用(绑定)者 div <div>123</div> <script> var div = document.querySelector('div'); div.addEventListener('click', function(e) {..原创 2022-05-12 19:09:52 · 113 阅读 · 0 评论 -
Web-api学习 08:DOM的核心总结
1、创建2、增3、删4、改5、查6、属性操作7、事件操作7.1 注册事件(2种方式)7.2 事件监听7.2.1 addEventListener()事件监听(IE9以后支持)7.2.2attacheEvent()事件监听(IE678支持)7.2.3事件监听兼容性解决方案7.3 删除事件(解绑事件)删除事件兼容性解决方案7.4 DOM事件流原创 2022-05-12 18:31:52 · 160 阅读 · 0 评论 -
Web-api学习 07:DOM事件流
html中的标签都是相互嵌套的,我们可以将元素想象成一个盒子装一个盒子,document是最外面的大盒子。当你单击一个div时,同时你也单击了div的父元素,甚至整个页面。那么是先执行父元素的单击事件,还是先执行div的单击事件 ???比如:我们给页面中的一个div注册了单击事件,当你单击了div时,也就单击了body,单击了html,单击了document。DOM 事件流会经历3个阶段: 捕获阶段 当前目标阶段 冒泡阶段 我们向水里面扔一块石头..原创 2022-05-12 18:29:16 · 87 阅读 · 0 评论 -
Web-api学习 06:节点操作
1. 父级节点 2. 子节点 3. 兄弟节点 4. 创建节点 5. 添加节点 6.删除节点 7.复制(克隆)节点原创 2022-05-11 17:39:56 · 113 阅读 · 0 评论 -
Web-api学习 05:自定义属性操作
1.获取属性值 <div id="demo" index="1" class="nav"></div> <script> var div = document.querySelector('div'); // 1. 获取元素的属性值 // (1) element.属性 console.log(div.id); // demo //(2) element.getAttri原创 2022-05-11 17:27:41 · 97 阅读 · 0 评论 -
Web-api学习 04:样式属性操作
我们可以通过 JS 修改元素的大小、颜色、位置等样式。常用方式通过操作style属性元素对象的style属性也是一个对象!元素对象.style.样式属性 = 值;案例代码 <body> <div></div> <script> // 1. 获取元素 var div = document.querySelector('div'); // 2. 注册事件 处理..原创 2022-05-11 16:44:38 · 79 阅读 · 0 评论 -
Web-api学习 03:innerText 和 innerHTML的区别
innerText和innerHTML的区别 获取内容时的区别: innerText会去除空格和换行,而innerHTML会保留空格和换行 设置内容时的区别: innerText不会识别html,而innerHTML会识别案例代码<body> <div></div> <p> 我是文字 <span>123</span> </p> ...原创 2022-05-11 16:14:58 · 377 阅读 · 0 评论 -
Web-api学习 02:常见的鼠标事件
案例代码onclick点击事件<body> <div>123</div> <script> // 执行事件步骤 // 点击div 控制台输出 我被选中了 // 1. 获取事件源 var div = document.querySelector('div'); // 2.绑定事件 注册事件 // div.onclick ..原创 2022-05-11 16:07:11 · 347 阅读 · 0 评论 -
Web-api学习 01:H5新增获取元素方式
document.querySelector('选择器'); // 选中的是单个选择器document.querySelectorAll('选择器'); // 选中的是一类选择器,类似于数组一样存储起来// 虽然 h5 新增的不止这两个,但是这两个已经完完全全够用了<body> <div class="box">盒子1</div> <div class="box">盒子2</div> <div id.原创 2022-05-11 16:01:41 · 189 阅读 · 0 评论