HJHAlone的博客

原创 JavaScript深拷贝与浅拷贝

JavaScript中扩展运算符

原创 React项目实战---基础部分

1.使用XXX.module.css文件1）使用XXX.module.css文件可以只改变部分样式2）module的写法对于标签名无效，可以设置id或者class2.使用sass1）将css文件改为.scss2）安装sass模块3）在样式文件中定义sass变量，3.反向代理1）在需要请求数据的地方写好useeffect函数，2）在src中配置好setupProxy.js文件3）安装配置代理中间件cnpm i --save-dev http-p.

原创 React学习笔记之React路由

1.路由介绍2.路由的基本使用配置路由是注意版本匹配1）安装路由yarn add react-router-dom2）导入组件3.常用组件的说明1）Router组件：包裹整个作用，一个React应用只需使用一次Router2）Link组件：用于指定导航链接（a标签）导航菜单，点击link就相当于点击导航效果，在导航栏会更改路径，然后理由进行匹配，切换路由3）Route组件4.路由的执行过程5.编程式导航有时报错...

原创 React学习笔记之React原理

一、setState()1.setState()方法说明1）更新数据：异步更新使用setState时，后面的setState不要依赖前面的setState可以使用多次setState，但是只渲染一次（只有一次render）2）推荐语法//异步更新state，但是后面的setState可以依赖前面的setStatethis.setState((state,props) => {return {count: state.count+1}})3）第二个参数

原创 React学习笔记之组件的生命周期

一、生命周期1.生命周期的三个阶段1）创建时componentDidMount在render渲染完成之后就立即执行，可以执行DOM操作和发送网络请求2）更新时先执行render()再执行componentDidUpdate()3）卸载时开了定时器，要在componentWillUnMount清除；在组件消失时调用componentWillUnMount二、render props1.首先Mouse定义操作方法，rende...

原创 React学习笔记之组价进阶

1.组件的props1）类组件使用props传递数据2）函数组件使用props传递数据3）props特点2.组件通讯1）父子通讯，传递数据2）子组件传递数据给父组件a.父组件中设置回调函数（用于接受数据，谁要数据谁就提供回调函数），b.将该函数作为属性值，传递给子组件c.子组件通过props调用回调函数d.将子组件的数据最为参数传递给回调函数3.兄弟组件通信核心思想，状态提升。将两个子组件提升到最近的公共父组件...

原创 React学习笔记之表单处理

一、表单处理基础1.输入框处理2.富文本框3.下拉菜单4.复选框其中复选框在选择时是根据checked，而不是value二、表单处理优化步骤1.给表单添加name属性，名称与state相同2.根据表单元素类型获取相应值3.在change事件处理程序中通过[name]来修改对应的state4.统一更改表单处理5.非受控组件（了解）6.组件设置步骤1）在state中添加变量2）在需要进...

原创 React学习笔记之React组件

一、组件1.组件介绍2.使用函数创建组件3.使用类创建组件4.抽离为单独的js文件二、react事件1.React事件绑定语法与DOM事件语法相似2.类绑定事件与函数绑定事件1）类绑定事件2）函数绑定事件3）事件对象...

原创 React学习笔记之React的基本使用

一、react基础1.使用react2.react脚手架的使用1）初始化项目，在项目根目录输入 npx create-react-app my-app，初始化一个名为my-app的项目2）启动项目，进入项目根目录（my-app），在项目根目录中执行 yarn start 或者 npm start3）在react脚手架中使用react二、react的JSX1.jsx的基本使用1）creatElement()的问题2）jsx简介...

原创 JS学习笔记之PC端动画

一.offset1.offset的属性2.offset与style的区别获取用offset，更改用style3.获取鼠标在盒子内的坐标4.client注意与offset的区别5.scrolloffset、client和scroll的区别

原创 JS学习笔记之BOM

1.window常见事件window.onload() = function(){}窗口加载事件上面一个方法只能写一个，以最后一个为准下面一个则可以写很多个

原创 JS学习笔记之DOM与事件

DOM主要针对元素的操作，主要有创建、增、删、改、查、属性、事件一、DOM核心内容1.创建2.新增3.删4.改5.查6.属性7.事件二、事件1.注册事件addEventListener('XXX', function(){})2.删除事件移除的时候不能使用匿名函数进行移除我移除我自己3.DOM事件流捕获阶段和冒泡阶段捕获：冒泡：4.事件对象事件对象是系统自动创建...

原创 js学习笔记之设置样式

1.排他思想首先干掉其他人，再留下自己。2.设置不同的背景3.表格隔行变色

原创 js学习笔记之webAPI

一、获取元素对象1.var timer = getElementById('time');console.dir();存储的方式是伪数组2.getElementByTagName('li');3.getElementByClass('.box'); ===》 querySelectorALL('.box');4.querySelector('#nav'); querySelector('.box');二、事件1.事件源事件被触发的对象2.事件类型..

原创 JS学习笔记之对象与内置对象

1.创建对象的三种方式1）利用字面量创建对象

原创 JS学习笔记之数组、函数与作用域

一、数组1.数组的创建js中一个数组中可以同时存在多种数据类型。数组长度：a.length2.数组转化为字符串3.数组增加元素二、函数1.arguments的使用2.函数的声明方式1).利用函数关键字自定义函数（命名函数）function fn(){} fn();2).利用函数表达式（匿名函数）var fun = function() {}fun();三、js作用域1.js的作用域（es6以前）全局作用域：整..

原创 JS学习笔记之if语句、条件表达式以及循环语句

1.if语句if (a => 1 && a <=100) {count += a;}2.条件表达式1）三元表达式num = 10;var result = num > 5 ? 'yes' : 'no';输出结果result = yes条件表达式 ? 表达式1 : 表达式2，条件表达式为真，则返回表达式1；反之返回表达式2.2）switch语句注意事项：表达式与 value匹配的时候是全等的 ...

原创 JS学习笔记之基础部分

三种写法：行内式：<input type="button" value="点击弹出对话" onclick="alert('JS的简单实现办法')">嵌入式：<script>alert('内嵌式写法，直接script中写')</script>外部文件：多行注释快捷键：shift+alt+aJS变量1.js变量命名：var age;age = 10;prompt输入的变量时string类型的2.JS变量的数据类型...

原创 前端学习笔记之浮动

1.浮动的规则1）元素一旦浮动后，脱离标准流；朝着向左或者向右移动，直到自己的边界紧贴着包含块（一般为父元素）或者其他浮动元素的边界为止。元素层叠关系：标准元素---》浮动元素---》定位元素2）浮动后的对象还是会占据空间，不会凭空漂浮...

原创 前端学习笔记之背景、cursor、定位（static、relative、fixed、absolute）

背景图片的使用：background-image:url("XX")background-position:background-attachment:background 的缩写属性

原创 前端学习笔记之shadow以及水平居中

1.shadow

原创 前端学习笔记之margin、padding、border

1.内容相关属性2.padding属性padding:上 右 下 左1）3个值---无左，左跟随右2）2个值---无下、左，下跟上；左跟右3）1个值---上下左右全为3.margin属性上下两个盒子同时设置margin-bottom=20px和margin-top=20px，会被折叠，实际效果两个盒子间距只有20px左右两个盒子同时设置margin-right=20px和margin-left=20px，实际效果两个盒子间距有40px1）父子之间的margin传递

原创 前端学习笔记之CSS元素划分与display

一、CSS元素划分1.块级元素与行内级元素划分标准-------能不能在同一行显示1）块级元素---独占父元素的一行2）行内级元素---和其他元素可以在同一行显示块级元素、行内级元素与替换元素、非替换元素主要注意行内级元素中可以替换的元素：img、input、video、iframe 二、displaydisplay能改变元素的类型，有四个常用值1）block-----（浏览器默认给块级元素设置display）2）inline-----（将block元素转

原创 前端学习之其他表单元素2

1. input和lable（lable中的for对应于input中的id；name和value是提交时所显示的键值对 ）2.textarea的属性：3.select和option的细节：4.表单提交的两种方式

原创 前端学习之表单元素

1.表单元素input元素

原创 前端学习之table的常用属性

tr（表格行）、td、th（表格列）table常用属性：boder-collapse：设置合并边框---->（collapse，separate），默认为separate，具体意义为将两个边框分开，未合并。表格居中：margin:npx auto;表格首行加粗：table tr:nth-child(1) （使用伪类）table其他元素tbody---表格主体caption---表格标题thead---表格头部tfoot---表格底部th---表格的表头单元...

原创 前端学习笔记---CSS继承与列表

1.继承注意事项：CSS继承的是计算值，而不是编写时的指定值。2.CSS层叠，CSS允许多个相同名字的属性叠加在同一个元素上。依据选择器权重进行覆盖。选择器权重：id--100；class--10；元素--1。 ！important---10000；内联样式---1000（属性中设置的样式）列表有序列表：ol无序列表：ul定义列表：dl（直接子元素只能是dt、dd）列表元素的属性：list-style-type，list-style-image，list-s.

原创 前端学习笔记之伪类

原创 ubuntu16 pip安装软件时出现Command “python setup.py egg_info“ failed with err

ubuntu16 pip安装软件时出现Command "python setup.py egg_info" failed with err