- 博客(28)
- 收藏
- 关注
RSS订阅原创 React新特性
context在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props。import React ,{ Component } from 'react';class App extends React.Component { constru
2021-11-29 15:17:46
696
原创 React Hooks学习笔记
React Hooks 是在 2018年 react 版本16.8.0的时候发布的，到目前已经不是什么新鲜的技术了，现在react版本已经到了17.0.2，但是我相信还有很多人跟我一样对React Hooks只有耳闻，一直没有很了解究竟是什么东东，如何在项目中运用，现在就一起来认识一下吧。在React Hooks 出现之前，我们把react组件分为类组件和无状态组件，类组件就是class组件，可以定义state，有生命周期，用于处理复杂业务；无状态组件就是纯函数，主要用于页面渲染，没有生命周期与stat
2021-11-17 14:47:26
765
转载 js 添加事件 attachEvent 和 addEventListener 的用法
一般我们在JS中添加事件,是这样子的 obj.onclick=method这种绑定事件的方式，兼容主流浏览器,但如果一个元素上多次添加同一事件呢? obj.onclick=method1; obj.onclick=method2; obj.onclick=method3;如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样...
2018-12-28 16:55:00
271
转载 zoom和transform:scale的区别
zoom简介在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。 其支持的值类型有： 百分比值：zoom:50%，表示缩小到原来的一半。 数值：zoom:0.5，表示缩小到原来的一半。 normal关键字：zoom:normal等同于zoom:1.区别虽然Chrome/Safari浏览器支持了zoom属性,但是...
2018-12-28 16:02:24
400
转载 div获得焦点
div正常情况下是无法获得焦点的，所以其blur方法和focus方法都是没有用的，解决方案如下：<div class="fileInfo" tabindex = "0" contenteditable="false"></div>加入tabindex后div便可通过tab或点击的方式获得焦点，也可通过js的focus方法获得css中去除获得焦点状态下的边框：o...
2018-12-28 11:36:11
1050
转载 纯css修改下拉列表select的默认样式
select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式：html代码：<div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油&
2018-12-28 11:25:41
2576
转载 JQuery获取各种宽度的问题
width() - 返回元素的宽度。height() - 返回元素的高度。innerWidth() 方法返回元素的宽度（包括内边距）。 innerHeight() 方法返回元素的高度（包括内边距）。 outerWidth() 方法返回元素的宽度（包括内边距和边框）。 outerHei...
2018-12-28 11:22:22
1492
转载 即时反应的input和propertychange方法
在web开发中，我们有时会需要动态监听输入框值的变化，当使用onkeydown、onkeypress、onkeyup作为监听事件时，会发现一些复制粘贴等操作用不了，同时，在处理组合快键键的时候也很麻烦。这时候我们需要更专业的解决方案：HTML5标准事件oninput、onchange和IE专属的事件properchange。1.oninput&onchange：oninput和on...
2018-12-28 11:21:07
116
转载 JavaScript 实现密码可见性切换（显示和隐藏）
默认情况下，输入的密码的 input 标签 type="password"，默认密码用小点或星号表示。要密码可见所以我们需要将type修改为"text"。在 Chrome、FireFox 等浏览器中通过修改 input 标签的 type 属性轻松实现该效果，但是 IE 下就会报错。如果你需要兼容IE，就必须考虑其他方案。这里有几点需要说明的是：示例使用了替换整个 input 标签方案，所以...
2018-12-28 11:07:04
5873
转载 JS实现密码加密
1、base64加密 在页面中引入base64.js文件，调用方法为：<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>base64加密</title><script type="text/javascript&qu
2018-12-28 10:38:32
3840
1
原创 前端常见面试题
1、如何让一个元素垂直/水平（垂直水平）都居中，请列出你能想到的几种方式？方式1<div class="div-demo"></div>.div-demo{ width: 100px; height: 100px; background: red; margin: auto; position: absolute; left: 0; right: 0...
2018-12-13 14:05:20
100
转载 容器文字溢出title显示
我们经常会出现容器内文字溢出问题，我们可以给容器添加属性:.className{ overflow:hidden; white-space: nowrap; text-overflow: ellipsis;} 这样文字溢出会出现省略，在样式上好看了很多；但是文字的全部能容却看不见了。由此引发了我的代码风暴，来看下面代码：$body.on("mou...
2018-07-23 17:03:09
427
原创 canvas标签学习之文本
1.font属性<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <
2018-07-06 14:00:52
516
原创 canvas学习之转换
1.scale()<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <
2018-07-06 10:27:42
623
原创 canvas标签学习之路径
1.fill()<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> <
2018-07-05 18:10:18
250
转载 如何在网页中用上自己下载的字体
在开发过程中市场会遇到需要特殊的字体，所谓的特俗字体就是常用字体库中不包含的字体。这时候，我们可以从网络上下载到我们需要的字体，然后引用到我们需要的网页中去。 我们可以用CSS来引用字体路径。 @font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而...
2018-07-05 13:56:26
4148
原创 canvas标签学习之矩形
1.绘制矩形(rect())<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> &a
2018-06-25 15:16:05
215
原创 canvas标签学习之线条样式
1.lineCap属性lineCap 属性设置或返回线条末端线帽的样式。<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. <
2018-06-25 14:47:48
627
原创 canvas标签学习篇之fillStyle属性
1.fillStyle属性<body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML5 canvas tag. </canvas> &am
2018-06-25 14:25:50
6993
转载 创建vue项目错误 Error: No parser and no file path given, couldn't infer a parser
原因是prettier 更新到1.13.1导致的component-compiler-utils 1.3.1 已经更新修复了.现在不需要把1.13.1 降级了具体, https://github.com/vuejs/comp...error in ./src/App.vueModule build failed: Error: No parser and no file path given, c...
2018-05-28 22:48:25
174
原创 vue的知识点1
1. 文本插值是最常见的一种数据绑定方式，语法是使用双括号（Mustache）将变量包含<div id="app"> <p>{{message}}</p> </div> <script type="text/javascript"> var vm = new Vue({
2018-05-03 23:40:57
189
原创 js值类型和引用类型的区别
1. javascript中变量类型分为值类型（基本数据类型）和引用类型(1) 值类型：String(字符串)，Number(数值)，Boolean(布尔值)，Undefined，Null(2) 引用类型：Array(数组)，Object(对象)，Function(函数)2. 值类型和引用类型的区别(1) 存储位置不一样① 值类型的变量会保存在栈内存中，如果在一个函数中声明一个值类型的变量，那么这...
2018-04-28 10:42:48
5943
2
原创 js基础知识
1. 类型和类型转换(1) 值类型：String(字符串)，Number(数值)，Boolean(布尔值)，Undefined，Null(2) 引用类型：Array(数组)，Object(对象)，Function(函数)(3) 2. Null 和Undefined(1) Undefined表示未定义。对于没有初始化的变量、函数调用时候未提供的函数参数、缺失的对象属性，它们的默认值就是undefin...
2018-04-28 10:39:46
127
转载 vue路由基础详解
Vue.js路由(Vue-router)安装直接引入<script src="vue.js"></script><script src="vue-router.js"></script>vue-router下载链接https://unpkg.com/vue-router/...npm下载npm install vue-router如果在一个模块化工...
2018-04-28 10:25:05
224
转载 es6核心内容
ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的，所以又称ECMAScript 2015。也就是说，ES6就是ES2015。虽然目前并不是所有浏览器都能兼容ES6全部特性，但越来越多的程序员在实际项目当中已经开始使用ES6了。所以就算你现在不打算使用ES6，但为了看懂别人的你也该懂点ES6的语法了...在我们正式讲解ES6语...
2018-04-28 10:23:46
145
转载 console的强大
阅读目录写在前面谷歌控制台Elements面板查看元素上绑定的事情样式操作总况console.logconsole.infoconsole.errorconsole.warnconsole.debugconsole.dirxmlconsole.group和console.groupEndconsole.assertconsole.countconsole.dirconsole.time和conso...
2018-04-28 10:23:23
138
转载 ES6模块之import export详解
ES6中的模块即使一个包含JS代码的文件，在这个模块中所有的变量都是对其他模块不可见的，除非我们导出它。ES6的模块系统大致分为导出（export）和导入（import）两个模块。1、模块导出（export）你可以导出所有的最外层函数、类以及var、let或const声明的变量。ES6模块只支持静态导入和导出，你只可以在模块的最外层作用域使用import和export，不可在条件语句中使用，也不能...
2018-04-28 10:15:01
242
转载 javascript中原型对象的彻底理解
一、什么是原型原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。1.1 函数的原型对象 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。...
2018-04-28 10:14:40
145
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人