IfIloseyou-CSDN博客

原创 ES6 Set集合

Set是ES6给开发者带来的一种新的数据结构，可以理解为值的集合。我们平时见到的数组Array也是一种数据结构，但是Set跟其他数据结构不同的地方就在于：它的值不会有重复项。//1、创建出一个Set结构 var s = new Set(); console.log(s);//Set {}//2、创建含内容的Set结构 var s = new Set([1,2,3]); console.log(s);//Set {1, 2, 3} //注意：//1

2020-09-19 15:45:09 308

原创 ES6 Map集合

JavaScript 的对象（Object），本质上是键值对的集合（Hash 结构），但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串=>值”的对应，Map结构提供了“值=>值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。ES6中的Map 类型

2020-09-19 15:10:18 508

原创 ES6特性--数据类型Symbol

ES6新加入了一种原始数据类型Symbol，表示独一无二的值，这是js的第七种数据类型，前六种是：undefined、null、布尔值（boolean）、字符串（string）、数值（number）、对象（object）。因此，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的Symbol类型。凡是属性名属于Symbol类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。//Symbol值通过Symbol函数生成。let s = Symbol();typeof s// "s

2020-09-12 13:17:46 165

原创 ES6之class类

使用ES6中的class创建对象ES6引入了 Class（类）这个概念，作为创建对象的模板。创建对象的最佳方式就是组合使用构造函数和原型，其实，ES6 的class可以看作构造函数+原型创建对象的另一种写法，除了写法更符合面向对象编程的语法之外，并没有实质性的改变。举个例子js创建构造函数//构造函数function Fun(name, age) { this.name = name; this.age = age; //原型对象 if (typeof(this.g

2020-09-12 12:40:24 165

原创初识Ajax

什么是AJAX，为什么要使用Ajax?AJAX是异步的JavaScript和XML，是一种用于创建快速动态网页的技术，使用AJAX可以更新部分网页内容，是非常方便使用的在 Ajax应用中信息是通过XML数据或者字符串在浏览器和服务器之间传递的（json字符串居多）在浏览器端通过XMLHttpRequest对象的responseXMl属性，得到服务器端响应的XML数据。AJAX优点：最大的一点是页面无刷新，用户的体验非常好。使用异步方式与服务器通信，具有更加迅速的响应能力。可以把以前一些服务器负

2020-08-24 15:23:50 182

原创中国地图原来这么简单就可以写出来了

上一篇的博客讲了Echarts，接下来我们的地图就是用Echars来完成的首先我们先来获取china.js文件文件引入链接：百度网盘提取码：1122 .warpper{ width: 1000px; height: 600px; }<script src="js/echarts.js"></script><!--地

2020-08-17 19:47:08 1256

原创 Echarts---介绍/柱形图和扇形图

什么是Echarts?Echarts,它是一个JavaScript图表库，底层是依赖Canvas类库ZRender实现的，可以流畅的在移动端和PC端使用，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），提供直观，生动，可交互，可高度个性化定制的数据可视化图表。说白了就是一个可以简便的画出你想要的任何图表。它拥有丰富图表类型：比如折线图、柱状图、地图、饼图、热力图、日历图等等echarts官网获取ECharts你可以通过以下几种方式获取 ECharts

2020-08-13 17:10:58 1786

原创 jQuery动画效果

jQuery的动画函数主要分为三类:基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.//元素会按左上角的点进行慢慢的显示，显示的时候进行的步骤就是宽高和透明度在规定的秒数里面显示完成$().show([speed,[easing],[fn]])//speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值//easing:(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"//f

2020-08-12 19:27:44 146

原创 jQuery基本操作

jQuery添加标签属性("div").attr("class"); // 返回文档中所有div元素的class属性值$("div").attr("class","box"); // 设置所有div的class属性值为box$("div").removeAttr("class"); // 删除文档中所有div的class属性（不建议使用）$("img").removeProp("src"); // 删除img的src属性（建议使用）//attr属性 prop是特性属性是包含特性

2020-08-08 14:22:31 157

原创初识jQuery

什么是jquery？jQuery是一款优秀的JavaScript库，从命名可以看出jQuery最主要的用途是用来做查询（jQuery=js+Query）.在jQuery官方Logo下方还有一个副标题（write less, do more）, 体现了jQuery除了查询以外,还能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更加简单。jQuery是否适用于所有浏览器?jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题，目前jQuery兼容于所有主流浏览器, 包括IE6jQ

2020-08-08 13:47:21 136

原创 js的三种异步方案

什么叫异步异步(async)是相对于同步(sync)而言的，很好理解。同步就是一件事一件事的执行。只有前一个任务执行完毕，才能执行后一个任务。而异步比如：setTimeout(function(){ console.log('learnInPro');}, 1000);console.log('sync things');setTimeout就是一个异步任务，当JS引擎顺序执行到setTimeout的时候发现他是个异步任务，则会把这个任务挂起，继续执行后面的代码。直到1000ms后，回调函数c

2020-07-30 19:25:16 263

原创 CSS3 ------- Flexible Box（弹性盒子）

弹性盒子是 CSS3 的一种新的布局模式Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局display: flex;行内元素也可以使用Flex布局 display: inline-flex;注意设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器，简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目，简称”项目”容器默认存在两

2020-07-28 19:37:50 413

原创 css3------动画animation

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3

2020-07-23 08:59:58 124

原创 css3新增选择器

:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是通过“:root”选择器设置背景颜色:root { background:orange;}:not选择器称为否定选择器，和jQuery中的:not选择器一模一样，可以选择除某个元素之外的所有元素。就拿form元素来说，比如说你想给表单中除submit按钮之外的input元素添加红色边框form { width: 200px; margin: 20px

2020-07-22 08:52:43 141

原创 HTML5----------canvas

canvas—专用于绘制2D图形/图像在写canvas要运用的一个知识就是数学的坐标系canvas 是什么？是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。如果需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制canvas 能够做什么？基础图形的绘制文字的

2020-07-16 09:27:29 132

原创前端必写之--------轮播图

轮播图的实现原理顾名思义，轮播图就是实现图片的轮换播放效果。先显示一张图片，一定的时间，让这张图片消失，下一张图片显示。让它们实现跟淘宝首页一样的广告轮播效果。废话不多说上代码：HTML布局<div class="banner" id="main"> <ul id="pic"> <li><a href="#"><img src="img/01.jpg"/></a></li> <li><a

2020-07-13 19:01:54 914

原创 JavaScript this指向

什么是this？this就是一个指针，指向我们调用的函数对象，但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。它是函数运行时，在函数体内部自动生成的一个对象，只能在函数体内部使用。函数的不同使用场合，this有不同的值。总的来说，this就是函数运行时所在的环境对象。下面分四种情况，详细讨论this的用法。this 的使用场景1、作为一般函数执行var a = 1;function test(){ console.log(this.a);}test(

2020-07-08 20:12:04 99

原创 JavaScript预编译

js运行三部曲1.语法分析 : js引擎在解析js代码之前，会先通篇扫描一下，找出低级的语法错误，比如写错大括号之类的。2.预编译任何的语法和语句全部会被转换成对象，GO（Global Object），AO（Active Object）把代码按照一定的规则，放到GO和AO中3.解释执行编译一行执行一行，当语法分析没有问题，并且已经完成预编译阶段之后，就开始解释执行代码什么的预编译？预编译就是在JavaScript代码中代码执行前进行的一项操作会把变量声明提前，函数声明也提前，把这些代

2020-07-06 19:17:29 146

原创 Bootstrap全局CSS样式——栅格系统

什么是栅格系统？概念：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会默认分为12列。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统的核心是类似.col-xs-1这样的div，也就是列，列放在行中，也就是.row这样的div，而行就放在布局容器中...

2020-05-05 18:27:22 320

原创 Bootstrap介绍

一、什么是BootStrap？BootStrap是基于html、css、js的前端框架，便于web开发人员快速开发系统页面。就是一种写响应式页面的框架，常用于在移动端上的APP。Bootstrap是当前最流行的前端UI框架(有预制界面组件)Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap是基于HTML5...

2020-05-05 16:05:45 561

原创 CSS3新特性————Transform

CSS中transform 属性作用是变形，即修改元素自身的坐标空间。这个修改实际对应了一个坐标系统映射转换的矩阵。通过变形变换，元素可以实现在二维或三维的空间内的旋转、偏移、缩放和倾斜。需要注意的是，虽然是关于坐标系统，但变换改变的只是元素的视觉渲染，那是在元素的布局计算后起作用的，因此在布局层面没有影响。一般我们所看到的网页布局，遵循的是坐标系统的概念，这就是说，浏览器在实地渲染和显示一...

2020-04-25 20:10:10 458

原创认识css3

什么是CSS3？CSS3是CSS2的升级版本，3只是版本号，它在CSS2.1的基础上增加了很多强大的新功能。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了，IE10以后也开始全面支持CSS3了。前缀浏览器-webkitchrome和safari-mozfirefox-webkitchrom...

2020-04-20 10:27:43 278

原创 HTML5新API——音频

面试题： Flash被HTML5取代在哪些方面？音频和视频 video aduio绘图 canvas动画 canvas + 定时器系统图表 canvas svg客户端数据存储 webStorage<video> 标签定义视频，比如电影片段或其他视频流。video元素/对象的属性:(1)src:指定要播放的资源的路径(2...

2020-04-13 11:14:38 244

原创 HTML5新API——地理位置

什么是地理位置？地理定位：使用JS获取浏览器当前所在的地理坐标，实现LBS（Location Based Service，基于定位的服务）具体数据。这是一个 HTML5 API，用于获取网站用户的地理位置，用户必须首先允许网站获取他或她的位置。这通常通过按钮和/或浏览器弹出窗口来实现。所有最新版本的 Chrome、Firefox、IE、Safari 和 Opera 都可以使用 HTML5 的地理...

2020-04-13 10:39:20 261

原创 ES6模板字符串，解构，箭头函数

字符串模板 string;模板字符串使用反引号 (``) 来代替普通字符串中的用双引号和单引号。模板字符串可以包含特定语法（${expression}）的占位符。占位符中的表达式和周围的文本会一起传递给一个默认函数，该函数负责将所有的部分连接起来，如果一个模板字符串由表达式开头，则该字符串被称为带标签的模板字符串，该表达式通常是一个函数，它会在模板字符串处理后被调用，在输出最终结果前，你...

2020-03-27 21:41:08 326

原创 ES6新增声明

ECMAScript 6（简称ES6）是于2015年6月正式发布的JavaScript语言的标准，正式名为ECMAScript 2015（ES2015）。ES是定义标准的，js是实现者，它是是一个语言的标准。ES6新增的功能：1.let声明变量let声明的变量不会挂在window中，不会造成全局变量的污染，新增了一个块级作用域{}，以前只有函数作用域，全局作用域。let是不允许重复声明它的...

2020-03-22 14:10:53 140

原创 javascript异步加载，时间线

什么是异步加载？我们知道JavaScript的单线程的，这与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？所谓"单线程"，就是指一次只能完成一件任务。如果有多...

2020-03-12 12:53:39 94

原创 JavaScript原型链

什么是原型，原型有什么特点：JavaScript 的每个对象都继承另一个对象，后者称为“原型”（prototype）对象。只有null除外，它没有自己的原型对象。使用原型的好处是：原型对象上的所有属性和方法，都能被对应的构造函数创建的实例对象共享（这就是 JavaScript 继承机制的基本设计），也就是说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。每一个构...

2020-02-14 12:57:16 126

原创 JavaScript函数面试题（一）

1.// 在javascript中，( )变量在函数外声明，并可从脚本的任意位置访问// A.局部// B.全局// C.typeOf// D.New// JavaScript中的变量，分为局部变量和全局变量，局部变量：在函数中声明的变量只在该函数内部可见，而全局变量：在任何函数之外声明的变量，都为全局变量，而全局变量在任意函数中都是可见的。// 3.typeof: typeof 操...

2020-02-13 16:27:36 637

原创 JavaScriptDOM对象（二）

节点间关系节点树：包含了所有节点（元素，文本）完整的结构parentNode直接指向父节点。firstNode和astNode分别指向第一个子节点和最后一个子节点。previousSibling和nextSibling分别表示指向上一个兄弟节点和下一个兄弟节点（同胞节点）元素树：仅包含元素节点的树形结构parentElement 直接指向父元素对象children ...

2020-01-04 09:57:14 143

原创 JavaScriptBOM对象（一）

DOM是什么？DOM本质上是一种接口（API)，是专门操作网页内容的API标准。DOM把整个页面映射为一个多层节点结构，HTML或XML页面中的每个组成部分都是某种类型的节点。借助DOM提供的API，可以删除、添加、替换或修改任何节点网页上的标签是一层层嵌套的，最外面的一层是，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的...

2019-12-30 15:15:19 243

原创五大浏览器

为什么要说是五大浏览器呢，现在的浏览器有很多，但这五个浏览器在市场上占的份额可比其他的多很多了，而且他们都有属于自己的内核浏览器的组成：也可以说是内核和外壳用户界面（User Interface）：包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外，其他显示的各个部分都属于用户界面。浏览器引擎（Browser engine）：在用户界面和渲染引擎（内核）之间传送...

2019-12-28 10:05:38 298

原创 JavaScript函数全局作用域

[[scope]]:每个javascript函数都是一个对象，对象中有些属性我们可以访问，但有些不可以，这些属性仅供javascript引擎存取，[[scope]]就是其中一个。[[scope]]指的就是我们所说的作用域,其中存储了运行期上下文的集合。即作用域决定了代码区块中变量和其他资源的可见性。全局作用域：全局作用域贯穿整个javascript文档，在所有函数声明或者大括号之外定义的变量，都...

2019-12-21 13:02:31 212

原创 JavaScript正则表达式

Regular Expression 使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。按某种规则去匹配符合条件的字符串。不同编程语言的正则表达式略有不同。JavaScript通过内置对象 RegExp 支持正则表达式，有两种方法实例化RegExp对象：字面量和构造函数。// 实例化一个正则表达式，匹配字符串中的is单词 var reg = /\b[is]\b/g; var s...

2019-12-21 11:31:25 121

原创 JavaScript API

api是什么？Application Programming Interface，应用程序编程接口。就是说它能给你提供一些方法，使你的开发变得简洁。它并不是什么技术，说白了就是一种语言提供的默认的方法的集合。JavaScript数组常用的API有： join, push, pop, unshift, shift, concat, slice，splice, reverse, sortjoin...

2019-12-14 15:59:01 172

原创 JavaScript数组类型

数组是内存里面连续储存多个数据的空间数组是数据的有序列表，数组中的每一个值叫做元素，每一个元素的都有一个属于自己的位置，这个位置叫索引（下标），而且索引是从0开始的。数组中存储的元素可以是不同类型数组的长度(元素的个数)可以动态改变。var arr = [];//创建一个空数组console.log(arr.length); // 数组.length 是获得其长度（元素个数）var arr...

2019-12-11 20:12:31 209

原创 JavaScript数据类型

JavaScript数据类型JavaScript的数据类型有基本数据类型和引用数据类型基本数据类型中有：Number（数字类型），Boolean（布尔类型），String（字符串类型），undefined，null。引用类型中有：object（对象类型），array（数组类型），function（函数类型）。Number（数字类型）数字类型就是给变量赋的值是一个整数或者小数NaN：代表...

2019-12-07 10:06:06 92

原创 html的图像，超链接，表格，表单

**** 今天学习了图像，超链接，表格，表单。图片元素：******imgsrc：指定要显示的图片的urlalt：当图片无法显示的时候用文字去解释它width:宽度height：高度注意：如果只改变 width或者height中一个属性的化那么另一个属性会跟着等比缩放title：当鼠标指向时提示的文字超链接内容href:链接的urltraget:指定打开新网页的形式_s...

2019-12-06 11:33:08 470

原创 JavaScript循环

JavaScript的循环有while循环，for循环，do while 循环为什么要循环呢？是因为有些代码在运行的过程中要重复执行如果不用这些循环的话反复的写同样的代码这样会显得代码贼复杂，所以还是用循环来简介代码量也容易找到错误的所在。while循环 while循环的语法结构为while(boolen的条件表达式){要循环的代码块}while循环在运行的时候会执行括号里面...

2019-12-06 11:30:46 129

原创 JavaScript运算符

JavaScript中的运算符有算数运算符关系运算符逻辑运算符1. 算数运算符+ - * / % ++ –+ - * / % 这几个是和数学上的加减乘除余一样的例：<script> var a = 10; var b = 20; var c = a + b; document.write(c);</script>结果为c = 10 +...

2019-12-05 21:00:33 112

空空如也

空空如也