- 博客(37)
- 收藏
- 关注
RSS订阅原创 React Router
一、介绍1、作用2、安装二、使用1、导入2、定义路由2.1、HashRouter2.2、Route2.3、Switch3、重定向4、嵌套路由5、路由传参5.1、使用params参数5.2、使用search参数5.3、使用state参数6、声明式路由导航和编程式路由导航6.1、声明式路由导航6.2、编程式路由导航7、withRouter7.1、作用7.2、使用方法
2022-11-02 22:00:29
366
1
原创 React Hooks
3、写成function组件，无状态组件，但是又需要状态，改成class组件成本太高。3、在获取的元素上进行绑定，通过ref属性将useRef的返回值绑定到元素身上。2、从useState函数的返回值中，拿到状态和修改状态的方方法。1、导入useState函数，调用并传入状态的初始值。3、在内层组件通过useContext函数获取数据。2、调用useEffect函数，并传入回调函数。在函数组件中获取真实dom元素对象或者组件对象。3、调用修改状态的方法更新状态。3、在回调函数中编写副作用处理。
2022-10-28 18:57:44
1365
原创 React-4（state、props、表单、通信、生命周期）
注意：不能直接修改state中的值（例如：state：this.state.count = 1），必须通过setState方法进行修改。Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。2.4、调用setState方法，将文本框的值作为state状态的新值。3、要传递数据状态的子组件通过props接收方法，调用方法传递数据。常用于：axios请求，订阅函数调用，计时器，dom操作。3、子组件中通过props接收父组件中传过来的数据。
2022-10-20 18:56:05
542
原创 ES6新增语法三（对象的新增特性、SET数据结构、Promise、class）
这里面就会引出一个现象“回调地狱”即回调函数中有回调函数，这种现象会导致代码的可读性降低，为了解决这个问题我们选择使用Promise。注意：所有对象都会合并到obj1，如果是相同的属性，后边对象的属性值会对前边的进行完善。js是单线程的语言，所以很多操作都是异步操作，而异步操作多由回调函数完成。注意：必须接受一个函数作为参数，俩个参数名不是自定义的，必须这么写。delete(x)：删除，x不是索引，而是set中具体的值。add(x)：添加，x不是索引，而是set中具体的值。
2022-10-09 19:21:38
304
原创 ES6新增语法二（数组新特性）
注意：自动将每一个元素放入callback中进行处理，如果返回值为true，将元素放入新数组中，否则不操作。作用：对数组进行遍历，如果有一个不满足条件，则返回false，并终止遍历，否则返回true。作用：对数组进行遍历，如果有一个满足条件，则返回true，并终止遍历，否则返回false。作用：对数组进行遍历，将计算后的值返回新数组。作用：帮助数组遍历每一个索引值与value值。作用：检索数组是否包含某个值，返回布尔值。作用：过滤数组单元，将满足条件的元素过滤。作用：验证是否是一个数组，返回布尔值。
2022-10-09 16:02:26
436
1
原创 ES6新增语法一（let、const、变量的解构赋值、for...of、函数新特性）
全称：ECMAScript6、由ECMA国际标准化组织制定的一项脚本语言的规范。
2022-10-09 12:39:25
274
原创 DOM2详解
scrollHeight = 150(子元素高度) + 5（父元素下padding） + 10（子元素上margin） + 2 * 2 (子元素上下border) + 10 * 2（子元素上下padding）scrollHeight = 150(子元素宽度) + 5（父元素右padding） + 10（子元素左margin） + 2 * 2 (子元素左右border)+ 10 * 2（子元素左右padding）如果子元素大于父元素，大小为：子元素大小+padding+border+margin。
2022-10-06 09:35:22
309
原创 DOM1详解
2.6、克隆：cloneNode(布尔值)：用于克隆节点，true是克隆子节点，默认false是不克隆子节点。2.3、insertBefore(新节点，参照节点 )：向指定位置之前添加节点。1.4、firstChild：返回第一个子节点，没有则返回null。1.5、lastChild：返回最后一个子节点，没有则返回null。2.2、appendChild(新节点)：向当前节点末尾添加子节点。2.4、替换：replaceChild(新节点，替换节点)1.2、parentNode：返回当前节点的父节点。
2022-10-03 21:37:53
1180
原创 JS基础（函数）
注意：全局变量始终在内存中，局部变量如果没有被其他函数引用的情况下，函数调用后会被释放。定义在函数内部的变量就是这个函数的局部变量，在函数内部可以使用 （作用域是当前函数）声明参数：function 函数名 （形参1，形参2，形参3......）定义在函数外面的变量就是全局变量，整个文档都可以使用（作用域是整个文档 ）2.2、在函数中内置一个arguments的数组，包含所有传过来的实参。调用函数：函数名 （实参1，实参2......）声明语法：function函数名（）{}函数的返回值，结束函数。
2022-10-03 19:23:19
110
原创 响应式布局（viewport、百分比布局、媒体查询、em/rem、vw/vh）
margin和padding的百分比相对于父元素的宽度。作用：初始化页面元素，防止页面被缩放，规范用户操作。em：相对于最近的父元素的font-size的大小。作用：在不同的屏幕大小下定制样式。rem：相对于html的字体大小。宽高百分比相对于父元素的宽高。定位的百分比相对于它的参照物。3、在最大值和最小值内的样式。2、最大缩放比例为1.0。3、最小缩放比例为1.0。1、设置宽度为屏幕宽度。1、大于某个值时的样式。2、小于某个值时的样式。4、除某个范围内的样式。5、初始化的缩放比例。相对于可视窗口的大小。
2022-10-03 18:56:10
339
原创 BOM详解
screen.availWidth、screen.avaiHeight返回屏幕可用宽高，值为屏幕的实际大小减去操作系统某些功能占据的空间的，如系统任务栏。screenLeft 返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，不兼容FF浏览器。screenTop 返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离，不兼容FF浏览器。innerHeight 返回网页在当前窗口中可见部分的高度，包含滚动条高度。nnerWidth 返回网页在当前窗口中可见部分的宽度，包含滚动条宽度。
2022-10-02 21:42:06
77
原创 AJAX使用步骤
注意：只有在XMLHttpRequest对象完成了以上5个步骤之后，才可以获取从服务器端返回的数据。因此，如果要获得从服务器端返回的数据，就必须要先判断XMLHttpRequest对象的状态readystate的值。status：200-成功、202-请求完成，处理未完成、400-语法错误、404-找不到指定url、500-内部服务器错误。0 对象已建立，还未初始化，未调用send。2.3、发送后状态值：readystate。1、创建XMLHttpRequest对象。
2022-10-02 13:55:16
129
原创 var、let、const各自特点及区别详解
var没有块级作用域，而let和const声明的范围是块状作用域，一对花括号就是一个块。变量声明在函数的外面是全局作用域，变量在函数内部，是局部作用域。使用var可以重复声明，后面的会覆盖前面的。使用const声明的变量不属于顶层对象。使用var会将变量声明提升到使用之前。使用let声明的变量不属于顶层对象。const声明的常量不存在变量提升。使用var声明的变量属于顶层对象。const声明的常量不可以被修改。let声明的变量不可以重复声明。let声明的变量不存在变量提升。可以重复声明一个变量。
2022-10-01 22:37:41
171
原创 JQuery使用方法四（事件+动画）
注意：off括号中不写参数则为删除全部事件，如果删除某一个事件则括号传入指定值。每当鼠标移入div1范围中就触发mousemove事件。注意：在范围内移动到不同的位置也会触发。每点击一下就执行一次。3、同时绑定多个事件。4、同时添加多个事件。
2022-10-01 17:13:02
492
原创 JQuery使用方法三（DOM）
注意：是放到父元素中最后一个子元素的后面。注意：是放到父元素中第一个子元素的前面。将新创建的a标签放入div1中。将新创建的a标签插入到div1中。1、获取标签的html内容。3、获取标签的value值。2、获取标签的文本内容。10、把a插入到b前面。7、将b插入到a后面。8、将b插入到a前面。9、把a插入到b后面。11、用b替换a元素。12、用a替换b元素。14、清空a的子元素。
2022-09-30 19:35:50
242
原创 JQuery使用方法二（CSS样式）
5、获取滚动的值：scrollTop()、scrollLeft()1.2、获取到的背景颜色为rgb(127,255,212)4、相对于窗口，获取top和left值：offset()10、获取高度+上下的padding+上下的border。11、获取宽度+左右的padding+左右的border。1.1、获取到的字体颜色为rgb(255,0,0)获取距离元素顶部滚动值：scrollTop()8、获取高度+上下的padding距离。9、获取宽度+左右的padding距离。7、获取高度和获取宽度。
2022-09-30 15:30:49
712
原创 JQuery使用方法一（获取元素+属性）
5、子代选择器：$("div >p")等同于$("div").children("p")4、后代选择器：$("div p")等同于$("div").find("p")7、获取div下第最后一个p标签：$("#div1 p:last")8、获取div下第所有偶数p标签：$("#div1 p:even")6、获取div下第一个p标签：$("#div1 p:first")9、获取div下第所有奇数p标签：$("#div1 p:odd")3、获取class名：$(".class名")3、同时设置多个属性值。
2022-09-28 21:47:16
948
原创 css特效详解
（3）0-20%颜色为hotpink，80%-100%颜色为skyblue，20%-80%为两种颜色过渡。text-shadow：横向偏移量 纵向偏移量 模糊距离 阴影颜色;linear-gradient(方向，颜色，颜色····);radial-gradient(方向，颜色，颜色····);横向伸缩：transform：scaleX(1.5);纵向伸缩：transform：scaleY(1.5);横向倾斜：transform：skewX();纵向倾斜：transform：skewY();
2022-09-23 20:03:18
574
原创 JS字符串方法详解
indexend：截取字符串的结束索引，但不包括结束索引的字符。length：要截取的字符数，不写就是从开始截取到最后。（2）lastIndexOf：从后向前查找，找到就返回对应的索引值，找不到就得到-1。（1）indexOf：从前向后查找，找到就返回对应的索引值，找不到就得到-1。两个参数：截取的是一个范围，包括开始的位置，不包括结束的位置。（1）将大写转化为小写：toLowerCase()（2）将小写转化为大写：toUpperCase()（2）替换所有的字符：replaceAll()
2022-09-21 14:25:35
2097
原创 JS数组方法详解
两个参数：返回起始和结束位置之间的项，包括起始位置，但不包括结束位置的项。两个参数：要查找的元素，查找这个元素开始的索引。参数：一个参数，把数组分割为字符串，如果有参数用参数来分隔，没有参数默认用逗号分隔。三个参数，起始位置，要删除的项数，要替换的任意数量的项。两个参数，要删除的第一项的起始位置和要删除的项数。三个参数，起始位置，0，要插入的任意数量的项。两个参数：要查找的元素，查找这个元素开始的索引。c、替换：splice(下标，删除的个数，替换的项)参数：一个参数：要查找的元素。返回值：新构建的数组。
2022-09-17 20:45:17
158
原创 JS中时间对象及其方法(春节倒计时练习)
var data=new Date(2021,10,01)：获取所填时间。注意：月份是从0开始，需要加1才是当前月份。注意：周日为0开始到周六为6。
2022-09-14 16:44:44
798
原创 JS中Math对象下的方法
2、floor方法（向下取整）：var n=Math.floor(Math.random()*(max-min+1)+min)1、round方法（四舍五入）：var n=Math.round(Math.random()*(max-min)+min)
2022-09-14 16:27:28
112
原创 JS中获取元素的方法
2、document.getElment.querySelectorAll('选择器') 获取拥有此选择器的元素，获取的是一个数组。1、document.getElement.querySelector('选择器') 获取该选择器的第一个元素。2、不只是通过document对象获取元素，也可以通过父元素获取子元素。document.getElementsByClassName('class名')document.getElementByid('id名')注意：1、获取多个元素的，获取到的都是数组。
2022-09-11 21:28:09
4973
原创 JS中数组去重的几种方法
用于判断字符串是否包含指定的子字符串，如果找到匹配的字符串则返回 true，否则返回 false。用数组当前项和之后每一项比较，相等则删除，然后将删除项索引减一。注意： includes() 方法区分大小写。每个值在 Set 中只能出现一次。Set 是唯一值的集合。
2022-09-10 21:33:18
375
原创 JS变量（基本数据类型和引用数据类型区别及字符串和数字的转换）
注意：Object和function属于引用数据类型，其它属于基本数据类型。注意：如果字符串无法转化为数字类型会输出NaN（NaN是Number类型）1、基本数据类型：值在栈区，实现拷贝的时候只拷贝内容，所以两值互不影响。2、引用数据类型：值在堆区，实现拷贝的时候只拷贝地址，所以两值互相影响。所以基本数据类型实现拷贝的时候，两值互不影响。所以引用数据类型实现拷贝的时候，两值互相影响。打印出的b值和a值是相同的，变量 *1、-1、/1。二、引用数据类型和基本数据类型区别。1、数字转化为字符串。
2022-09-10 19:28:15
104
原创 css弹性布局详解
6、align-content：调整换行对齐方式（交叉轴对齐方式，只有多行才有效果）column-reverse：主轴方向为垂直方向，起点在下边。row-reverse：主轴方向为水平方向，起点在右端。space-between：两端对齐，中间元素间隔相等。7、flex和flex-grow：分配剩余空间或者设置子元素的比例。row(默认)：主轴方向为水平方向，起点在左端。column：主轴方向为垂直方向，起点在上边。wrap-reverse：换行，第一行在下方。flex-start（默认值）：轴起点对齐。
2022-09-08 14:55:31
4074
原创 JS常用Node属性和方法、Dom扩展+练习（给每个p标签设置索引属性）
【代码】JS基础（通过设置属性方式，给每个p标签设置属性index为i， 点击时就可以获取自身的index索引值）
2022-09-05 22:43:37
458
原创 css常用样式
text-decoration：（none没有下划线，underline下划线，overline上划线，line-through贯穿线)contain：按照图片原始比例缩放并且按照图片最短边覆盖背景区域，可能出现没填充到整个背景区域而留白的问题。cover：按照图片原始比例缩放并且填充整个背景区域，可能出现部分图片超出背景区域，图片显示不完整的问题。ont-weight：字体粗细（默认400，取值范围100-900，没有单位）font-size：字体大小（默认16px，最小支持8px）
2022-09-04 10:34:10
176
原创 css三种引入方式与标签选择器
1、 特点：id名是唯一的，一个标签只能有一个id。2、内部引入方式：在head中写style标签，然后在style标签中写css样式。3、外部引入方式：使用link引入外部css文件，css样式写在css文件中。1、行间样式：权重最高1000，在标签的style属性中写css样式。语法：选择器1，选择器2......{css样式}语法：.class名{css样式}语法：父选择器 子选择器{css样式}语法：父代选择器>子代选择器{css样式}语法：#+id名{css样式}语法：标签名{css样式}..
2022-09-01 09:09:04
340
1
原创 定位
用途：一个东西覆盖到一个东西上面（在父元素用相对定位，在子元素用绝对定位）相对于有定位的父元素或祖先元素，如果没有父元素和祖先元素就相对于body。相对于浏览器窗口，脱离文档流。相对于元素原来的位置。默认最底层元素层级是0。层级数越大，元素越靠上。用途：返回顶部按钮。注意 ：只有定位元素才有层级。...
2022-08-28 19:15:22
91
原创 浮动
3、浮动存在的问题：父元素不设置高度情况下，高度由子元素撑开，一旦子元素设置浮动，父元素会失去高度进而影响后面元素布局。动态向父元素后面添加一个clear:both;4、使用浮动而不使用display:inline-block;2、设置左浮动：float:left;(以父容器左边为开始位置)设置右浮动：float:right;（以父容器右边为开始位置）解决方式：给父元素设置overflow:hidden;让行属性元素支持设置宽高。一个移动，其他元素会跟着移动。1、作用：让块属性元素排成一行。......
2022-08-28 16:23:55
1266
原创 标签
支持设置宽高，如果不设置宽高，宽度自动撑满父容器，高度由内容撑开。alt：图片加载失败的提示信息。a标签中target属性：_self(默认不打开)，_blank(点击打开新的页面)title：鼠标移入提示信息。a标签中href属性：用来放置网页地址（相对地址、网络地址、绝对地址）。2、img标签：属性：src：用来放置图片的地址（相对地址、网络地址、绝对地址）。a标签：超链接，用来跳转网页。2、div：无意义，一般用来划分区域。1、特点：上下排列，独占一行。h1-h6：标题标签。2、span：放置文字。.
2022-08-28 13:24:13
76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人