09 2019 档案
摘要：1.CSS过渡 含义：在没有过渡属性的时候，当一个元素的属性值发生变化时，浏览器就会将这个元素瞬间渲染成新属性值的样式。例如一个定位元素top:0，动态修改成top:100px，这个元素就瞬间跑到100px的位置，有时候我们为了达到某种视觉效果，希望它以动画的形式将样式转变的过程展现出来，而这个过程
阅读全文
摘要：1.首先，为了使元素可拖动，要先设置元素为可拖拽 方法：添加draggable属性，设置为 true 注意：链接和图像默认就支持拖拽，另外，如果一个元素中的文本被选中，那么这个元素和他的文本节点此时都支持被拖拽。 <body style="padding:30px;"> <div class="it
阅读全文
摘要：1.网络状态监听 online事件：网络重新连通时触发 offline事件：网络断开时触发 <script> // 监听网络连接 window.addEventListener("online",function(){ console.log("网络连通了") }) // 监听网络断开 window
阅读全文
摘要：###1.互联网上的音频 直到现在，仍然不存在一项旨在网页上播放音频的标准。 今天，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。 ###2.插入音乐 <audio> 标签 目前，
阅读全文
摘要：1.什么是自定义属性 特殊属性：例如id，class，checked这类属性有特殊的作用，设定后将影响元素渲染，同时点语法也能获取到这些属性值 自定义：自定义属性使用"data-"开头的属性，只存在标签中，无法通过点语法无法获取 <div data-animal-type="鱼类" data-pri
阅读全文
摘要：1.类名操作 class类名以字符串的形式存储到标签和Dom元素的属性中，标签属性为class，Dom元素属性为className，两个属性是均支持读取和修改，修改其中的一个会同步至另一个属性 className属性：拿到Dom后，通过这个属性来读取和修改 <body> <div id="app">
阅读全文
摘要：###1. <progress>标签 进度条 value属性：规定进程的当前值。默认为0 max属性：规定需要完成的值。 PS：这里没有最小值设置，或者说最小值一律为0 <progress max="50" value="20" id="progress"></progress> 小案例：设置定时器
阅读全文
摘要：1.提示占位 placeholder <input type="text" name="userName" placeholder="请输入用户名"> placeholder的文本默认是浅灰色，如果要修改，可以通过伪元素来进行设置 input::placeholder{ color: red; }
阅读全文
摘要：1.基本说明 FileReader可以主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件 本地文件一般通过文件域进行选择，选中后再使用FileReader进行访问 2.创建文件读取对象 var reader = new FileReader() 3.读取文件的方法 以异步的形
阅读全文
摘要：H5新增了电子邮箱，手机号码，网址，数量，搜索，范围，颜色选择，时间日期等input类型 1.电子邮箱 type="email" 提供电子邮箱格式验证 如果格式不对，会阻止表单提交 2.手机号码 type="tel" 并非用来验证手机号码，而是用来在移动端浏览器调用数字键盘 3.网址 type="u
阅读全文
摘要：1.常用的语义标签 意义：语义标签便于阅读代码，也便于搜索引擎解析文档结构与内容 标签 含义 article 定义页面独立的内容区域 aside 定义侧边栏内容 header 定义了文档的头部区域 section 定义文档中的区块 nav 定义文档中的区块 footer 定义 section 或 d
阅读全文
摘要：1.写法对比 传统函数 //传统函数 function sum(n1,n2){ return n1+n2; } console.log(sum(1,2)); //3 箭头函数 //求和 var sum = (n1,n2)=> { return (n1+n2) } //等价于 var sum = (n
阅读全文
摘要：1.let声明 1.let不像var有变量声明提升，未声明直接使用会报错 console.log(a); //undefined var a; console.log(b); //报错 let b; 2.在ES5中，全局变量是挂载在顶层对象（浏览器是window）中。而let不会 var a = 1
阅读全文
摘要：1.前言 定义 ：当一个Dom元素触发事件时，系统会生成一个对象来记录事件触发时的一些信息，比如鼠标坐标，按键信息，并将此作为参数传入回调函数中 document.querySelector('#box').onclick = function(e) { //IE8不需要传递参数，直接用window
阅读全文
摘要：1.addEventListener() 语法：node.addEventListener(事件名称,回调函数,是否使用事件捕获传递) 第三个参数：可以是布尔值，就用来描述是否使用事件捕获传递，默认为false，即冒泡传递，如果设为true，则代表为捕获传递，也可以是一个配置对象 <script>
阅读全文
摘要：1.Flex容器 用途：flex布局可以让块级子元素排列在同一行，同时控制其换行，对其方式等 基本用法：设置父容器为 display: flex（如果想要容器以行内元素展示，则将其设定为inline-flex） 兼容性：IE10部分支持2012，Android4.1/4.2-4.3部分支持2009
阅读全文
摘要：1.临时改变函数调用时this的指向 方法：call()与apply()，第一个参数为此次调用时的this指向，如果不传，则则等同于指定全局对象，后面的参数为函数原本的参数 区别：apply()方法传递参数时，使用数组进行包裹 <script> function Person(name){ this
阅读全文
摘要：1.构造函数 含义：所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构 写法：构造函数的名称一般都是首字母大写，用来表明这是一个构造函数，其内部通过this给实例挂载属性和值，通过关键字new调用
阅读全文
摘要：当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。 简单的模式可以是一个单独的字符。 更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。 您可以规定字符串中的检索位置，以及要检索的字符类型，等等。 完整教程 1.基本用法 创建方式一：字面量方式定义 <
阅读全文
摘要：1.基本用法和属性 属性 说明 调用者 length 返回字符串的长度 当前字符串 constructor 返回字符串的构造函数 String() 当前字符串 <script> // 创建字符串 var str = "hello world" // 根据下标访问某个字符 console.log(st
阅读全文
摘要：1.为HTML标签设置和添加属性 setAttribute() setAttribute()方法可以给HTML标签设置/添加属性（原生的属性或者自定义的属性都可以）添加的属性会存储在标签中 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t
阅读全文
摘要：1.数组元素添加与删除 方法名 说明 返回值 push(val) 把目标元素添加到数组的末尾 返回操作完成后数组的长度 unshift(val) 把目标元素添加到数组的最前面 返回操作完成后数组的长度 pop() 删除数组最后一个元素 返回被删除的元素 shift() 删除数组的第一个元素 返回被删
阅读全文
摘要：1.Dom元素的大小 属性 说明 调用者 offsetWidth，offsetHeight 返回元素的宽高(border+padding) ,整数 当前Dom元素 clientWidth，clientHeight 返回元素的宽高(padding) ,整数，不能是行内元素 当前Dom元素 getBou
阅读全文
摘要：1.Dom节点类型 常见的节点类型有3种：元素节点，属性节点，文本节点 节点常用的属性有3个：节点名称(nodeName),节点类型(nodeType)，节点值(box.nodeValue) 节点类型(nodeType)可能值如下: <script> //依次输出Node对象的属性和值 for(va
阅读全文
摘要：1.基本类型 字符串，数字，布尔类型都是基本类型，他们的值存放在栈区，值是静态的且相互独立的。 // 字符串类型 var a = 'hello' var b = a console.log(a,b) // hello hello a = 'xxx' // 修改a的值不会影响b console.log
阅读全文
摘要：1.less的介绍 Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 官方文档 2.less需要编译才能被浏览器解析 浏览器本身只能解析css文件，对于less无法解析，需呀解析后留浏览器才能解析 在线解析：引入专门的js插
阅读全文
摘要：1.文本对其 text-align 作用：这个属性能控制标签内文本水平方向的对齐方式，默认左对齐 注意：这个属性会被子元素继承 示例 <!DOCTYPE html> <html> <body> <div class="box" style="text-align:center"> div的文本 </
阅读全文
摘要：1.基本值 display属性共有4个值： 属性值 说明 blcok 块级元素，独占一行 inline-block 行内块级元素，宽度由内容撑开，可设定宽度 inline 行内元素，宽度由内容撑开，不支持设定宽度 none 隐藏不展示，不占据空间 2.块级元素 块级元素会默认占满父元素的宽度且独占一
阅读全文
摘要：1.宽高百分比 元素宽度/高度百分比是基于父级元素的width/height，不包含padding，border 注意：高度百分比一定要求父元素有设置height属性，只设置 min-height 虽然父元素会有高度，单子元素使用百分比无法继承 .box { width: 400px; height
阅读全文
摘要：1.基本的浮动布局 浮动布局可以让块级元素自左向右（或自右向左）的排列在同一行 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Test</title> </head> <style> *{ padding: 0; margin
阅读全文
摘要：1.基本用法 <img src="kof5.jpg" alt="特瑞"> src属性为图片的链接地址，如果图片加载失败，代替图片的就是alt属性设置的文本 2.设置图片的宽高 img标签默认的宽高就是原图的宽高 设置图片的宽高 （设置width属性，无需单位） <img src="kof5.jpg"
阅读全文
摘要：1.单选按钮 type="radio" 同一组的单选按钮name属性值必须一致，因为单选的排他性依靠的就是这个name <!-- 下面两个的name属性都是game 他们只能选出其中的一个 --> <input type="radio" name="game" value="LOL">英雄联盟 <i
阅读全文
