Web前端
关注
分享
扫一扫
html5、css3、JavaScript等分享！
溜_x_i_a_o_迪
本人从事过C++、MFC、Qt、asp.net、C#开发，目前从事Web前端开发，本人很菜，希望大牛们手下留情啊。。。
展开
-
Event事件学习实用路线（11）——Event事件之鼠标滚轮——案例：改变div宽高度
Event事件之鼠标滚轮——案例：改变div宽高度鼠标滚轮mousewheel和DOMMouseScroll案例：改变div宽高度鼠标滚轮mousewheel和DOMMouseScrollmousewheel：兼容谷歌和iee.wheelDelta：滚轮向上 - > 120滚轮向下 - > -120 document.addEventListener('m...原创 2020-04-26 23:46:49 · 414 阅读 · 0 评论 -
Event事件学习实用路线（10）——Event事件之拖拽原理思路详解
拖拽原理思路详解涉及事件鼠标按下： mousedown鼠标移动 ：mousemove => 不断的改变元素的 top / left鼠标抬起 ：mouseu原理图解如图假如对div进行拖拽：连接拖拽点它的横纵坐标变化：就是增加移动的距离拖拽实现思路保存鼠标点击的初始位置startPos保存元素的初始位置boxPos保...原创 2020-04-26 14:53:23 · 420 阅读 · 0 评论 -
Event事件学习实用路线（9）——Event事件之键盘事件——案例：键盘操作元素位置——案例：键盘事件组合键控制
Event事件之键盘事件键盘事件keydown、keyup键盘事件-事件对象event.keyCode、event.keyevent.ctrlKey、event.altKey、event.shiftKey键盘事件keydown、keyup这两事件没太多好说的，非常简单，大家看代码即可掌握了。 document.addEventListener("keydown",...原创 2020-04-25 22:16:29 · 1032 阅读 · 0 评论 -
Event事件学习实用路线（8）——Event事件之事件鼠标右键——案例：实现自定义一个右键菜单
Event事件之事件鼠标右键——案例：实现自定义一个右键菜单鼠标右键contextmenu 鼠标右键事件案例：实现自定义一个右键菜单另外一种阻止默认行为的方式e.preventDefault与return false阻止默认行为的区别鼠标右键contextmenu 鼠标右键事件<!DOCTYPE html><html lang="en"><hea...原创 2020-04-25 20:02:21 · 1001 阅读 · 0 评论 -
Event事件学习实用路线（7）——Event事件之事件鼠标信息——案例：实现鼠标跟随
鼠标位置获取鼠标事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...原创 2020-04-25 19:17:12 · 307 阅读 · 0 评论 -
Event事件学习实用路线（6）——Event事件之阻止事件冒泡
Event事件之阻止事件冒泡阻止事件冒泡mouseover 和 mouseout事件mouseenter和 mouseleave事件取消冒泡stopPropagationcancelBubble和stopPropagation的区别：阻止事件冒泡mouseover 和 mouseout事件<!DOCTYPE html><html lang="en">&l...原创 2020-04-25 16:46:56 · 461 阅读 · 0 评论 -
Event事件学习实用路线（5）——Event事件之事件委托——案例：实现简易留言板
Event事件之事件委托——案例：实现简易留言板这里写目录标题事件委托案例：实现简易留言板事件委托（事件代理）优缺点：事件委托 其实我们差不多已经知道什么是事件委托了，现在我们通过一个小的案例，可以温习一下事件委托。案例：实现简易留言板我们简单的实现一个简易的留言板，可以提交留言也可以删除。我们看一下样式，关于css样式的学习，请参考xiao迪写的css样式学习使用路线...原创 2020-04-25 13:17:04 · 313 阅读 · 0 评论 -
Event事件学习实用路线（4）——Event事件之事件源
Event事件之事件源（后续待补充）原创 2020-04-25 11:32:30 · 480 阅读 · 0 评论 -
Event事件学习实用路线（3）——Event事件之事件对象
Event事件之事件对象事件对象默认事件取消事件监听Event事件对象事件对象默认事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i...原创 2020-04-24 23:13:37 · 188 阅读 · 0 评论 -
Event事件学习实用路线（2）——Event事件之事件冒泡和事件捕获
Event事件之事件冒泡和事件捕获事件冒泡和事件捕获事件监听函数事件冒泡事件捕获事件冒泡和事件捕获事件监听函数addEventListener(‘ev’,fn,[Boolean,{}])它有三个参数第一个参数：执行事件的名称第二个参数：fn函数第三个参数：传递有两种形式：Boolean或者一个对象默认第三个参数是 false （不捕获，因此该函数默认是冒泡执行的），第三...原创 2020-04-24 20:19:16 · 227 阅读 · 0 评论 -
Event事件学习实用路线（1）——Event事件之事件监听器
事件监听器事件监听和事件绑定的区别 xiao迪就不做太官方说明了，以一个十分简单的例子说明： 同两个事件都会执行吗？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid...原创 2020-04-24 19:36:12 · 513 阅读 · 0 评论 -
BOM学习实用路线（7）——BOM之navigator和screen
navigator 对象- userAgent- appName - appVersionnavigator关于存储设备信息及当前浏览器的一些东西。console.log(navigator);appVersion 获取当前浏览器的版本号language 当前使用的语言onLine 是否有网userAgent 用户代理信息切换手机模式，userAgent会发生变化...原创 2020-04-24 16:46:42 · 198 阅读 · 0 评论 -
BOM学习实用路线（6）——BOM之history
history（后续待补充）原创 2020-04-24 15:59:08 · 142 阅读 · 0 评论 -
BOM学习实用路线（5）——BOM的hash路由实现原理
hash路由实现原理路由（routing）: 根据路径决定前端显示的视图实现常规页面跳转：9.hash01.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=...原创 2020-04-12 14:40:26 · 289 阅读 · 0 评论 -
BOM学习实用路线（4）——BOM刷新与跳转及BOM的hash简述
刷新与跳转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...原创 2020-04-12 11:50:27 · 504 阅读 · 0 评论 -
BOM学习实用路线（3）——BOM之location对象
location 对象hostnameportprotocolhrefhashhashChangesearchreload()replace()（后续待补充）原创 2020-04-12 11:06:03 · 166 阅读 · 0 评论 -
BOM学习实用路线（2）——案例：居中广告弹窗
居中的广告弹窗位置计算：（可视区尺寸-广告自身尺寸） / 2<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">&...原创 2020-04-11 21:43:01 · 223 阅读 · 0 评论 -
BOM学习实用路线（1）——DOM简介及BOM下五大对象之Window对象
BOMjavascript 的组成部分DOM (document object model) 文档对象模型BOM (browers object model) 浏览器对象模型ECMAScript js 的核心BOM 下五大对象——window 对象innerWidth/innerHeightwindow.innerWidth 可视区宽度window.innerHe...原创 2020-04-10 20:27:05 · 242 阅读 · 0 评论 -
DOM学习实用路线（12）——DOM表格相关操作
表格相关操作常见基本操作：tBodies、tHead、tFoot、rows、cellstable.tHead 获取 tHead（表头）table.tBodies 获取的就是 tbodyrows 获取 行(tr)cells 获取单元格 (th,td)<!DOCTYPE html><html lang="en"><head> <me...原创 2020-04-10 19:14:14 · 173 阅读 · 0 评论 -
DOM学习实用路线（11）——DOM元素的尺寸获取-获取页面及可视区的绝对位置
元素的尺寸获取getBoundingClientRect()left 元素左侧距离可视区左侧距离top 元素顶部距离可视区顶部距离right 元素右侧距离可视区左侧距离bottom 元素底部距离可视区顶部距离width 可视宽度height 可视高度元素相对可视区的位置（不太兼容）<!DOCTYPE html><html l...原创 2020-04-10 18:48:11 · 928 阅读 · 0 评论 -
DOM学习实用路线（10）——DOM元素的尺寸获取-client和scroll
元素的尺寸获取clientclientWidth 可视宽度 - borderclientHeight 可视高度 - borderclientTop 上边框宽度clientLeft 左边框宽度 client宽高包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话），其宽高盒模型如下： clientcl...原创 2020-04-10 15:30:22 · 479 阅读 · 0 评论 -
DOM学习实用路线（9）——DOM元素的尺寸获取-offset
元素的尺寸获取offsetoffsetWidth 可视宽度offsetHeight 可视高度offsetLeft 距离定位父级的left坐标offsetTop 距离定位父级的top坐标offsetWidth 可视宽度offsetHeight 可视高度<!DOCTYPE html><html lang="en"><hea...原创 2020-04-10 13:40:49 · 529 阅读 · 0 评论 -
DOM学习实用路线（8）——DOM节点操作之DOM克隆节点和DOM深浅克隆（拷贝）、DOM文档碎片（性能优化）
节点操作克隆节点node.cloneNode(deep)deep: 默认为falsedeep 为 true, 克隆元素及属性，以及元素的内容和后代deep 为 false, 只克隆元素本身，及它的属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8...原创 2020-04-10 12:21:50 · 601 阅读 · 0 评论 -
DOM学习实用路线（7）——DOM节点操作之替换节点和删除节点
节点操作替换节点node.replaceChild(newnode,oldnode)方法用新节点替换某个子节点。 这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点。 用newnode替换 oldChild 的新节点。如果该节点已经存在于 DOM 树中，则它首先会被从原始位置删除。<!DOCTYPE html><html lang="en">...原创 2020-04-09 23:12:41 · 706 阅读 · 0 评论 -
DOM学习实用路线（6）——DOM节点操作之创建节点和添加节点
节点操作创建节点语法：element document.createElement(“tagName”); 创建一个节点参数：tagName 标签名称返回值：创建好的节点<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta nam...原创 2020-04-09 21:18:24 · 526 阅读 · 0 评论 -
DOM学习实用路线（４）——DOM属性操作及ECMA、DOM 的属性操作的区别
DOM 属性操作注意 . 和 [] 都是 ECMAScript 中，对象的属性操作，对象属性的值会被存在内存中, 想要直接获取存在 文档中属性，或者 想把一个属性设置在文档中我们需要使用DOM 的属性操作：el.attributes 元素所有属性的集合el.getAttribute(“attr”) 获取属性el.setAttribute(“attr”,“val”) 设置属性el.r...原创 2020-04-09 16:24:14 · 395 阅读 · 0 评论 -
DOM学习实用路线（5）——DOM自定义属性
data 自定义属性在标签中定义data自定义属性：data-key=“value”;在js操作该元素的 data 自定义属性：el.dataset获取：el.dataset.key设置: el.dataset.key = “value”&npsb; 溜_x_i_a_o_迪童鞋自行想象自定义属性，尝试失败了！！！<!DOCTYPE html><...原创 2020-04-09 14:20:21 · 278 阅读 · 0 评论 -
DOM学习实用路线（3）——NodeList 和 HTMLCollection区别差异
NodeList 和 HTMLCollection返回值nodeListchildNodesquerySelectorAll返回值HTMLCollectionchildren以下我们可以观察出childNodes、querySelectorAll、children的返回值类型。<!DOCTYPE html><html lang="en">...原创 2020-04-09 13:22:46 · 253 阅读 · 0 评论 -
DOM学习实用路线（2）——DOM关系及DOM查找子级
DOM关系childNodes 子节点children 子元素firstChild 第0个子节点firstElementChild 第0个子元素lastChild 最后一个子节点lastElementChild 最后一个子元素nextSibling 下一个兄弟节点nextElementSibling 下一个兄弟元素previousSibling 上一个兄弟节点previo...原创 2020-04-09 12:10:48 · 598 阅读 · 0 评论 -
DOM学习实用路线（1）——DOM简介及DOM节点介绍
DOMjavascript 的组成部分DOM (document object model) 文档对象模型BOM (browers object model) 浏览器对象模型ECMAScript js 的核心 DOM树我们可以打印“console.log(document)”看看： DOM 节点节点分类元素节点：每个 HTML元素属性节点：HTM...原创 2020-04-09 09:57:13 · 329 阅读 · 0 评论 -
案例：员工列表（es6与原生JS应用）——运行时奇异的问题（求解答）
案例：员工列表（es6与原生JS应用）——运行时奇怪的问题（求解答）完整代码如下：在视图渲染render方法中，在性别筛选的代码中，switch下的default中，对数组进行拷贝，拷贝前后对原数据数组data和拷贝后的数组进行了打印，出现了奇怪的现象：<!DOCTYPE html><html lang="en"><head> <me...原创 2020-04-08 19:26:19 · 290 阅读 · 0 评论 -
案例：员工列表（es6与原生JS应用）
案例：员工列表（es6与原生JS应用）实现功能根据数据渲染视图es6应用： 模版字符串、箭头函数、let 思考过程：获取html文档中的需要补充后台数据的容器；解析扁平化处理后的数据（暂时假定后台送达的是扁平化数据），将其装饰上html语句；最终所有填充语句转成字符串赋值给容器。<!DOCTYPE html><html lang="en"&g...原创 2020-04-08 19:07:05 · 717 阅读 · 0 评论