jennyya-CSDN博客

原创 ECharts学习记录

大屏项目中ECharts记录：1、坐标轴显示不显示问题// X轴xAxis: [{ axisLine: { //关键设置，不显示X轴线条 show: false }, axisTick: { //关键设置，坐标轴刻度也不显示 show: false },}],// Y轴yAxis: [{ axisLine: { //关键设置，不显示Y轴线条 show: false }, axisTick: { //关键设置，坐标轴刻度也不显示 show: false },

2020-12-04 17:53:57 181

原创 mysql基础操作

插入数据：插入多条数据INSERT INTO table_name(field1,field2 ) VALUES ( valueA1,valueA2),(valueA1,valueA2)插入一条数据INSERT INTO table_name(field1,field2 ) VALUES ( valueA1,valueA2)查询：无条件查询一个表中所有数据select * ...

2020-01-17 15:50:39 200

原创利用css3中的animation来模拟input中的光标闪烁动效

需求：实现鼠标点击这个横线的时候，左侧的蓝色条模拟input中的光标闪烁。结构： <span class="wrapper"> <img src=""> </span>动效：img{ animation:cursorImg 1s infinite steps(1, start); ...

2019-11-28 17:27:41 4065

原创单页面应用

单页面应用:Single Page Application。即一个项目中只有一个.html文件。优点：1良好的交互体验：不需要重新刷新页面，页面显示流畅,通过axios/ajax异步获取数据。2前后端分离。3减轻服务器压力:服务器只需要提供数据即可。4同一套后端代码即可适用于pc端、手机端等。缺点：不能使用浏览器的前进后退功能。不利于seo优化。由于所有的内容都在一...

2019-11-26 14:28:22 145

原创 vue-pdf 预览pdf格式的文件

需求：预览pdf格式的文件实现：一安装npm install --save vue-pdf二引入import pdf from 'vue-pdf' // 哪个组件用到在那个里面引入即可 <div class="form"> <p class="arrow" v-if="pageTotalNum>1"...

2019-08-15 13:46:39 1278 2

原创 QRCode 实现绘制二维码

需求：vue+element项目中实现点击按钮下载两张二维码。实现：一安装：npm i qrcodejs2二引入：import QRCode from 'qrcodejs2'<el-button @click="downQrCode()" style='border-radius: 4px' size="mini">点击下载</el-but...

2019-08-15 11:00:12 470

转载前端ui框架element Upload 上传文件-限制上传文件类型

<el-upload class="upload-demo upPic" :action="upload_file_urlroot" multiple :limit="1" accept=".pdf" :on-success="handleAvatarSuccess" :on-error="handleQuesError...

2019-08-06 18:26:58 3319 6

原创 vue 脚手架

全局安装环境npm install vue-cli -g版本号检查vue -V项目构建npm init webpack name 官方模板更适合于初学者npm init webpack-simple name 简易版本需要自己配置的比较多项目启动npm run dev安装axiosnpm install axios --save-d...

2019-07-12 11:53:34 112

转载前端开发中的背景图和img标签的区别

1、img是html标签，是网页结构中的一部分，会随着jtml结构一起加载背景图作为css样式的一部分，会在结构加载完成后开始加载。2、img标签在加载失败的时候会有一个撕裂的小图标3、从后台获取的图片一般用img标签显示。4、何时使用img何时使用背景图使用img标签：作为网页结构的一部分图片进行缩放操作后台传过来的数据 ...

2019-07-12 11:52:53 991

原创元素垂直居中

flex 布局 #hovertreetf { border: 1px solid red; width: 120px; height: 120px; display: flex; align-items: center; justify-content:center; } .b...

2019-03-21 11:49:36 183

原创高度塌陷--清除浮动解决方法

高度塌陷：父元素高度自适应，子元素float,造成父元素高度为0；最简单的办法 overflow: hidden;.box{ width: 500px; border: 1px solid black; overflow: hidden;} p{ width:100px ; height: 20px; ba...

2019-03-21 11:42:09 227

原创跨域

同源：协议域名端口号都一致。由于浏览器受到同源策源的影响，在访问其他主机上的数据时会受到限制，所以引入了跨域的解决机制。有以下三种解决方法：jsonp、cors（跨域资源共享）、服务器代理。jsonp定义： json with padding 获取后台json格式的数据用一个东西把json数据包裹起来。jsonp原理：动态创建script标签（利用script标签的src属...

2018-12-11 11:34:00 133

原创事件冒泡和事件委托

事件冒泡：父子元素绑定了相同的事件。子级元素的某个事件被触发，它的上级元素的该事件也被递归执行。事件捕获：从document到触发事件的那个节点，即自上而下的去触发事件。与事件冒泡正好相反事件委托：利用事件冒泡的原理，把本该加载子元素身上的事件，使其加在父元素身上。 ...

2018-12-11 10:13:16 206

原创伪数组

定义:1、拥有lengt的属性。2、不具有数组所具有的方法。伪数组其实是一个Object，其中典型的是arguments,其次还有通过document.getElementsByTags得到的列表。3、判断是否是数组的方法：Array.isArray。4、每个函数都有一个arguments的属性，他表示的是函数的实参集合.适用于函数参数无法确定个数的情况下。5、将argu...

2018-12-10 15:48:27 510

原创 js中的静态方法和实例方法jQuery中$.fn.extend()和$.extend()的区别

静态方法：给类添加的方法，或者是类可以调用的方法，静态成员只在内存中占一块区域。实例方法：类实例化后对象的方法，或者说是类实例对象调用的方法。每创建一个实例，都会在内存中为非静态成员分配一个存储空间。function Foo(){}Foo.jingtai=function(){ console.log("静态方法")}Foo.prototype.shilihua=fun...

2018-12-08 15:57:36 276

原创闭包

定义：能够在函数的外部访问该函数内部变量的函数成为闭包函数。一个经典的闭包例子：点击ul下的li时alert其index值。html:<ul> <li>1</li> <li>2</li> <li>3</li></ul>js: var ul=document

2018-12-05 15:36:00 125

原创 mongodb安装

1、先去官网下载，然后点击 Custom 2我是把mongodb安装到了D盘下 3创建目录 data,里面创建一个db文件夹即：D：data/db，然后一路点击下一步知道完成。 4完成之后就可以看到D:\data\db文件里面有一个bin文件夹，切记在bin文件夹中先打开mongod.exe,在打开mongo.exe。 5浏览器中输入 127.0.0.1...

2018-12-05 14:33:54 102

原创关于SQL语句的基础操作

今天看到了公司里面一些sql语句对于数据的操作，打算重新温习一下。SQL server与MY sql的区别。MY sql：操作简单，容易上手，但是对于一些海量数据的处理来说，SQL server 稳定，运行速度快，大型项目的话建议使用SQL server。SQLserver和MY sql都属于关系型数据库。它的一个最明显的标志就是是，数据是通过表单进行存储，有行和列之分。Mongo...

2018-12-04 15:57:33 154

原创 es7

今天在网上看到了ES7，了解了一些新增的特性，对比ES6做一些总结。1 数组的方法：includes，主要是用来判断一个值是否存在数组里，返回的结果值是true/false。其实与indexOf()相似一个参数时['1', '2', '3'].includes('1') // true['1', '2', '3'].includes('4') // false...

2018-12-04 10:03:01 323

原创正则常用的方法总结

正则对象常用的方法一 test方法：检测某个字符串是否匹配，有的话返回true，没有的话返回false。接受一个字符串作为参数。二exec方法：接受的是字符串，返回的结果是数组。这个数组是一个对象，该方法中的正则对象如果不是全局匹配，即没有g修饰符，则每次调用只会从字符串开头处匹配第一个结果，且每次调用结果都是一样的。只有指定为全局匹配，才能够按照从左往右依次去匹配，每次调用匹配一个结果。...

2018-12-03 18:02:43 744

原创文档碎片

document.createDocumentFragment() 文档碎片大量操作Dom时可用到。下面举了一个简单的例子<div class="list"> </div>var oDiv =document.getElementsByClassName("list")[0];var oFragment=document.createDocu...

2018-11-11 16:26:16 174

原创原生js实现进度条

只是一个练习，比较简陋样式和结构如下： <style> .bar{ width: 300px; height: 30px; border: 1px solid black; border-radius: 5px; background:...

2018-11-11 16:09:17 999

原创 DOM中关于属性的基本操作

1、获取属性<div id="box" class="test">11111</div>var oDiv=document.getElementById("box");oDiv.idoDiv.className2、自定义属性的一些操作<div id="box" class="test" data-id="22

2018-11-11 16:04:13 120

原创 forEach() map() for() 小结

forEach() map()相同点：1都是es5中新增的遍历数组的方法2都是有三个参数，依次是 item(当前项) i(索引) arr(元素组)3匿名函数中this都指向windowforEach() map()区别：forEach()返回值是undefinedmap可以返回新数组，且元素组不发生改变forEach() map() for()比较forEach...

2018-11-09 15:17:00 149

原创关于网站性能优化问题

1压缩CSS和JS 内容以减少HTTP的请求次数1CSS Sprites：CSS Sprites是减少图像请求的有效方法。把所有的背景图像都放到一个图片文件中，然后通过CSS的background-image和background-position属性来显示图片的不同部分;2合并文件：使用webpack打包工具把css、js文件整合到一个文件中。3data嵌入图片：base642浏览器缓存...

2018-11-09 14:52:17 158

原创 DOM知识点总结(一)

Document Object Model 文档对象模型符合w3c标准1、DOM节点类型有两种元素:标签文本2、DOM的基本操作查询 document.getElementById(&amp;quot;box&amp;quot;) //ID获取表示的是一个对象 document.getElementsByClassName()[0] //类名获取 do...

2018-11-08 21:51:43 236

原创去除富文本中的标签

方式一：利用innerText,jQuery利用text()innerText会自动剔除html标签<span class='content_hidden' style="display:none">${info.content}</span><div class="fixed3" id="content_div" style="height:auto;&q

2018-11-08 21:22:26 5967

原创个人对Bom常用的方法总结

定义：BOM（Browser Object Model）是浏览器对象模型。提供了独立于内容与浏览器窗口进行交互的对象，他的核心对象就是window（顶层对象）。js语法的标准化组织是ECMA,但是BOM没有规范标准，所以提供了的方法会存在兼容性问题。BOM是由一系列的对象组成。每个对象都提供了自己属性和方法。有三个节点：元素节点、文本节点、属性节点BOM结构图 ...

2018-11-08 17:12:33 1826

原创事件源、事件对象、阻止事件冒泡、阻止浏览器默认行为、Dom2级事件兼容写法

1事件对象的获取var e =e|event;2事件源的获取 var target=e.target||e.srcElemet;3阻止事件冒泡e.cancelBubble=true; iee.stoppropagation()4阻止浏览器默认行为推荐使用第三种e.preventDefault();e.returnValue=false;re...

2018-11-07 21:21:43 432

原创事件绑定的那些小事

事件绑定和普通事件的区别普通点击事件>> <button id="btn">点击事件</button> var btn=document.getElementById("btn"); btn.onclick=function(){ console.log(1) } btn.onclick=function(){ ...

2018-11-07 21:03:20 109

原创几款前端常用的UI框架总结

UI框架总结1、layUi是2016年国人开发的一款框架,门槛低，拿来即用，更多是为服务端程序员量身定做。适合 PC 端后台系统与前台界面的速成开发方案，是对后端开发人员更加友好，不太利于前端的交互。轻量级。目前更新到了2.0的版本2、Bootstrap做网站，类似官网，它能够做到响应式布局同时满足pc端和移动端。更加成熟3、mint-ui 配合vue使用的使用的移动端组件库，安...

2018-11-07 19:49:16 5163

原创 h5新增加的存储方法

h4中使用的cookie把用户信息保存在客户端浏览器，但是它受到很多限制。大小：最多能存储4k带宽：它是随着http请求一起发送到服务器的，因此浪费一部分的带宽。复杂度：操作复杂。h5新增加了一种在客户端本地存储数据的方法 webstorange,分两种形式sessionStorage和localStoragesessionStorage：将数据保存在session对象中...

2018-11-03 21:03:46 1609

原创箭头函数特点

箭头函数是匿名函数.1不能作为构造函数，不能使用newlet foo=()=>{}var newFoo=new foo()//foo is not a construcotr2不能使用argumetns,取而代之用rest参数...解决let C = (...c) => { console.log(c);}C(1,2,3,3)3不绑定this，会捕...

2018-11-03 20:32:54 6617

原创 H5中的es6新特性浅析

结构标签:header、footer、aside、section、article、nav、figure表单标签：email、number、range、date、search、color媒体标签：video、audio、embed其他功能标签：process（进度条） mark（标记）、canvas变量的声明let、const:let类似于var,但是作用域只在所在的代码块内有...

2018-11-03 17:43:24 1202

原创 Promise封装axios

function axios (url,params){ return new Promise((resolve,reject)=>{ axios.get(url,params).then(function(response){ resolve(response.data) }) .catch(function(err){ reject(err) }) }...

2018-11-03 15:47:56 1805

原创 ajax、fetch、axios区别

Jquery中的ajax $.ajax({ type:"get", url:"", async:true, data:{}, dataType:"", success:function(){ } }); type 以什么样的方式获取数据，是get或post url 必填项，规定把请求发送到哪个 URL。 axync...

2018-11-03 15:25:56 1939

原创 canves小球碰壁反弹

var cvs=document.getElementById("box");//获取canves元素 var ctx=cvs.getContext("2d");//创建2d框架 var x=0,y=0,l=true,r=true;//核心代码如下 function move(){ //绘画下一个之前先清除 ctx.clearRect(0,0,cvs....

2018-11-03 10:36:26 407

原创 call apply bind区分

//call apply bind 相同点this指向发生改变 var obj1={ name:"obj1", sayhello:function(){ console.log(this); }, ...

2018-09-03 15:31:59 193

原创 js中this指向问题

//1普通函数里谁调用指向谁 var obj={ name:"hello", age:1, sayHello:function(){ console.log(this); } ...

2018-09-03 15:30:25 222

原创 js继承基础解析

原型继承： function Person(name,age){ this.name= name; this.age = age; } Person.prototype.sayHello=function(){ console.log...

2018-08-29 21:20:21 209

空空如也

空空如也