自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 问答 (1)
  • 收藏
  • 关注

原创 百度地图地址换坐标

基于百度地图 API ,通过地址查询经纬度(不带地图)1.先获取百度地图秘钥 ak(不细说)http://lbsyun.baidu.com/apiconsole/key?application=key#/home2.解决跨域问题基于vue开发安装npm install vue-jsonp --savemain.js引入import { VueJsonp } from 'vue-jsonp'Vue.use(VueJsonp)看到很多博文都是这么引入的 import Vue

2020-12-03 17:59:20 317

原创 基于element省市区级联组件

基于 element UI 的 3 个 select 选择器级联官网的是的一个select 选择器,一般的 UI 设计都是 3 个 select 选择器,因此使用 element 提供的省份数据结构,粗略的做了一个。效果图:1.下载数据npm install element-china-area-data -S2.引入数据import { regionData } from 'element-china-area-data'3.完整代码<template> <di

2020-12-03 14:50:28 1099 1

原创 终止基于axios正在进行的请求

终止基于axios的未完成的http请求关键词:CancelToken source source.token 参考地址应用场景:tab页频繁切换,页面的切换,用于终止正在挂起的请求项目的如何应用配置参数axios({ method: 'post', url: url, withCredentials: false, params: params, data: data, cancelTo

2020-09-11 11:17:13 3363

原创 Git常用操作

命令行配置SSH密钥对ssh-keygen -t rsa -C xxx.@… (邮箱) ----3次回车cat ~/.ssh/id_rsa.pub 并复制生成的内容生成的秘钥对在 C:\Users\LH\.ssh 电脑不同,路径会不一样到 Github 中添加 ssh key个人------> settings-----> SSH ...

2019-12-31 10:24:17 182

原创 文本省略号

文本溢出设置必须要配合容器溢出使用 (overflow-hidden)属性:text-overflow取值:- clip —> 简单的裁剪- elipsis —> 出现省略号单行出现省略号容器要有widthoverflow:hidden不换行 white-space:nowrap出现省略号 text-overflow:elipsis多行出现省...

2019-10-11 19:31:57 218

原创 NodeJS简单爬数据

NodeJS简单爬虫数据做假数据是不是很麻烦,直接自己爬就好了。//test.js// 要先npm安装这些第三方模块const request = require('request');const fs = require('fs');const cheerio = require('cheerio');//爬取 http://b.boshiying.com/mobile/ 的数...

2019-10-08 21:30:31 217

原创 组件

组件通俗的理解就是类似于在底层封装好,制作属于自己的标签,在调用时,和使用原生的标签一样,例<my-com></my-com>,全局组件 Vue.component(name,options)全局都能使用的组件,想要使用都是要先实例化的name 组件名options配置参数template : 模板,只能有一个跟节点(最外层没有兄弟元素)定义全局...

2019-09-30 14:11:40 178

原创 自定义指令

自定义指令全局指令全局都可以使用的指令格式:Vue.directive(name,option){}name 指令名字, 使用方式 v-nameoptionObject:放钩子函数(也叫生命周期函数)Function:默认为bind 和 update的钩子函数//全局指令的定义 Vue.directive('lh',{ //v-ih 为指令名字,调...

2019-09-30 14:03:19 207

原创 vue常用指令

Vue常用指令指令的完整格式v-else //什么都没有,无值v-text="val" //有值v-bind:src="val" //有参,有值v-on:click.stop="val" //有值,有参,有修饰符常用指令v-show取值true || false 控制显示或者隐藏,配合点击事件(点击事件控制取值)可实现一个开关的切换,效果就是...

2019-09-30 13:56:48 324

原创 requireJS

模块化开发之requireJS规范require官网require中文网什么情况用require.js?当一个页面中过多的<script src=""></script>,js文件加载是同步的,加载的时候,浏览器会停止网页渲染,加载文件越多,网页失去响应的时间就会越长,而且如果各个模块(js)之间存在相互引用的依赖关系,引入得顺序不对就会报错,可以考虑用requir...

2019-09-18 20:53:45 439

原创 Git使用

Git入门Git,分布式管理的方式托管代码,设么作用、优点就不说了,知道git的自然也知道其好处了。Git有很多种可视化界面(GUI界面)工具。但是通过命令的方式,速度、逼格都会高很多。我现在用的版本是:Git-2.14.2.2-64-bit.exe。百度下载安装好。安装好之后,在你需要进行命令操作的文件夹中右键选择Git Bash Here,(当然你也可以在其他地方打开,再一层一层目录进...

2019-09-10 08:45:36 431

原创 字体图标的使用

字体图标第一步:定义字体图标,并导入字体文件先把字体文件拷贝到项目文件夹,并在样式代码中添加以下代码 @font-face{ font-family: "icon"; src:url('../images/iconfont.eot'); src:url('../images/iconfont.eot?#iefix') f...

2019-08-22 18:51:13 302

原创 楼层跳跃

说明书楼层跳跃插件使用说明:*第一步:复制html结构,有多少层楼就保留多少个结构。*第二步,复制样式,注意类名和样式的优先级问题。f1~f5 类名是为了好看加的,实际使用删除*第三步:引入js(插件)*第四步:调用即可,无需传参,FloorJump();html<html lang="en"><head> <meta charset="...

2019-08-19 19:34:57 248

原创 tab切换

使用前/*tab(boxId, boxWidth, tabList)参数说明: *boxId:需要做选项卡的盒子的ID名字, *boxWidth:盒子的宽度,高度自适应; *tabList:选项卡的选项。*本插件的选项是通过渲染的方式生成的。*盒子需要复制。 *第n个选项卡*//*此插件的使用,第一步:复制html结构,注意选项和盒子数量要相互匹...

2019-08-19 19:31:23 413

原创 仅居中的弹窗

使用前必读:居中窗口弹出插件插件功能:*动态居中的弹窗*左上角有关闭按钮*Esc可退出参数说明: popupWindow(‘btn’, { ‘width’: ‘300’, ‘height’: ‘300’ });*btn: id 名*{ ‘width’: ‘300’ , ‘height’: ‘300’},弹出的窗口的尺寸,不写时,默认值为:auto使用步骤:第一步:复制ht...

2019-08-19 19:23:12 257

原创 js拖拽

给盒子添加能够拖拽的功能:html代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽功能</title> <style> * { margin: ...

2019-08-19 19:13:22 225

原创 回到顶部

原生 js 回到顶部插件所谓插件,就是封装好的函数,一些比较常用又强大的功能,就通俗称为插件,像放大镜、轮播图等,各种各样的功能,都可以封装起来,需要用到是,调用即可。可以有参,也可以无参。html结构<span id="totop">回到顶部</span>css样式 * { margin: 0; padding: 0; } bod...

2019-08-19 15:56:34 194

原创 ES5

ES5兼容性支持ES5的浏览器有:Opera 11.60+,IE9+(IE9 不支持严格模式),Firefox 4+ ,Safari 5.1+,Chrome 13.加载事件页面渲染步骤解析HTML结构加载外部脚本和样式表文件解析并执行部分脚本代码 (写在页面内的脚本,如自调用函数)DOM树构建(body里面元素构建完成)完成加载图片等外部文件页面加载完毕document事...

2019-08-15 08:47:43 631

原创 正则表达式

正则表达式​ 正则(RegExp是一个描述字符模式的对象。我理解为在正式场合的规则,它就是一条规则,来约束内容的。前端用正则的地方基本就是表单的验证 ,敏感词处理,用的都是简单的正则,python爬虫就用到了很深奥的正则。正则用处够进行强大的“模式匹配”和“文本检索与替换”功能,采用正则表达式会使得数据校验的工作量大大减轻。构建方式RegExp构造函数 (两个参数)第一参数...

2019-08-13 10:26:11 282

原创 事件监听

事件监听与捕获事件监听器,是什么,是监听事件的函数,给节点绑定事件监听器 ,当监听到有事件时就立即调用处理函数。混合开发用,安全。实例://html结构,通过一个按钮来体验一波。 <input type="button" value="点击" id="btn">A,B两个人混合开发这个按钮的不同功能;btn.onclick = function () { aler...

2019-08-12 18:41:05 503

原创 阻止默认行为

阻止默认行为:有些时候会莫名其妙的出现一个bug,自己的代码语法 ,逻辑都没有出错,也许就是浏览器的默认行为导致的。常见的就有;链接的跳转表单的提交右键菜单文本的选择阻止默认行为的方法标准:event.preventDefault();IE8-:event.returnValue = false;通用:retrun false可以考虑做成兼容封装 function s...

2019-08-12 11:01:52 257

原创 事件源对象

事件源对象事件源对象,被点击的那个对象(触发事件的对象),可以获取属性等操作。标准:event.targetIE8-:event.srcElement//对box节点设置事件委托box.onclick = function (ev) { console.log(ev.target); //事件源对象:被点击的那个对象 console.log(ev.target.cl...

2019-08-12 10:32:13 504

原创 事件冒泡

事件冒泡它是什么?​ 什么是事件冒泡,事件沿着DOM树向这个对象的父级传播。(通俗记忆:气体(泡泡)在水底往水面上冒,就是冒泡)事件冒泡指事件往父级元素方向冒,这就是事件冒泡,需要注意的是冒泡的只是事件,并不事件绑定的处理函数。不管是父级以上元素是否绑定了事件,冒泡都是存在的。只有人为手动的添加代码去阻止,否则会一直冒泡到window对象,(IE8-到document对象)。事件冒泡是一...

2019-08-12 10:31:37 832

原创 Event事件

Event对象什么是event对象事件执行过程中的状态,用来保存当前事件的信息对象如何获取event对象​ 在事件处理函数中的第一个参数。 box.onclick = function (e) { e = e || window.event; //兼容处理,IE8- :window.event }Event对象详情鼠标Event对象 bot...

2019-08-10 17:03:57 212

原创 JS事件汇总

事件什么是事件,事件就是一种行为,每种编程语言都有自己的事件,前后端都有,只要是有可视化界面的都必然会有事件。在前端网页中,每个元素都可以产生某种可以触发的JavaScript函数的事件。事件绑定方式: 节点.on+事件名称 = 事件处理函数;事件只是一种行为,决定了触发的方式、过程,需要绑定在节点上才会生效。div.onclick = funtion (){ console.log('你...

2019-08-10 15:45:41 340

原创 table对象

table对象table对象属性&方法rows 返回包含表格中所有行的一个数组tBodies 返回包含表格中所有 tbody 的一个数组insertRow(index) 在表格中插入一个新行。deleteRow(index) 从表格删除一行。tr对象属性&方法cells 返回包含表格中所有单元格的一个数组rowIndex 返回该行在表中的位置sectionR...

2019-08-10 15:42:50 331

原创 DOM

DOMDOM是Document Object Model(文档对象模型),W3C国际组织的一套Web标准。是针对HTML和XML文档的一个API,它定义了访问HTML文档对象的一套属性、方法和事件。常说要减少DOM的操作,那么DOM的操作有那些呢,DOM操作的就是对节点的操作,四个字概括:增、删、查、改。那到底为何要减少DOM的操作,因为DOM操作慢,看浏览器的渲染原理:解析HTML结构...

2019-08-10 15:40:49 189

原创 event事件的各种距离含义

​ 通过js控制页面布局时,会有动态获取系统的距离,总结了一下几种方法。以下都是都是不带参数的1、浏览器可视化窗口大小​ 所谓可视化是指我们能够看得到的地方,用来展示html内容窗口,其中不包括检查部分和浏览器头部部分的。window.innerHeight 浏览器可视化窗口的高度,window.innerWidth 浏览器可视化窗口的宽幅2、当前浏览器大小​ 指的是整...

2019-08-10 10:51:41 846

原创 前端学习便捷软件,插件

前端学习中,要用到各种各样的软件和插件、好的软件和插件能够提高我们的开发速度。在此分享几个我用过的软件和插件,觉得很方便。​ 当然,有些软件或插件只是对初学者学习有用,在实际开发中,有UI给psd设计图,在各种协作平台(比如蓝湖)中各种属性及其属性值一目了然。​ 话有点多了,看第一软件:PxCook。这是一个测量工具,几M的软件,比ps方便多了。看效果就知道了。PxCook,测量工具第一种...

2019-08-06 10:25:42 281

原创 BOM浏览器对像模型

BOM浏览器对像模型 (Browser Object Model (BOM))js : ECMAScript + BOM + DOMBOM :js 赋予我们操控浏览器的能力:打开新窗口、赋值、粘贴、上下一页、获取url、页面带数据跳转、页面滚动、获取屏幕的尺寸、获取鼠标的坐标等windows对象{属性​ 方法​ 子对象​ 事件}注意事项:定义在全局的环境下的变量都会成为wi...

2019-08-05 10:57:06 151

原创 吸顶菜单

​ 吸顶菜单,现在的pc端网页也是很常用的一个功能,干货来了,直接上源码,可以做得更完美的,原本一套样式,吸顶时,再给一套样式,可自由发挥。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>吸顶菜单</ti...

2019-08-05 10:47:49 510

原创 js简单实现楼层跳跃

楼层跳跃的简单案例。<html lang="en"><head> <meta charset="UTF-8"> <title>楼层跳跃</title> <style> * { margin: 0; padding: 0; ...

2019-08-05 10:45:05 1103

原创 时间、日期对像

时间、日期对象时间获取时间戳​ var data = new Date() //可获取完整的时间戳 年月日是分秒获取具体时间 var date = new Date(); var year = date.getFullYear();//年 var month = date.getMonth() + 1;//月 月份系统0开始 var day = d...

2019-08-05 10:08:57 184

原创 js中的Math常用方法

Math 数学对象Math.PI 圆周率pi console.log(Math.PI);//3.141592653589793round( ) 四舍五入 console.log(Math.round(4.999));//5ceil() 向上取整 Ceiling翻译为天花板,向上取整,比原来的数的大console.log(Math.ceil(4.1111));/...

2019-08-05 08:25:45 213

原创 JS对象

原生JS对象声明字面量 var liangge = { 属性 :属性值, 属性 :属性值} 推荐写这种var obj1 = { age : 18, 'adr' : '北京', "gender" : '男', like : '男' }构造函数 var obj = new object(); //构造函...

2019-08-03 10:06:50 129

原创 js数组

数组arr.length //获取数组长度构造函数声明数组var arr = new Array(); //声明数组的同时都是可以初始化给数组赋值的数组的访问:arr[i] 二维的时候 arr [i] [j]数组常用的方法;数组名.方法() 的形式方法作用返回值原数组push ()尾部添加一个或多个数据,有参数组长度改变pop()删除...

2019-07-31 08:28:21 365

原创 js基础

JS基础用途:主要目的是,验证发往服务器端的数据、增加 Web互动、加强用户体验度等。可用于开发网站、游戏、移动端app等编写位置:1.在script标签中引入,(css的为style.)<script type="text/javascript"> alert('你好') //altert 为一个弹窗,不建议用来调试代码,会阻塞后面代码</script&...

2019-07-22 14:51:24 232

原创 前端开发静态常用知识

基础知识建站流程:注册域名(网址)-----租用服务器 ------ 网站建设-----网站推广------- 网站维护基本结构如下:<!DOCTYPE html> html5的声明<html lang="en"> <head> <meta charset="UTF-8"> 编码格式 <title>...

2019-07-19 13:08:29 1094

原创 css盒子居中问题

静态页面布局中通过css控制盒子居中的常用方法。在静态页面不居中,总会遇到许许多多的居中布局,在导航条、图文解说等,都需要用居中(本文说的居中为垂直和水平都是居中的),在此整理出四种居中的方法,提供参考。f话不多说,先上基本代码:<!DOCTYPE html><html lang="en"><head> <meta charset="U...

2019-07-18 08:34:31 1102

原创 前端开发vscode的几个配置。

一开始学前端时,通过简单的配置,能够提高速度,节约时间,当然,如果是初学者,还是建议在写代码的时候,不要有投机取巧,各种标签,属性,属性值等都将其完全写出来,不要通过代码提示的方式码代码。有各种各样的编辑器可以码代码,vscode、sublime常用些,当然,这些都是都是按照个人喜欢的。编辑器 优势 不足 vscode 较轻量级,支持原生的typescr...

2019-07-15 13:17:55 1344

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除