歌歌的前端学习之路-CSDN博客

BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。3、display 为以下其中之一的值 inline-block，table-cell，table-caption；4、overflow 除了 visible 以外的值（hidden，auto，scroll）；5. bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。3. bfc的区域不会与float的元素区域重叠。

2023-06-20 09:45:20 657

翻译使用Fetch请求，如何下载二进制流格式的文件

1、需求：后端返回二进制文件流格式，如图在浏览器中展示2、前端转换为所需文件 fetch(url, newOptions) .then(res => res.blob()) .then(data => { const downloadURL = window.URL.createObjectURL(data); const a = document.createElement('a'); a.style.display =

2021-01-25 18:12:12 3783

原创两个递归

1. 写一个函数实现n的阶乘n! = n*(n-1)!;function mul (n){ if(n == 1){ return 1; } return n*mul(n-1);}// 递归mul(5);mul(5) ==> 5mul(4);mul(4) ==> 4mul(3);mul(3) ==> 3mul(2);mul(2) ==> 2mul(1);2. 斐波那契数列function fb(n){ if( n

2020-06-05 14:21:41 269

原创 GIT：git及其常用命令

基础命令git init 初始化本地仓库git add -A . 来一次添加所有改变的文件git add -A 表示添加所有内容git add . 表示添加新文件和编辑过的文件不包括删除的文件git add -u 表示添加编辑或者删除的文件，不包括新添加的文件git commit -m '版本信息' 提交的版本信息描述git status 查看状态git push -u orig...

2019-12-30 14:52:29 169

原创 GIT:git远程分支报错cannot lock ref 'refs/remotes/origin/

git远程分支报错信息cannot lock ref 'refs/remotes/origin/远程分支名，is at ca8370a58bce7d3d04010eb37888c1a03fa40c42 but expected 206e725f29454184320e285f51a72def1462df94【报错原因】原有一个远程分支为：xuge_0501,但是在提交的时候错误提交成：git ...

2019-12-30 10:43:57 5298

原创 JS:举例说明什么是短路求值

短路求值即利用 ||(逻辑或) 和 &&(逻辑与)的短路特性进行赋值:||const number = test || 0;当test值为truthy时，取test的值，否则取0。这样可以避免number被赋为NaN、null、undefined、false等值。&&const number = test && test.value;当te...

2019-12-23 15:03:54 522

原创 React ：组件的两种创建方式

组件的两种创建方式构造函数的方式function HelloWorld(props){ return <div>{{props.name}}</div>}ReactDOM.render(<div> <HelloWorld name='hello'></HelloWorld></div>,documen...

2019-11-27 11:27:12 170

原创 CSS:position定位

position定位一、position属性的作用position属性用来指定一个元素在网页上的位置，一共有5种定位方式，即position属性主要有五个值。取值：static,absolute,relative,fixed,sticky1. statis属性值static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位【注】stati...

2019-11-22 17:14:08 191

原创 ES6：变量的解构赋值--数组的解构赋值

数组的解构赋值基本用法（1）直接定义let [a, b, c] = [1, 2, 3];（2）“模式匹配”let [foo, [[bar], baz]] = [1, [[2], 3]];foo // 1bar // 2baz // 3let [ , , third] = ["foo", "bar", "baz"];third // "baz"let [x, , y]...

2019-11-21 17:14:54 174

原创 ES6:let和const命令

let命令基本使用let命令只在所在的代码块内有效；let命令不存在变量提升；let暂时性死区; var tmp = 123 if (true) { tmp = 'abc'; // ReferenceError let tmp; //所在的作用域只能先声明后赋值，全局变量不起作用 }4.不允许重复声明块级作用域外层代码不受内层代码快的影响const命令...

2019-11-21 15:53:17 163

原创 React: 浅谈react生命周期

组件加载的时候触发的函数：constructor 、componentWillMount、 render 、componentDidMount组件数据更新的时候触发的生命周期函数：shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate在父组件里面改变props传值的时候触发的：componentWillR...

2019-11-13 10:54:53 135

原创 Jquery : jquery实现checkbox的全选和反选

html: <body> name:<input type="checkbox" name="name"/><br /> name:<input type="checkbox" name="name"/><br /> name:<input type="checkbox" name="name"/><...

2019-03-27 10:13:22 380

原创 JS : 闭包的使用场景

有时候，我们需要得到函数内部的局部变量，但是前面讲到，正常情况下，这是办不到的，这个时候就用到了闭包。**闭包就是能够读取其他函数内部变量的函数。**创建闭包的常见方式，就是在一个函数内部创建另一个函数。实例1： var a = 10; function f1(){ var b = 1000; function f2(){ console.lo...

2019-03-11 20:47:49 672

原创命令：前端开发过程中经常使用的命令

vue-cli部分1.全局安装vue-cli : npm install --global vue-cli2.vue init webpack vuetest3.cd vuetest4.npm installNode部分：1.安装nodejs node --version2.安装cnpm npm install -g cnpm –registry=https://regist...

2019-01-04 10:01:01 203

原创 React基础语法

1.Hello worldimport React from 'react'import { render } from 'react-dom'// 定义组件class Hello extends React.Component { render() { // return 里面写jsx语法 return ( <div...

2018-12-26 15:15:56 136

原创 React ：简单搭建项目

1.node环境学习reactjs需要使用node环境，在node官方下载相应的安装包进行安装，后再使用node -v命令检查node环境是否安装成功。2. 全局安装react脚手架npm install -g create-react-app初始化项目create-react-app my-new-app切换目录cd my-new-app导入react和react...

2018-12-04 11:28:39 389

原创 Nodejs : 使用使用formidable模块实现nodeJs传输文件

1.下载formidable模块npm install formidable --save2.使用方法 var form = new formidable.IncomingForm(); //创建form对象 form.encoding = 'utf-8'; //设置编码格式 form.uploadDir = path.join(__dirname,'/f...

2018-11-02 12:52:08 733

原创 JQuery : 使用jquery中的ajax提交图片并获取后台返回值

在form表单提交中并没有提供一个可以获取后端返回值的方式，所以只好使用jquery中的ajax方法提交，获取后台返回值信息。下面给出事例：html:&amp;lt;form id=&quot;uploadForm&quot; enctype='multipart/form-data'&amp;gt; &amp;lt;input type=&quot;file&quot; id=&a

2018-10-12 11:24:05 3173

原创 VUE : 如何使用vue-cli搭建项目？

1.安装nodejsvue-cli中各种所需的依赖全部在npm中，所以我们需要安装nodejs用于支持npm。找到nodejs官网，https://nodejs.org/en/download/，根据需要下载所需的nodejs版本。安装完成后可以使用,win+r,并使用node --version监测是否安装成功，成功后便可以使用node环境，以及可以使用npm工具下载你所需要的依赖。2....

2018-09-26 11:35:27 232

原创 VUE : vue-cli中如何去掉路由中的井号#

vue-cli项目中，如果想去掉url地址栏中的“#”我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。只需要在路由表中，加入一行代码即可。...

2018-09-26 11:08:00 15252 3

原创 CSS : flex布局实现每行固定div个数，并根据屏幕分辨率自适应布局

1.html代码<div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div&gt

2018-09-26 10:59:48 56364 3

原创 GIT : git以及github的使用（团队协作）

你做的：先上传你的文件在你github项目里面的setting->Collaborators里面邀请小伙伴，小伙伴会收到一封邮件小伙伴做的收到邮件之后先点击同意使用git clone ...进行下载查看.git里面的config文件，会显示你下载的人家的远程仓库的地址现在你可以创建一个分支进行开发 1.g...

2018-08-28 10:05:33 234

原创 JS : this指向问题（2）

var color = "orange"; window.color = "red";var person = { color:"blue"};function sayColor(){ var color = "pink"; console.log(this.color); }person.sayColor = sayColor;person.sayColor.ca...

2018-08-28 09:52:17 196

原创 JS : 传参为对象问题

var p = { name : "张三"}function people1(n){ return n;}function people2(n){ n.name = "李四"; return n;}function people3(n){ n = { name : "haojie" } console.l..

2018-08-28 09:40:45 930

原创 JS : this的指向问题（1）

var color = "orange"; window.color = "red"; var person = { color:"blue" }; function sayColor(){ var color = "pink"; console.log(this.color); }sayColor(); //red...

2018-08-28 09:35:01 221

原创 JS : 数组中的迭代方法

1.使用every();方法对以下数组进行检测判断，看是不是每项都大于2。var arr = [11,5,23,7,4,1,9,1];var boolean = arr.every(function(item){ return item>2;})console.log(arr); //原数组cons...

2018-08-28 09:28:37 161

原创 JS : 数组的普通方法

1.请判断如下对象是否是数组(Array.isArray)var arr = {a:1,b:2}var arr2 = [1,2,3];var arr3 = [{a:1},{b:2}];console.log(Array.isArray(arr)); //falseconsole.log(Array.isArray(arr2)); //trueconsole....

2018-08-28 09:19:20 297

原创 GIT : git以及github的使用（上传你的代码到github上）

git以及github的使用1.远程 1.创建github账户，牢记你的用户名，邮箱，密码 2.创建远程仓库 1.安装　windows下载地址：https://git-for-windows.github.io/ 　linux下载：sudo apt-get install git 2.检测是否安装成功 gi...

2018-08-20 19:52:56 223

原创 linux : 压缩与归档

1.gzip压缩gzip a.txt 对a.txt文件进行压缩，压缩后生成a.txt.gz文件，以.gz为扩展名gzip *.txt 对当前目录下的所有的文件进行压缩，生成n个.gz文件2.gunzip解压缩gunzip a.txt.gz 对由gzip压缩的文件进行解压缩gunzip *.gz 解压所有的.gz文件3.bzip2压缩bzi...

2018-08-13 16:51:34 255

原创 linux : 目录管理

1.touch命令的使用touch a.txt 创建一个文件touch a.txt b.txt c.txt 创建多个文件2.mkdir命令的使用mkdir dir1创建一个文件夹mkdir dir1 dir2 dir3 创建多个文件夹mkdir dir1/dir2 只有dir1存在的情况下可以建立该文件夹下面的一级目录如果不存在可以使用-p选项mkdir -p...

2018-08-13 15:26:41 209

原创 linux : 组管理

1.groupaddsudo groupadd groupname -g 10000新增一个用户组，并为用户组设置gID 100002.groupdelsudo groupdel groupname删除这个组，如果组内有成员的话需要修改这个组3.groupmodsudo groupmod -g 1002 testtest 修改testtest组的组IDsu...

2018-08-12 21:24:52 144

原创 linux : 用户管理

linux下对用户的增删改查1.adduseradduser在创建用户的时候，自动创建该用户，为用户分配组，创建家目录以及创建邮箱目录，并设置好密码。Adding user `test' ...Adding new group `test' (1003) ...Adding new user `test' (1002) with group `test' ...Creating h...

2018-08-12 19:42:00 242

原创 linux : 简介

1.linux简介linux是我们常听到的一个操作系统，常见的操作系统有这样几个：dos操作系统，window server操作系统，Windows 9x/Windows ME/Windows XP,window 7 windows8 window10 ,linux，unix等。今天要介绍的是我们的linux操作系统。linux操作系统和unix操作系统有很大的相似之处，可以说linux系统...

2018-08-12 12:59:39 209

原创 CSS3 : column属性

CSS3的column属性可以将一段文本或内容像报纸那样分栏显示，具体使用方法如下介绍。 1. column-count: 需要分割的列数，值为任意正整数-moz-column-count: 4;column-count: 4;&amp;amp;amp;lt;div&amp;amp;amp;gt; &amp;amp;amp;lt;h2&amp;amp;amp;gt;这是一段文本&amp;amp;amp;l

2018-08-01 15:25:24 892

原创 CSS3 : flex伸缩盒布局

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。2009年，W3C提出了一种新的方案—-Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 &lt;div class="outer"&gt; &lt;div class="inner"&

2018-07-31 22:50:14 316

原创 CSS3 : background-origin背景开始与background-clip背景裁剪与区别和使用

background-origin和background-clip同为CSS属性，并且同为banckgound-image服务。background-origin 背景原点background-origin代表的是背景图片开始的原点，其中三个属性值content-box表示以内容区的左上角为原点展开背景图片 padding-box表示以内填充区左上角为原点展开背景图片 ...

2018-07-30 21:36:33 603

原创 CSS : W3C标准盒子模型和IE盒子模型

在写html与css的过程中，我们可以将每一个元素看做一个盒子，对于普通的浏览器以及IE浏览器，有两套不同的解析盒子的方法，第一种是W3C标准盒子模型，第二种是IE盒子模型，下面重点介绍这两个盒子模型的区别。 1.如何区分在CSS中有一个属性叫做box-sizing,对于标准的盒子模型，属性值为border-box,d对于IE来说叫做content-box。 2.内容区，盒子大小，...

2018-07-30 20:37:37 2703

原创 JS : 两数之和

给定一个整数数组和一个目标值，找出数组中和为目标值的两个数。你可以假设每个输入只对应一种答案，且同样的元素不能被重复利用，例如：给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7 = 9 所以返回 [0, 1]var twoSum = function(nums, target) { for(var...

2018-04-28 16:19:17 1070

空空如也

空空如也