HJHAlone的博客

原创 JavaScript深拷贝与浅拷贝

JavaScript中扩展运算符

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

1.使用XXX.module.css文件 1）使用XXX.module.css文件可以只改变部分样式 2）module的写法对于标签名无效，可以设置id或者class 2.使用sass 1）将css文件改为.scss 2）安装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-dom 2）导入组件 3.常用组件的说明 1）Router组件：包裹整个作用，一个React应用只需使用一次Router 2）Link组件：用于指定导航链接（a标签） 导航菜单，点击link就相当于点击导航效果，在导航栏会更改路径，然后理由进行匹配，切换路由 3）Route组件 4.路由的执行过程 5.编程式导航 有时报错...

原创 React学习笔记之React原理

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

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

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

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

1.组件的props 1）类组件使用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]来修改对应的state 4.统一更改表单处理 5.非受控组件（了解） 6.组件设置步骤 1）在state中添加变量 2）在需要进...

原创 React学习笔记之React组件

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

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

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

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

一.offset 1.offset的属性 2.offset与style的区别 获取用offset，更改用style 3.获取鼠标在盒子内的坐标 4.client 注意与offset的区别 5.scroll offset、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.length 2.数组转化为字符串 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+a JS变量 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，实际效果两个盒子间距有40px 1）父子之间的margin传递

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

一、CSS元素划分 1.块级元素与行内级元素 划分标准-------能不能在同一行显示 1）块级元素---独占父元素的一行 2）行内级元素---和其他元素可以在同一行显示 块级元素、行内级元素与替换元素、非替换元素 主要注意行内级元素中可以替换的元素：img、input、video、iframe 二、display display能改变元素的类型，有四个常用值 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