<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[xiaodingmao]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/xiaodingmao</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; xiaodingmao]]></copyright><item><title><![CDATA[react的受控组件和非受控组件]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/120390751</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/120390751</guid><author>xiaodingmao</author><pubDate>Mon, 20 Sep 2021 16:18:27 +0800</pubDate><description><![CDATA[目录



# 受控组件

# 非受控组件

# 受控组件

就是将state与表单项中的value值绑定在一起，由state的值来控制表单元素的值

下面就以 demo 来具体谈一谈我对受控组件的理解，献丑了！


import React, { Component } from "react";

export default class Login extends Component {
  // state添加两个状态作为表单的value
  state = {
    username: {
  ]]></description><category></category></item><item><title><![CDATA[react 中状态 state 及 setState]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/120379955</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/120379955</guid><author>xiaodingmao</author><pubDate>Sun, 19 Sep 2021 14:45:01 +0800</pubDate><description><![CDATA[一、state
理解：

状态(state)即数据，是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件中有多少数据
this.state 获取状态，react没有做数据代理
this.setState来修改state的数据
state可以写在类的构造方法中，可以写在类的成员属性中

export default class extends React.Component  {
    constructor(props){
        super(props)
        ]]></description><category></category></item><item><title><![CDATA[ECMAScript6 入门及常用语法总结 ES6]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119858034</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119858034</guid><author>xiaodingmao</author><pubDate>Tue, 24 Aug 2021 10:29:16 +0800</pubDate><description><![CDATA[文章目录
一、let和const 变量的声明和提升
二、模板字符串
三、函数新特性
四、拓展的对象功能
五、解构赋值
六、Spread Operator 扩展运算符
七、import export
八、Promise
九、async函数
十、Class 类]]></description><category></category></item><item><title><![CDATA[JS基础 DOM 语法大总结]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119360913</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119360913</guid><author>xiaodingmao</author><pubDate>Thu, 05 Aug 2021 16:30:23 +0800</pubDate><description><![CDATA[1获取元素
获取非常规标签 html body head
var html=document.documentElement
var body=document.body
var head=document.head

获取常规标签
1、根据ID获取元素 document.getElementById('ID名字')
   如果没有对应的ID元素，就是null
2、根据类名获取元素 document.getElementsByClassName('类名')
   返回伪数组，伪数组内第[n]个才是元素
3、]]></description><category></category></item><item><title><![CDATA[this指向语法 及强行改变this指向call apply bind]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280804</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280804</guid><author>xiaodingmao</author><pubDate>Sat, 31 Jul 2021 20:17:48 +0800</pubDate><description><![CDATA[this指向
一个使用在作用域内的关键字
在全局使用，指向window
在函数内使用，this指向函数的context（执行上下文）
  函数内的this，和函数如何定义没有关系，和函数在哪定义没有关系，只看函数是如何被调用的(箭头函数除外)
几种调用方式，决定this指向
1 普通调用
 函数名（）
 该函数内的this指向window
2 对象调用
 对象名.函数名() 
 对象名['函数名']()
 数组[索引]()
 this指向 点. 前面的内容，也就是该对象或数组
3 定时器处理函数
 setT]]></description><category></category></item><item><title><![CDATA[正则表达式基本语法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280711</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280711</guid><author>xiaodingmao</author><pubDate>Sat, 31 Jul 2021 20:09:07 +0800</pubDate><description><![CDATA[正则表达式
作用: 我们自己书写一个 规则, 去验证 **字符串** 是否符合规则
    + 正则也是一个 JS 的复杂数据类型
正则表达式的创建
    1. 字面量创建正则表达式
      =&gt; var reg = /abcd/
    2. 内置构造函数创建正则表达式
      =&gt; var res = new RegExp('abcd')

  正则表达式两种创建方式的区别
1. 标识符的书写
    =&gt; 字面量方式, 直接书写在正则的最后面
    =&gt; 内置构造函]]></description><category></category></item><item><title><![CDATA[JS基础 操作DOM元素语法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280144</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280144</guid><author>xiaodingmao</author><pubDate>Sat, 31 Jul 2021 19:52:25 +0800</pubDate><description><![CDATA[1获取元素
获取非常规标签 html body head
var html=document.documentElement
var body=document.body
var head=document.head

获取常规标签
1、根据ID获取元素 document.getElementById('ID名字')
   如果没有对应的ID元素，就是null
2、根据类名获取元素 document.getElementsByClassName('类名')
   返回伪数组，伪数组内第[n]个才是元素
3、]]></description><category></category></item><item><title><![CDATA[JS基础 操作DOM元素尺寸 （offset、client 偏移量 窗口尺寸）语法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280336</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280336</guid><author>xiaodingmao</author><pubDate>Sat, 31 Jul 2021 19:36:30 +0800</pubDate><description><![CDATA[offset
一个元素在页面（文档流）的占位
元素.offsetWidth
元素.offsetHeight
得到该元素的内容+padding+border的尺寸
display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸

client
元素.clientWidth
元素.clientHeight
得到元素的内容+padding的尺寸
注意：display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸

元素偏移量
结构父级：该标签外]]></description><category></category></item><item><title><![CDATA[JS基础 DOM基础 详解语法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280257</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280257</guid><author>xiaodingmao</author><pubDate>Sat, 31 Jul 2021 19:28:09 +0800</pubDate><description><![CDATA[1获取元素
获取非常规标签 html body head
var html=document.documentElement
var body=document.body
var head=document.head

获取常规标签
1、根据ID获取元素 document.getElementById('ID名字')
   如果没有对应的ID元素，就是null
2、根据类名获取元素 document.getElementsByClassName('类名')
   返回伪数组，伪数组内第[n]个才是元素
3、]]></description><category></category></item><item><title><![CDATA[JS基础 DOM事件 详解语法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280186</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119280186</guid><author>xiaodingmao</author><pubDate>Sat, 31 Jul 2021 19:21:02 +0800</pubDate><description><![CDATA[了解事件
了解事件：
由代码方式和页面内容约定好的一个行为
当 用户操作的时候, 就会触发对应的函数
事件三要素：
  1事件源：和谁约定事件（并不一定由事件源触发事件）
  2事件类型：约定了一个事件
  3事件处理函数：当行为发生时，需要执行的函数

事件绑定：
1 DOM 0级事件
语法：事件源.on事件类型=事件处理函数
特点：只能给同一个事件源同一事件类型绑定一个事件处理函数
2 DOM 2级事件：事件监听
标准浏览器：
语法：事件源.addEventListener('事件类型'，事件处理函数)]]></description><category></category></item><item><title><![CDATA[JS基础 操作BOM (浏览器对象模型browser object model）语法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119152321</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119152321</guid><author>xiaodingmao</author><pubDate>Tue, 27 Jul 2021 20:14:43 +0800</pubDate><description><![CDATA[弹出层
window.alert('提示文本') 提示框 没有返回值
window.confirm('提示文本') 询问框，返回布尔值
window.pormpt('提示内容') 输入框 返回用户输入的内容，或者返回null
三个弹出层会阻断程序的进程，直到用户操作为止，返回值是string类型

浏览器的历史记录　history成员
window.history.back()历史回退 前提是有历史页面
window.history.forward() 历史前进，前提是经历过历史回退
window.hist]]></description><category></category></item><item><title><![CDATA[js基础 时间 对象Date及常用方法 * 定时器]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119152132</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119152132</guid><author>xiaodingmao</author><pubDate>Tue, 27 Jul 2021 20:03:34 +0800</pubDate><description><![CDATA[时间对象基本概念
格林威治时间：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]]></description><category></category></item><item><title><![CDATA[JS-Array数组 arr基础及常用方法快速入门]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119151875</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119151875</guid><author>xiaodingmao</author><pubDate>Tue, 27 Jul 2021 19:56:24 +0800</pubDate><description><![CDATA[数组Array
复杂数据类型

一、创建
字面量方式创建
var arr = []
内置构造函数创造
var arr = new Array()

二、数组的基本操作
1. length属性
读：数组名.length
得到数组的长度，值是一个number数据类型
写：数组名.length=数字
修改数组的长度
如果设置的数字比本身长度大，那么多出来的内容用empty补齐
2、索引
从0开始，依次 +1，最后一位length-1
读：数组[索引]=值
获取该索引位置的数据，如果没有该索引位置，返回unfefi]]></description><category></category></item><item><title><![CDATA[JS基础 string*字符串及常用方法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119151774</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119151774</guid><author>xiaodingmao</author><pubDate>Tue, 27 Jul 2021 19:45:05 +0800</pubDate><description><![CDATA[基本数据类型，包装数据类型
一、创建
字面量：var str='ni hao'
内置构造函数：var str=new String('ni hao')

二、基本操作
1、length属性 字符串.length
2、索引属性，只能读，不能修改
3、遍历字符串

三、字符串常用方法
1 字符串.toLowerCase()字母换成小写
2 toUpperCase()字母换成大写
3 charAt(索引)该索引位置的对应字符
4 charCodeAt(索引) 该索引对应字符，unicode编码
5 split()]]></description><category></category></item><item><title><![CDATA[JS基础-操作数字Math常用方法]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/119151596</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/119151596</guid><author>xiaodingmao</author><pubDate>Tue, 27 Jul 2021 19:38:20 +0800</pubDate><description><![CDATA[操作数字 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()]]></description><category></category></item><item><title><![CDATA[前端原生js*轮播图*案例面向过程+详解*]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/118883538</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/118883538</guid><author>xiaodingmao</author><pubDate>Sun, 18 Jul 2021 21:28:27 +0800</pubDate><description><![CDATA[js源码 （html css 参考js类语法面向对象实现轮播图）


/*
  轮播图js代码
*/
// 1. 获取元素
// 1-1. 获取承载图片的 imgBox
const imgBox = document.querySelector('.imgBox')
// 1-2. 可视窗口的盒子
const banner = document.querySelector('.banner')
// 1-3. 承载焦点的盒子 pointBox
const pointBox = document.queryS]]></description><category></category></item><item><title><![CDATA[原生js经典案例*轮播图]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/118882709</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/118882709</guid><author>xiaodingmao</author><pubDate>Sun, 18 Jul 2021 21:15:43 +0800</pubDate><description><![CDATA[直接来代码！

h5


&lt;div class="banner" id="banner"&gt;
        &lt;ul class="imgBox"&gt;
            &lt;li class="active"&gt;&lt;img src="" alt=""&gt;&lt;/li&gt;
            &lt;li &gt;&lt;img src="" alt=""&gt;&lt;/li&gt;
            &lt;li &gt;&lt;img sr...]]></description><category></category></item><item><title><![CDATA[前端js经典小抽奖*点名demo]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/118881451</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/118881451</guid><author>xiaodingmao</author><pubDate>Sun, 18 Jul 2021 19:27:29 +0800</pubDate><description><![CDATA[被公司点名？迟到啦？

高大上抽奖？

请看下面:

效果图



代码来了：

html5


&lt;div class="bigBox"&gt;
    &lt;ul class="box"&gt;
        &lt;!-- 根据人数渲染 &lt;li&gt; &lt;/li&gt;  --&gt;
        &lt;/ul&gt;
        &lt;!-- 设置开始 停止 中奖者 --&gt;
        &lt;div class="btn"&gt;
           .]]></description><category></category></item><item><title><![CDATA[前端*js经典案例*选项卡]]></title><link>https://blog.youkuaiyun.com/xiaodingmao/article/details/118880555</link><guid>https://blog.youkuaiyun.com/xiaodingmao/article/details/118880555</guid><author>xiaodingmao</author><pubDate>Sun, 18 Jul 2021 18:17:32 +0800</pubDate><description><![CDATA[选项卡作为前端开发必须项，下面简单做了个面向对象开发的选项卡：

html5 部分


    &lt;!-- 第一个 --&gt;
&lt;div class="box" id="box1"&gt;
        &lt;ul&gt;
            &lt;li class="active"&gt;1&lt;/li&gt;
            &lt;li&gt;2&lt;/li&gt;
            &lt;li&gt;3&lt;/li&gt;
        &lt;/ul&]]></description><category></category></item></channel></rss>