2020年08月_粽子师兄

原创 JavaScript学习笔记（十五）——事件（对象、绑定、流程）

事件对象——event事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁！ div.onclick = function(e) { console.log(e); // e 就是事件对象我们可以根据它获取到许多的信息 // 在IE中，时间对象没有传递给函数，而是在window上，名字叫做event }在IE浏览器中，通

2020-08-31 22:17:55 278

原创 JavaScript学习笔记（十四）——快捷尺寸、位置与距离

快捷尺寸有些元素样式，我们需要频繁使用，虽然可以使用元素.style.属性名、window.getComputedStyle()或者currentStyle属性获取，但是很显然这样会很麻烦，所以浏览器提供了一些快捷的方式，方便开发。clientWidth 获取内容宽与左右padding之和clientHeight 获取内容高与上下padding之和offsetWidth 获取内容宽与左右padding与左右border宽度之和（不包含滚动条）offsetHeight 获取内容高与上下paddin

2020-08-29 11:54:30 195

原创 JavaScript学习笔记（十三）——获取元素计算后样式

获取元素计算后样式前面提到的使用元素.style.属性名可以获取样式，但是该方式只能获取行内样式。所以为了解决这个局限性，浏览器提供了window.getComputedStyle()方法，用来获取元素样式，因为元素样式都是经过浏览器计算后才渲染的，所以可以说是获取元素计算后样式。看下面例子：先给div一个行内样式和一个内部样式，绑定元素： <style> div{ color: tomato; background-

2020-08-29 11:27:24 342

原创 JavaScript学习笔记（十二）——节点

在HTML DOM中，所有事物都是节点，DOM是被视为节点树的HTML。节点根据W3C的HTML DOM标准，HTML文档中的所有内容都是节点。整个文档是一个文档节点每个HTML元素是元素节点HTML元素内的文本时文本节点每个HTML属性是属性节点注释是注释节点节点属性使用nodeType获取节点类型，属性值为数字1 表示元素节点2 表示属性节点3 表示文本节点8 表示注释节点9 表示文档节点获取属性节点，要通过元素.attributes来获取到集合，再通过下标获

2020-08-27 21:22:12 293

原创 JavaScript学习笔记（十一）——BOM&DOM

JavaScript组成部分JavaScript由BOM、DOM和ECMAScript三部分组成。JavaScript 的核心 ECMAScript 描述了该语言的语法和基本对象；BOM 描述了与浏览器进行交互的方法和接口；DOM 描述了处理网页内容的方法和接口。ECMAScript先简单了解javascript的发展历史，在因特网发展的初期，为了减少客户端与服务器的交互（比如表单的验证一类），提高网上冲浪的效率，当时著名的Netscape公司开发了一种名为livescript的脚本语言，当

2020-08-26 22:03:10 398

原创 JavaScript学习笔记（十）——Math对象和Date对象

Math对象Math 对象用于执行数学任务。Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()。常见的Math对象方法Math.random 该方法用于生成一个0~1的随机数，包括0，不包括1 // 生成一个0~1的随机数 var num1 = Math.random(); console.log(num1); // 生成一个0~9的随机整数 var num2 = pa

2020-08-24 17:41:09 169

原创 JavaScript学习笔记（九）——JS中的常用事件

什么叫做事件所谓的事件，是浏览器监听用户行为的一种机制。比如，当用户使用鼠标点击一个按钮，会触发该按钮的点击事件如果此时我们想要执行代码就可以通过JS脚本设置点击事件的处理函数同样的，如果用户鼠标双击一个按钮，会触发该按钮的双击事件类似的事件还有很多每个事件前要用on开头鼠标事件click 点击事件(一次click包含一次mousedown和一次mouseup)dblclick 双击事件mousedown 鼠标按下事件mouseup 鼠标抬起事件mouseove

2020-08-24 00:40:41 218

原创 JavaScript学习笔记（八）——JS中的对象

对象JS就定义了一个对象数据结构允许使用 key: value作为一组键值对对象可以有多个key:value对组成对象的使用对象：是一组k:v对的集合。每一组k:v对，叫做对象的属性。k表示对象的属性名v表示对象的属性值。每一组k:v对，使用逗号隔开，推荐一行一个k:v对k最好符合变量的命名规范（属性名必须是字符串 " ‘’、’ '，但是只要属性名是符合变量命名规则，那么可以省略双引号或者单引号）v是具体的数据,可以是任何类型的数据。定义对象：字面量 (推荐方式)

2020-08-24 00:30:15 425

原创 JavaScript学习笔记（七）——JS中的数组

数组数组是js中的引用类型之一，装载一组数据的容器。引用类型和值类型的区别：存放位置：引用类型存放在内存里，堆内存；值类型存放在内存里，栈内存数组的定义字面量语法：var arr = [];构造函数语法：var arr = new Array();传参规则：当没有参数时，定义的是一个空数组当参数只有一个并且是数字时，该数字表示数组的长度当参数有多个时，参数就是每一个成员构造函数语法：var arr = Array();传参规则：当没有参数时，

2020-08-23 23:53:25 366

原创 JavaScript学习笔记（六）——JS中的字符串

存储计算机只能够存储二进制存储字符串转为二进制需要有对照表方便将字符和二进制进行转换这样的对照表叫做编码方式常见的有 ascii、unicode 等定义字符串的新的方式 var str = new String("a"); console.log(typeof str); // object // 转换为字符串的方式就是str.toString();包装类型：在面向对象的思想中，一切都得是对象。而JS中有一些基本类型，此时就需要包装一下，将这

2020-08-23 23:06:19 327

原创 JavaScript学习笔记（五）——函数的作用域

作用域决定了变量、常量和参数被定义的时间和位置。函数参数的作用域仅限于函数体中。来看一个例子：function f(x){ return x + 3;}f(5); // 8x; // ReferenceError: x 未定义单从代码上来看，x的确存在过（否则它就无法计算出x + 3的值），但是，在函数体外引用x的时候，会报错。因此，x是函数 f 的一个内部变量，它的作用域就是函数f。当某个变量的作用域是一个给定的函数时，必须要记住：形参只有在函数被调用的时候财讯在（变成实参）。一个函数可能

2020-08-23 22:26:08 145

原创 JavaScript学习笔记（四）——函数function

函数函数是一组语句的集合，它是一个独立运行的程序单元。本质上，它是一段子程序，函数是JavaScript的核心。每一个函数都有一个函数体，它是构成该函数的一组语句集合。函数声明完后需要调用（也称为运行、执行、请求或者调度）才会去执行函数体。函数的定义第一种定义方式：函数声明function 函数名(){ 函数体}第二种定义方式：函数表达式var 变量 = function(){ 函数体}注意：第二种方式的本质其实是定义了一个变量，并将这个函数的地址交给该变量。于是，函数名就是这

2020-08-22 18:06:32 618 1

原创 JavaScript学习笔记（三）——控制流

分支判定为了让程序拥有自主选择能力，JS语言加入了分支判定功能。可以让程序决定执行哪一段代码，不执行哪一段代码，从而实现程序结果的多样化。分支判定有两种：if和switchif语句语法1：if (表达式) { 代码段 } else { 代码段 }运行规则：当表达式结果为真时，执行if代码段；当表达式结果为假时，执行else代码段。语法2：if (表达式) {代码段}运行规则：当表达式结果为真时，执行if代码段；当表达式结果为假时，不执行任何内容。语法3： if (表达式1)

2020-08-22 16:41:33 374

原创 JavaScript学习笔记（二）——基础语法

注意： JS是被浏览器内的JS解析所运行（先解析再运行），该线程只有一个，也就是js是单线程的而且与UI的线程共用一个线程。书写位置

2020-08-21 18:51:27 165 1

原创 JavaScript学习笔记（一）——JavaScript简介

JavaScriptJavaScript是一种由Netscape的LiveScrpt发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言。JavaScript对正式名称是“ECMAScript”。这个标准由ECMA组织发展和维护。ECMA-262 是正式的 JavaScript 标准。这个标准基于 JavaScript (Netscape) 和 JScript (Microsoft)。Netscape (Navigator 2.0) 的 Brendan Eich 发明了这门语言，从 19

2020-08-21 11:47:27 220

转载 HTMLCSS学习笔记（三十）——CSS Grid 网格布局

一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所

2020-08-19 17:58:28 444

原创 HTMLCSS学习笔记（二十九）——CSS Sprites的原理&浏览器兼容

CSS SpritesCSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式（页脚精灵图、雪碧图）。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中。这样一来，浏览器在加载图片的时候不用一张张图片加载，而是直接加载出一张精灵图。从而减少请求次数，提高加载速度。加速的关键，不是降低重量，而是减少个数。传统切图讲究精细，图片规格越小越好，重量越小越好，其实规格大小无所谓，计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求，所以，图片越多请求次数越多，造成延迟的可

2020-08-19 17:10:01 264

原创 HTMLCSS学习笔记（二十八）——多列&&媒体查询

CSS3多列注意：在属性前加前缀Firefox 需要前缀 -moz-Chrome 和 Safari 需要前缀 -webkit-属性描述column-count指定元素应该被分割的列数。column-fill指定如何填充列column-gap指定列与列之间的间隙column-rule所有 column-rule-* 属性的简写column-rule-color指定两列间边框的颜色column-rule-style指定两列间边框的样式

2020-08-19 12:07:00 522

转载 HTMLCSS学习笔记（二十七）——CSS3弹性盒属性演示案例集合

以下元素展示了弹性子元素在一行内显示，从左到右:<!DOCTYPE html><html><head><meta charset="utf-8"> <title>document</title> <style> .flex-container { display: -webkit-flex; display: flex; width: 400px; height: 250px;

2020-08-18 12:04:31 129

原创 HTMLCSS学习笔记（二十六）——CSS3弹性盒

box-sizing属性box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。语法： box-sizing: content-box|border-box|inherit;属性值描述content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过

2020-08-18 11:59:39 200

原创 HTMLCSS学习笔记（二十五）——HTML5基础补充

HTML5语法内容类型（ContentType）HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm"DOTYPE声明<!DOCTYPE html>不区分大小写指定字符集编码<meta charset="UTF-8">可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta省略前<hr />省略后<hr>可以省略结束标记的元素： li、d

2020-08-17 20:07:26 180

原创 HTMLCSS学习笔记（二十四）——利用border属性制作太极图与哆啦A梦

旋转太极图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>太极图</title> <style> *{ ma

2020-08-17 19:38:53 192

原创 HTMLCSS学习笔记（二十三）——CSS属性补充

文本阴影属性语法：text-shadow: h-shadow v-shadow blur color;值描述h-shadow必需。水平阴影的位置。允许负值。v-shadow必需。垂直阴影的位置。允许负值。blur可选。模糊的距离。color可选。阴影的颜色。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <

2020-08-17 19:33:45 227

原创 HTMLCSS学习笔记（二十二）——CSS3选择器

渐进增强 && 优雅降级渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级( graceful degradation)：：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）

2020-08-17 17:35:02 90

原创 HTMLCSS学习笔记（二十一）——2D、3D、过渡、动画小案例

过渡案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{

2020-08-17 17:20:09 324

原创 HTMLCSS学习笔记（二十）——3D与动画

景深近大远小：物体距离眼睛越近，感觉到物体越大，物体距离眼睛越远，感觉到物体越小实现景深效果的方法：在父元素中使用：perspective:1200px;在子元素中使用：transform:perspective(1200px) ;属性值越小，景深效果越明显，取值范围在900-1200区间，效果不明显。perspective-origin：观察3d元素的（位置）角度perspective-origin：center center （中心）perspective-origin：le

2020-08-17 17:03:21 230

原创 HTMLCSS学习笔记（十九）——过渡与2D

CSS过渡css3的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。transition-property：检索或设置对象中的参与过渡的属性transition-duration：检索或设置对象过渡的持续时间transition-delay：检索或设置对象延迟过渡的时间transition-timing-function：检索或设置对象中过渡的动画类型简写：transi

2020-08-16 20:15:26 205

原创 HTMLCSS学习笔记（十八）——渐变

浏览器内核及私有前缀在学习渐变前，我们应该了解什么是浏览器内核及私有前缀。浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。内核私有前缀说明Trident-ms-IE浏览器专属的CSS属性需添加-ms-前缀Gecko-moz-所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀Webkit-Webkit-所有基于Webkit引擎的浏览器（如Chrome、Safari）专

2020-08-16 18:12:50 232

原创 HTMLCSS学习笔记（十七）——表格、表单知识补充

表格补充数据行分组<thead></thead><tbody></tbody><tfoot></tfoot>数据列分组<colgroup span="value"></colgroup> 列标题`&lt

2020-08-16 16:29:40 143

原创 HTMLCSS学习笔记（十六）——BFC

BFC概念在解释 BFC 是什么之前，需要先介绍Block Formatting（格式化） Context（上下文）。Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布

2020-08-16 16:01:34 139

原创 HTMLCSS学习笔记（十五）——CSS清除浮动8种方法以及优缺点

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。解决浮动引起的问题有多种方法，但有些方法在浏览器兼容性方面还有问题。下面总结8种清除浮动的方法（测试已通过 ie chrome firefox opera，后面三种方法只做了解就可以了）：这是没清除浮动前的页面：这是清除浮动之后的页面：1. 父级div定义 height原理：父级div手动定义height，就解决了

2020-08-16 15:51:45 116

原创 HTMLCSS学习笔记（十四）——宽高自适应

宽高自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整，这就是pc自适应。自适应的优点：元素自适应在网页布局中非常重要，它能够使网页显示更灵活，可以适应在不同设备、不同窗口和不同分辨率下显示。宽度自适应元素宽度设置为100%（块元素宽度默认为100%），或者不设置宽度（宽度是父元素的宽度）。最大宽度：max-width从字面意思可以看出,是规定元素本身最大宽度，元素本身宽度应小于等于最大宽度值。一般我们在布局时，不想要元素的宽度限定死，并且想要它

2020-08-16 15:22:22 887

原创 HTMLCSS学习笔记（十三）——常见网站CSS重置样式

腾讯body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}a{color:#172c45;text-decoration:none}a:hover{color:#cd

2020-08-16 14:07:52 504

vue-element-admin完整依赖包node_modules

ECharts所需的js包echarts.min.js

空空如也