- 博客(19)
- 收藏
- 关注
RSS订阅原创 react的受控组件和非受控组件
目录# 受控组件# 非受控组件# 受控组件就是将state与表单项中的value值绑定在一起，由state的值来控制表单元素的值下面就以 demo 来具体谈一谈我对受控组件的理解，献丑了！import React, { Component } from "react";export default class Login extends Component { // state添加两个状态作为表单的value state = { username: {
2021-09-20 16:18:27
133
原创 react 中状态 state 及 setState
一、state理解：状态(state)即数据，是组件内部的私有数据，只能在组件内部使用state的值是对象，表示一个组件中有多少数据this.state 获取状态，react没有做数据代理this.setState来修改state的数据state可以写在类的构造方法中，可以写在类的成员属性中export default class extends React.Component { constructor(props){ super(props)
2021-09-19 14:45:01
238
原创 ECMAScript6 入门及常用语法总结 ES6
文章目录一、let和const 变量的声明和提升二、模板字符串三、函数新特性四、拓展的对象功能五、解构赋值六、Spread Operator 扩展运算符七、import export八、Promise九、async函数十、Class 类
2021-08-24 10:29:16
400
原创 JS基础 DOM 语法大总结
1获取元素获取非常规标签 html body headvar html=document.documentElementvar body=document.bodyvar head=document.head获取常规标签1、根据ID获取元素 document.getElementById('ID名字') 如果没有对应的ID元素，就是null2、根据类名获取元素 document.getElementsByClassName('类名') 返回伪数组，伪数组内第[n]个才是元素3、
2021-08-05 16:30:23
417
原创 this指向语法 及强行改变this指向call apply bind
this指向一个使用在作用域内的关键字在全局使用，指向window在函数内使用，this指向函数的context（执行上下文） 函数内的this，和函数如何定义没有关系，和函数在哪定义没有关系，只看函数是如何被调用的(箭头函数除外)几种调用方式，决定this指向1 普通调用 函数名（） 该函数内的this指向window2 对象调用 对象名.函数名() 对象名['函数名']() 数组[索引]() this指向 点. 前面的内容，也就是该对象或数组3 定时器处理函数 setT
2021-07-31 20:17:48
108
原创 正则表达式基本语法
正则表达式作用: 我们自己书写一个 规则, 去验证 **字符串** 是否符合规则 + 正则也是一个 JS 的复杂数据类型正则表达式的创建 1. 字面量创建正则表达式 => var reg = /abcd/ 2. 内置构造函数创建正则表达式 => var res = new RegExp('abcd') 正则表达式两种创建方式的区别1. 标识符的书写 => 字面量方式, 直接书写在正则的最后面 => 内置构造函
2021-07-31 20:09:07
575
原创 JS基础 操作DOM元素语法
1获取元素获取非常规标签 html body headvar html=document.documentElementvar body=document.bodyvar head=document.head获取常规标签1、根据ID获取元素 document.getElementById('ID名字') 如果没有对应的ID元素，就是null2、根据类名获取元素 document.getElementsByClassName('类名') 返回伪数组，伪数组内第[n]个才是元素3、
2021-07-31 19:52:25
69
原创 JS基础 操作DOM元素尺寸 （offset、client 偏移量 窗口尺寸）语法
offset一个元素在页面（文档流）的占位元素.offsetWidth元素.offsetHeight得到该元素的内容+padding+border的尺寸display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸client元素.clientWidth元素.clientHeight得到元素的内容+padding的尺寸注意：display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸元素偏移量结构父级：该标签外
2021-07-31 19:36:30
389
原创 JS基础 DOM基础 详解语法
1获取元素获取非常规标签 html body headvar html=document.documentElementvar body=document.bodyvar head=document.head获取常规标签1、根据ID获取元素 document.getElementById('ID名字') 如果没有对应的ID元素，就是null2、根据类名获取元素 document.getElementsByClassName('类名') 返回伪数组，伪数组内第[n]个才是元素3、
2021-07-31 19:28:09
78
原创 JS基础 DOM事件 详解语法
了解事件了解事件：由代码方式和页面内容约定好的一个行为当 用户操作的时候, 就会触发对应的函数事件三要素： 1事件源：和谁约定事件（并不一定由事件源触发事件） 2事件类型：约定了一个事件 3事件处理函数：当行为发生时，需要执行的函数事件绑定：1 DOM 0级事件语法：事件源.on事件类型=事件处理函数特点：只能给同一个事件源同一事件类型绑定一个事件处理函数2 DOM 2级事件：事件监听标准浏览器：语法：事件源.addEventListener('事件类型'，事件处理函数)
2021-07-31 19:21:02
201
原创 JS基础 操作BOM (浏览器对象模型browser object model）语法
弹出层window.alert('提示文本') 提示框 没有返回值window.confirm('提示文本') 询问框，返回布尔值window.pormpt('提示内容') 输入框 返回用户输入的内容，或者返回null三个弹出层会阻断程序的进程，直到用户操作为止，返回值是string类型浏览器的历史记录 history成员window.history.back()历史回退 前提是有历史页面window.history.forward() 历史前进，前提是经历过历史回退window.hist
2021-07-27 20:14:43
102
原创 js基础 时间 对象Date及常用方法 * 定时器
时间对象基本概念格林威治时间：1970年1月1日0时0分0秒0毫秒1、获取时间对象var time= new Date()2、创建时间对象 (通过传递参数来实现)传递数字至少传递两个数字,传递一个数字表示毫秒自动进位0表示1月，11表示12月 例： var time=new Date(2021,7,1,9,30,30,500)传递字符串：1表示1月，12表示12月'year-month-date hours:minutes:seconds'时间对象的常用方法 获取（都是n
2021-07-27 20:03:34
225
原创 JS-Array数组 arr基础及常用方法快速入门
数组Array复杂数据类型一、创建字面量方式创建var arr = []内置构造函数创造var arr = new Array()二、数组的基本操作1. length属性读：数组名.length得到数组的长度，值是一个number数据类型写：数组名.length=数字修改数组的长度如果设置的数字比本身长度大，那么多出来的内容用empty补齐2、索引从0开始，依次 +1，最后一位length-1读：数组[索引]=值获取该索引位置的数据，如果没有该索引位置，返回unfefi
2021-07-27 19:56:24
631
原创 JS基础 string*字符串及常用方法
基本数据类型，包装数据类型一、创建字面量：var str='ni hao'内置构造函数：var str=new String('ni hao')二、基本操作1、length属性 字符串.length2、索引属性，只能读，不能修改3、遍历字符串三、字符串常用方法1 字符串.toLowerCase()字母换成小写2 toUpperCase()字母换成大写3 charAt(索引)该索引位置的对应字符4 charCodeAt(索引) 该索引对应字符，unicode编码5 split()
2021-07-27 19:45:05
152
原创 JS基础-操作数字Math常用方法
操作数字 Math常用方法Math.xxx()1 Math.random() 返回获取0-1之间的随机小数2 Math.round(数字) 返回四舍五入取整后的结果3 Math.ceil(数字) 返回值向上取整的结果4 Math.floor(数字) 返回向下取整的结果5 MAth.abs(数字) 返回取绝对值后的结果6 Math.pow(数字，指数) 返回次方后的结果7 Math.sqrt(数字) 返回算数平方根的结果8 Math.max() 若干个数字中的最大值9 Math.min()
2021-07-27 19:38:20
155
原创 前端原生js*轮播图*案例面向过程+详解*
js源码 （html css 参考js类语法面向对象实现轮播图）/* 轮播图js代码*/// 1. 获取元素// 1-1. 获取承载图片的 imgBoxconst imgBox = document.querySelector('.imgBox')// 1-2. 可视窗口的盒子const banner = document.querySelector('.banner')// 1-3. 承载焦点的盒子 pointBoxconst pointBox = document.queryS
2021-07-18 21:28:27
166
原创 原生js经典案例*轮播图
直接来代码！h5<div class="banner" id="banner"> <ul class="imgBox"> <li class="active"><img src="" alt=""></li> <li ><img src="" alt=""></li> <li ><img sr...
2021-07-18 21:15:43
107
原创 前端js经典小抽奖*点名demo
被公司点名？迟到啦？高大上抽奖？请看下面:效果图代码来了：html5<div class="bigBox"> <ul class="box"> <!-- 根据人数渲染 <li> </li> --> </ul> <!-- 设置开始 停止 中奖者 --> <div class="btn"> .
2021-07-18 19:27:29
352
原创 前端*js经典案例*选项卡
选项卡作为前端开发必须项，下面简单做了个面向对象开发的选项卡：html5 部分 <!-- 第一个 --><div class="box" id="box1"> <ul> <li class="active">1</li> <li>2</li> <li>3</li> </ul&
2021-07-18 18:17:32
233
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人