DOM
文章平均质量分 65
Raaabbit
从入门到精通,脚踏实地
展开
-
DOM编程-事件(一)
DOM事件什么是DOM事件?当我们在网页上操作的时候,比如当我们点击一个DOM元素,在键盘上按下按键,在输入框输入内容,当页面加载完成,这些都会触发DOM事件事件流什么是事件流呢? 事件流就是DOM事件的处理执行的过程。W3C中对DOM事件流有明确的定义。 (图片来自于W3C文档https://www.w3.org/TR/uievents/#dom-event-architecture)如图,这原创 2017-07-30 20:13:11 · 246 阅读 · 0 评论 -
JS动画函数的封装
JS动画函数的封装 有很多常用的JavaScript功能实现,我们不妨将它们封装起来,方便以后的使用。 下面是我对JavaScript动画动画函数的封装,参考了其他人的博文,如果有冒犯,请联系我。闲话少说,贴上demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vie原创 2017-10-05 23:30:56 · 1688 阅读 · 0 评论 -
JS获取DOM节点
DOM节点操作浏览器读取HTML文件并解析后,可以生成页面结构,那么在结构生成之后还可不可以再修改这个结构呢,这就需要用到我们的DOM节点操作节点操作主要有以下内容: * 获取节点 * 创建节点 * 修改节点 * 插入节点 * 删除节点 * innerHTML获取节点父子关系 parentNodefirstChild/lastChild/childNodeschildNodes/原创 2017-11-02 21:17:09 · 259 阅读 · 0 评论 -
表单验证失败阻止提交
表单验证失败阻止提交提交表单的时候往往需要经过验证表单的内容是否符合要求,我们举一个例子&lt;form action="/search" id="search" name="search" method="GET"&gt; &lt;div class="u-search&qu原创 2018-02-09 17:41:33 · 4468 阅读 · 0 评论 -
解决移动端页面的touchstart和touchmove冲突
解决移动端页面的touchstart和touchmove冲突最近在写一个小项目,移动端的投票工具,作为一个第一次写移动端的菜鸟,问题出现了: 为什么一滑屏幕就触发了一堆touchstart事件呀(摔!!!)基本概念touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事...原创 2018-03-19 16:53:25 · 5992 阅读 · 0 评论 -
移动端Web不安分的小键盘
移动端Web不安分的小键盘在进行Webapp开发的过程中遇到了这样的问题——在chrome上模拟很完美的页面,在移动端就变了样子,罪魁祸首就是不安分的小键盘~Bug再现我们先看看PC端的表现:不错不错,这个日历的大小位置都还和符合人类的正常审美让我们上真机调试一下:这是一个非常实实在在的bug,对用户体验造成了毁灭性打击!!!诊断这个原因很简单,因为上面所用的日期选择器是一...原创 2018-12-12 22:08:44 · 473 阅读 · 0 评论 -
前端知识点——Web Sockets
前端知识点——Web Sockets本系列文章是我在实习面试之前的对自己掌握的知识点的总结,就从一直不太熟悉的webSockets开始吧~WebSockets的第一印象:可以创建和服务器进行双向会话的高级技术,取代了曾经使用的轮询方法。APIWebSocket:用于连接WebSocket服务器的对象CloseEvent:关闭连接时WebSocket对象触发的事件MessageE...原创 2019-02-24 22:15:55 · 914 阅读 · 0 评论 -
JS的异步加载
JS的异步加载自觉自己基础不扎实,不应该心猿意马,所以很久没有更新性能优化专栏,回顾总结了一段时间后再来一发吧~在学习前端开发的最开始,就可能有人告诉你,在 body 的末尾再引入 script 标签(收到依赖的jQuery更适合放在前面),书写js代码就提高效率,这到底是为什么呢?引入外部js带来的问题先看一个不好的例子:<body> <!-- body ...原创 2019-03-16 00:20:09 · 164 阅读 · 0 评论 -
温故知新——DOM操作之获取节点
浏览器读取 HTML 文件并进行解析之后,会生成一棵由 DOM 节点构成的树,我们可以对其中的节点进行操作基本的 DOM 节点操作包括节点的获取、创建、修改、插入和删除我们先写一段简单的 HTML 代码,<body> <header id="title" class="main-title"> <span class="text-heading"&g...原创 2019-08-17 22:48:59 · 297 阅读 · 0 评论 -
前端多媒体兼容
多媒体在前端我们进行多媒体操作,会用到下面两个标签: audio标签和video标签<audio src="music.mp3"></audio><video src="movie.mov" width=320 height=240></video>由于视频会占据一定的空间,所以多出了width和height属性。的兼容用法由于W3C没有定义浏览器的音频格式,所以我们要进行兼容。<audio>原创 2017-08-11 10:32:21 · 403 阅读 · 0 评论 -
数据存储Cookie
Cookie浏览器中的Cookie是一段小型的文本文件,根据不同浏览器对Cookie的实现大概都是在4kb左右。由键值对构成,键值对之间是有分号和空格隔开。 虽然Cookie是在浏览器端储存,但我们一般都在服务器端设置,我们可以在Http返回值里面通过设置Set-Cookie来告诉浏览器我们需要存储的cookie。属性 属性名 默认值 作用 Name 名 Value原创 2017-08-10 20:49:21 · 477 阅读 · 0 评论 -
DOM编程-事件(二)
事件注册与触发事件注册事件注册取消事件触发这三种操作的主体都是DOM元素事件注册eventTarget.addEventListListener(type,listener[,useCapture]) 作用于一个DOM元素,第一个参数是事件类型,第二个是事件处理函数,第三个是是否为捕获过程(true/false),第三个参数默认是一个冒泡过程var elem = document.Elem原创 2017-07-30 20:14:07 · 189 阅读 · 0 评论 -
DOM编程-事件(三)
事件对象事件对象是当事件被触发时,会调用事件处理函数,会传入一些信息,代表了当前事件的一个状态,这个就是事件对象。 var elem = document.ElementById('div1')';var clickHandler = function(event){ //事件处理函数}elem.addEventListener('click',clickHandler,原创 2017-07-30 20:15:11 · 168 阅读 · 0 评论 -
DOM编程-事件(四)
事件类型Event: load unload error select abort UIEvent: resize scroll FocusEvent: blur focus focusin focusoutInputEvent: beforeinput input Keyboard原创 2017-07-30 20:16:23 · 220 阅读 · 0 评论 -
DOM编程-事件(五)
焦点事件FocusEvent处理元素获得焦点和失去焦点的事件,那么什么是获得焦点,什么是失去焦点呢? 比如有一个input输入框,当我们用鼠标点击一下,会有一个光标出现,这时就获得了焦点;当我们点击其他地方的时候光标消失,这就失去了焦点。 事件类型 是否冒泡 元素 默认事件 元素例子 blur no window、element none wi原创 2017-07-30 20:17:04 · 264 阅读 · 0 评论 -
DOM编程-节点操作(一)
DOM节点操作浏览器读取HTML文件并解析后,可以生成页面结构,那么在结构生成之后还可不可以再修改这个结构呢,这就需要用到我们的DOM节点操作节点操作主要有以下内容: * 获取节点 * 创建节点 * 修改节点 * 插入节点 * 删除节点 * innerHTML获取节点父子关系 parentNodefirstChild/lastChild/childNodeschildNodes/原创 2017-07-23 13:27:26 · 442 阅读 · 0 评论 -
DOM编程-属性操作
DOM编程-属性操作需求引入在用户进行登录时,为了防止用户重复提交表单,我们往往会在提交后,将登录设置为disable,同时改变外观样式来起到提示作用,那么我们就要能够通过JS来修改属性。HTML属性和DOM属性的对应关系<div > <label for="userName">用户名:</label>> <input id ="userName" type="text" name=原创 2017-07-24 10:22:30 · 249 阅读 · 0 评论 -
DOM编程-节点操作(二)
一段范例用代码<div id="users"> <h2>学习</h2> <ul> <li class="user"> <img src="1.jpg" > <a href="/user/1">小明</a> </li> <li class="user"> <img s原创 2017-07-23 13:28:24 · 238 阅读 · 0 评论 -
DOM编程-样式操作
DOM编程-样式操作几个需求一、在我们进行登录注册的时候,当我们的输入不符合规则,光标离开后会变色来提示用户 二、页面换肤,用户的选择会改变整个页面的样式CSS对样式的影响可以通过外部引入CSS文件,在head中内嵌CSS,在style属性中添加CSS属性 CSS->DOM说明:下面的style对应的是CSSStyleDeclaretion的一个对象内部样式表<style> bo原创 2017-07-24 10:23:56 · 313 阅读 · 0 评论 -
温故知新——DOM节点增删查改替换复制
DOM节点增删查改替换复制这篇文章中总结的节点操作比较狭义,特指对 element 节点的操作,并没有包含其他内容,至于对文本内容和属性的操作就放在下一篇吧~节点的“查”操作已经在上一篇文章中总结过了,在本文中主要包括创建节点、修改节点、插入节点、删除节点、替换节点、查看节点和复制节点今天的通过下面这一段范例代码展开:<ul id="users"> <li cla...原创 2019-08-23 00:45:45 · 383 阅读 · 0 评论