![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端
文章平均质量分 55
|不勤
寻找志同道合的伙伴们
展开
-
webpack基本使用
1.webpack基本使用全局或者局部安装 webpack和webpack-clinpm init :生成package.json文件dependencies 为生产环境依赖devDependencies 为开发环境依赖webpack.config.js 配置文件输入 webpack 命令自动寻找配置文件配置文件信息的六个概念:入口(entry)输出(output)loader 插件(plugin)模式(mode)浏览器兼容性(browser compatibi原创 2021-01-02 11:51:39 · 134 阅读 · 0 评论 -
jquery-trigger
1. trigger简单使用介绍trigger() 方法触发被选元素的指定事件类型,也可以是自定义事件$(selector).trigger(event,[param1,param2,…])selector : 选择器event : (必选) 定义的事件params: (可选) 需要的参数$(.demo).on(function(e,a,b,c){ console.log(e) console.log(a,b,c)//10,20,30 }) $(.demo).trigger('原创 2020-05-21 22:39:12 · 344 阅读 · 0 评论 -
ES6-Class
1. Class 铺垫2. 回顾了解ES5构造函数私有属性和公有属性私有属性继承和公有属性继承 Union.prototype.public = function(){ console.log('公有属性访问') } function Union(){ this.name = 'LOL', t...原创 2019-06-28 22:01:59 · 120 阅读 · 0 评论 -
css3-transition
1. transition (过渡)transition 四个值依次是:transition-property: 规定应用过渡的 CSS 属性的名称。transition-duration: 定义过渡效果花费的时间。默认是 0。transition-timing-function: 规定过渡效果的时间曲线。默认是 “ease”。linear 规定以相同速度开始至结束的过渡效果e...原创 2019-06-28 01:01:14 · 228 阅读 · 0 评论 -
CSS3-弹性盒模型
1. flex 和 inline-flexflex: 将对象作为弹性伸缩盒显示inline-flex:将对象作为内联块级弹性伸缩盒显示2. flex-direction (属性规定项目的方向)row (默认值); 灵活的项目将水平显示,正如一个行一样row-reverse 与 row 相同,但是以相反的顺序。 尝试一下column 灵活的项目将垂直显示,正如一个列一样colum...原创 2019-06-10 03:33:55 · 217 阅读 · 0 评论 -
CSS-标准盒模型和IE6混杂模式
1. w3c标准盒模型以宽度举例(高度是同理的)boxWidth = 设置的宽( width ) + 边框的两边 ( border * 2 ) + 内边距两边(padding * 2)boxContentWidth ( 盒子内容区宽 ) = boxWidth2. IE6混杂模式 (怪异模式)box-sizing: border-box 触发ie6混杂模型 (默认值是 content-...原创 2019-06-09 05:56:00 · 394 阅读 · 0 评论 -
ES6 运算符
1、… 运算符简介:… 运算符收集作用: <script> function sum(...arg){ console.log(arg) //打印一个数组 } sum(1,2,3) </script> function sum(a,b,...arg){ con...原创 2019-06-09 03:46:09 · 833 阅读 · 0 评论 -
html5 - 地理位置信息
1. navigator.geolocation <script> console.log(window.navigator.geolocation) //打印结果如下图 </script>2. getCurrentPosition (success,error,option)success 成功的回调函数error 调用失败的...原创 2019-06-08 04:59:51 · 323 阅读 · 0 评论 -
JS-Object.defineProperty
1. Object.defineProperty 简介不可配置:var a = 10 挂载到 window 上,执行 delete a 结果为false,枚举属性:var obj = { name : 'tzh', age : 20, __proto__ : { nihao : 'good' } ...原创 2019-05-29 19:06:57 · 166 阅读 · 0 评论 -
ES6-Promise
1. promise 简单介绍一般的绑定事件等,都是回调的机制,例如点击事件onclick,当绑定了点击事件之后,会开启另外一个线程去辅助执行。2.高阶函数的定义函数参数包含函数 或者 函数返回值是函数;一般可称为高阶函数loadshloadsh:是一个javascript 实用工具库,提供各种方法提升开发效率,提供after高阶函数的辅助回调操作(具体使用情况可以去官网...原创 2019-07-29 07:39:49 · 221 阅读 · 0 评论 -
HTML5-canvas
1. 使用 canvas目前canvas还没有3d效果2. 绘制线段beginPath() 方法开始一条路径,或重置当前的路径。使用场景:实现的样式只是作用于当前路径时使用 <canvas width="300" height="300"></canvas>如果canvas标签里面没有设置width、height会出现像素的误差;用css样式设置的...原创 2019-07-30 07:54:14 · 82 阅读 · 0 评论 -
vue-列表过滤和排序
1. 列表过滤运用了Vue实例化的 computed (计算属性)例子: <div id="test"> <input type="text" v-model='searchName'> <ul> <li v-for= "(p,index) in filterP":key="index...原创 2019-08-12 21:55:32 · 659 阅读 · 0 评论 -
async和await
1. Promise 解决回调 const fs = require('fs') function myPromise(func){ return function(...arg){ return new Promise((res,rej)=>{ func(...arg,(err,data)=>{ ...原创 2019-08-10 21:27:37 · 199 阅读 · 0 评论 -
vue-表单数据
1. <div id="test"> <form action="" @submit.prevent="handleSubmit"><!--阻止了默认行为--> 用户名:<input type="text" v-model="username" /><br /> 密码:<input ty...原创 2019-08-13 19:52:53 · 168 阅读 · 0 评论 -
ES6-Generator
1. Generator 生成器2. Generator 基本使用 function *test(){ yield 'a' yield 'b' yield 'c' return 'd' } let oG = test() console.log(oG.next()) ...原创 2019-08-06 16:45:56 · 108 阅读 · 0 评论 -
ES6-Map存储
1. Map 简单介绍2.Map基本使用 let oMp = new Map([['name','tzh'],['age',18],['sex',true]]) console.log(oMp)对象作为属性值 let oMp = new Map([[{},'666']]) console.log(oMp)set设置属性和值 let oMp = new...原创 2019-08-05 17:51:28 · 590 阅读 · 0 评论 -
vue-基本使用
1.vue基本使用1.引入vue.js文件2.创建Vue实例对象(vm), 指定选项(配置)对象3.el : 指定dom标签容器的选择器4.data : 指定初始化状态数据的对象/函数(返回一个对象)5.在页面模板中使用{{}}或vue指令html文件 <div id="app"> <input type="text" v-model="...原创 2019-08-01 13:45:53 · 130 阅读 · 0 评论 -
前端模块化 之 CommonJs-AMD-CMD-ES6模块化
1. 模块化的一些方案防止变量冲突命名空间var obj1 = { a : 1, foo : function(){}}var obj2 = { a : 2, foo : function(){}}解决了变量的一些冲突,但是外部能够获取到私有变量和修改私有变量(obj1.a,obj2.a)闭包 (function(){ ...原创 2019-07-31 16:33:14 · 119 阅读 · 0 评论 -
ES6-Set存储
1. Set简单介绍浏览器内置的构造函数2. Set基本使用数组参数:let oS = new Set([1,2,3,[66,77,88],{name:'LOL'}]) //oS打印的结果如下图字符串参数: let oS = new Set('123')//打印结果如下图Set原型上面的方法:Set可以通过两种方式遍历;自身提供的forEach和es6提供的 fo...原创 2019-08-03 20:23:32 · 291 阅读 · 0 评论 -
七牛 - 网络资源上传文件
node 环境下使用七牛云服务器npm i qiniu -D创建各种上传凭证之前,我们需要定义好其中鉴权对象 var accessKey = "xxxxxxxxx"; //填入 accessKey var secretKey = "xxxxxxxxxx"; // 填入 secretKey //定义鉴权对象 var mac = new qin...原创 2020-12-16 02:27:53 · 616 阅读 · 0 评论 -
JS - Proxy
1. Proxy 简单介绍Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)Proxy 之 get 和 set 简单使用 var oData = { name: "tzh" }; var pro = new Proxy(oData, { set(target, key,...原创 2019-05-31 01:33:53 · 936 阅读 · 0 评论 -
jquery之html、text
1.jquery 之 html操作dom节点,使用html() 取值 或 赋值取值: 原始值;类型是字符串typeof $('ul').html() //类型是 stringhtml方法示例: <ul> <li>1</li> <li>2</li> <li>3&...原创 2019-05-21 20:23:17 · 102 阅读 · 0 评论 -
CSS3 border-image
1. border-image 属性是一个简写属性,用于设置以下属性:border-image-source填充渐变颜色或者是图片border-image-slice 四条切割线方向 上右下左如下图:border-image-slice:100 100 100 100 (不能写单位) 假设为300 * 300像素的图片 切割之后的元素往边框...原创 2019-05-21 02:16:43 · 135 阅读 · 0 评论 -
babel工具使用
1.npm i - D @babel/core此模块提供babel编译的核心功能2.npm i -D @babel/preset-env此模块提供插件的集合,依赖于@babel/core,可以根据自身业务需求安装插件3.npm i -D @babel/cli此模块提供npx babel指令命令行格式为:npx babel 当前编译文件 -o 编译后的文件安装@babel/cli...原创 2019-05-18 11:21:55 · 234 阅读 · 0 评论 -
CSS3 圆角与阴影
1. 决定 border-radius 的值是根据宽高计算的div{ width:100px; height:100px; border-radius:50%; /* border-radius: 50px;*/ /*根据自身宽高计算*/ }2. border-radius 四个方向值border-radius:10px四个方向的值都是10px;...原创 2019-05-20 23:55:26 · 442 阅读 · 0 评论 -
CSS3常用选择器
1.css3常用选择器:first-of-type 选中的元素在其类型中第一个元素不受其他元素节点的干扰:nth-last-child(n) 自然数从 1 开始 在其集合类中的最后一位开始算起:nth-of-type(n) n 自然数从 1 开始:empty 被选元素为空元素为空是指完全没有节点元素,注释也是元素为空:checked 选择器匹配每个选中的元素(仅适用...原创 2019-05-20 08:36:00 · 86 阅读 · 0 评论 -
css3多功能选择器
伪类 == 被动1. :not(选择元素):not(selector) 选择器匹配非指定元素/选择器的每个元素。小案例(最后的下边框去除):<style> ul{ width:300px; border:1px solid #999; } li{ height:50px; ...原创 2019-05-20 08:09:05 · 138 阅读 · 0 评论 -
CSS3兼容性
1.浏览器前缀缩写prefixbrowser-webkit-chrome、safari-moz-firefox-ms-IE-o-opera2.css3前缀由来css3 新标准制定出来后,由于各大厂商的先后使用了新标准,还有一部分厂商还没使用,先行使用新标准的厂商就制定了 前缀 来区分于其它厂商,后来新制定的标准慢慢普及,忽略前缀的写法就可以兼...原创 2019-05-20 01:38:34 · 292 阅读 · 0 评论 -
封装ajax
1.创建ajax对象var xhr = new XMLHttpRequest()IE浏览器上面 没有XMLHttpRequest 对象,需要做兼容处理IE提供的 ajax 对象 new ActiveXObject(‘Microsoft.XMLHttp’)2.初始化 open 方法使用 ajax对象 上的 open方法,open三个参数依次是:请求方式;常用的有 get 和 ...原创 2019-05-20 00:43:18 · 140 阅读 · 0 评论 -
mongodb开启服务教程
1. 安装 mongodb不同操作系统的 mongodb 版本按照网上教程提示安装2. 创建 MongoDB 数据存储目录MongoDB 数据存储目录不会自动创建,需要手动创建3. MongoDB 关联数据存储目录假设 MongoDB安装目录 和 数据存储目录都在 C 盘命令格式:MongoDB安装目录 + --dbpath + 数据存储目录 ; 代码示例如下:...原创 2019-05-22 05:30:55 · 397 阅读 · 0 评论 -
CSS3 之 background
1. background-image 引用background-image: url( xxx.jpg ) 可以引用多个元素background-image: url( xxx.jpg ) ,url(xxx.png)一个容器引用多张图片是在 css3 新增的一种功能,引用多张图片后,需要调整各自元素的位置,否则元素会重叠在一起。(在规范情况下很少使用!!!)一般在图片容错机制下...原创 2019-05-26 00:33:00 · 119 阅读 · 0 评论 -
ES6 之 symbol
1. symbol 使用基本数据类型有6种:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object) ES6新增了一种数据类型 symbolsymbol 使用时候不能 new ; 直接 symbol() ;例如:symbol(‘abc’) let os = Symbol('abc') console.log(typ...原创 2019-05-26 05:49:44 · 156 阅读 · 0 评论 -
JS 之 函数式编程
1. 函数组合应用由若干个纯函数、偏函数、柯里化函数组合成一个新的函数,同时,形成数据传递。挑选了一系列所需要的函数,把他们组合在一起,可以实现公共合作的效果。代码示例:function combination() { var args = Array.prototype.slice.call(arguments); return function(x)...原创 2019-08-19 16:44:42 · 152 阅读 · 0 评论 -
git和GitHub相关联
1.git基础概念git是分布式存储管理,客服端存的是原始代码的完整镜像,存储到本地,每一个客户的代码仓库都是一样的,任何部分代码出现问题,可以使用其他客户端代码修复2初始化本地仓库git init 生成一个 .git 的隐藏文件3.GitHub远程仓库使用注册登录,创建一个仓库本地环境配置和秘钥SSH配置git命令行输入 ssh-Keygen生成一个.ssh的文件,文件...原创 2019-05-18 20:35:04 · 109 阅读 · 0 评论 -
jquery 之 val
1. val 的应用场景用以下的html进行相关的操作form action="./" method="GET"> <h3>选择你最喜欢的明星</h3> <select name="star" id=""><!--下拉菜单--> <option value="s">詹姆斯</option...原创 2019-05-23 16:42:15 · 101 阅读 · 0 评论 -
ES6-ES7 Decorator基础应用
1.安装编译Decorator所需要的依赖项2.npx babel 当前需要编译文件 -o 编译后的文件浏览器无法识别es7的语言,需要通过babel工具辅助编译,业务需求使用编译后的文件3.Decorator代码实例演示如下代码class Decoration { constructor() { this.keyValue = ""; }...原创 2019-05-18 17:12:11 · 254 阅读 · 0 评论 -
jquery 之 css 的 attr 和 prop
1.css样式赋值 (css方法是可以链式调用的)字符串样式:$('div').css('width','100px')多样式兼容:普遍写法 (options)$('div').css({width:'100px',height:'100px'})属性值 += / -= 的形式 (animate)在原有基础上增减量$('div') .css({width:'...原创 2019-05-23 13:47:51 · 176 阅读 · 0 评论 -
jquery之类名操作
1. addClass 添加类名添加多个类名以空格隔开$('demo').addClass('active tzh')addClass 函数逻辑操作$('div').addClass(function(index,ele){ return 'tzh' + index })2. removeClass 移除类名移除多个类名以空格隔开$('div'...原创 2019-05-22 23:51:54 · 1295 阅读 · 0 评论 -
mongoose使用教程
提示:mongodb 的服务启动1. mongoose 连接数据库npm install mongoose代码示例:const mongoose = require('mongoose');(function(){ //链接数据库并使用新的url解析器(useNewUrlParser); mongoose.connect('mongodb://local...原创 2019-05-22 19:15:40 · 3314 阅读 · 0 评论 -
ES6 - lterator
1. 迭代器(内部迭代器和外部迭代器)迭代模式:提供一种方法顺序获得集合对象中的各个元素,是一种最简单也是最常见的设计模式,提供特定的接口。内部迭代器:本身是函数,定义好内部迭代规则,外部只需一次初始调用 ; 例如:Array.prototypr.forEach 、jQuery.each 等外部迭代器:本身是函数,执行迭代对象,迭代对象必须显示调用,调用复杂度增加...原创 2019-05-26 06:01:36 · 137 阅读 · 0 评论