敏儿啦-CSDN博客

原创添加树形同级结构

const tree = [ { key: '1', title: '1', children: [ { key: '1-1', title: '1-1', children: [] }, { key: '1-2', tit

2022-04-24 15:52:11 447

原创树形结构寻找父节点

const tree = [ { key: '1', title: '1', children: [ { key: '1-1', title: '1-1', children: [] }, { key: '1-2', tit

2022-04-24 15:10:59 825

原创树形结构添加子节点

const tree = [ { key: '1', title: '1', children: [ { key: '1-1', title: '1-1', children: [] }, { key: '1-2', tit

2022-04-24 11:31:40 1169

原创复制树（递归）

const copyTree = (node) =>{ if(node && node.length) { return node.map(item=>({ title:item.title, key:item.key, children:copyTree(item.children) })) }else { return; }}

2022-04-24 10:33:31 231

原创树形结构扁平化（递归）

const tree = [ { title: 'title1', key: '1', children: [ { title: 'title1-1', key: '1-1', children: [] }, { title: 'title1-2',

2022-04-21 11:08:46 1113

1. 如何发送一个ajax请求？创建ajax对象语法：var xhr = new XMLHttpRequest();xhr就是我们需要的ajax对象，能帮我们发送一个请求配置本次请求的信息语法：xhr.open(“请求方式”,“请求地址”,是否异步)；请求地址：基准地址+接口地址默认为异步的，选填把配置好的请求发送出去语法： xhr.send();配置一个请求完成的事件语法： xhr.onload = function(){代码}时机：会在当前请求完成以后被触发（后端给回对应的响应

2021-09-11 22:23:25 104

原创 Emmet语法

ctrl+/ 快速的生成注释代码html:5 生成html5的最基础的页面结构输入任意的html标签，都会自动的生成完整的闭合标签生成带有id、class的HTML标签4-1 使用**#生成id属性**，例如输入div#header则生成<div id="header"></div>4-2 使用**.生成class属性**，例如输入div.section则生成<div class="section"></div>..

2021-09-11 17:20:07 64

原创运动函数

运动函数第一版// ele 要运动的元素// type 要运动的样式名// 要运动的目标位置 targetfunction move(ele,type,target) { let distance = 0; const timer = setInterval(()=>{ distance += 5; ele.style[type] = distance + 'px'; if(distance >= target){ clearInterval(timer);

2021-08-24 22:58:13 458

原创正则表达式

创建正则表达式字面量方式创建 var reg = /abcd/内置构造函数创建 var reg = new RegExp(“abcd”)两种创建方式的区别常用方法test() 匹配语法：正则表达式.test(“要检测的字符串”)返回值：布尔值如果该字符串符合正则的规则，那么就是true，否则为falseexex() 捕获正则表达式的符号 - 基本元字符元字符 =》所有的文本内容=》特殊符号，用符号表示一类内容\d 表示一位数字\D 表示一位非数字\s 表

2021-08-23 10:00:25 60

原创自执行函数+this指向

自执行函数一个会自己调用自己的函数当这个函数定义好之后，直接被调用自定义函数的意义：+ 利用函数的私有作用域，保护变量私有化+ 不去污染全局语法：=> (funciton(){})()=> ~function(){}()=> !function(){}()this指向=> 要么全局使用 this就是window=> 要么使用在函数内 this表示的是该函数的context(执行上下文)箭头函数除外普通调用函数名() this指向

2021-08-20 22:41:16 776

原创事件处理函数

事件绑定DOM 0级事件绑定语法：事件源.on事件类型 = 事件处理函数给一个事件源的同一个事件类型，只能绑定一个事件处理函数DOM 2级事件（事件侦听器/事件监听器）2-1：标准浏览器语法：事件源.addEventListener(‘事件类型’，事件处理函数)特点：1. 可以给同一个事件源的事件类型绑定多个事件处理函数多个事件处理函数，顺序绑定，顺序执行 div.addEventListener('click',function(){ console.log('我被点击了'

2021-08-19 10:10:02 1564

原创 DOM文档对象模型

DOM Document Object Model 文档对象模型操作页面元素=》操作html元素（增删改查）=》操作元素的样式=》操作元素的属性=》操作元素添加事件=》…DOM一树状结构出现=》顶层是document=> 最大的标签是html=>下面分成head 和 body=> 操作dom就是对这个树上获取元素获取非常规标签1. html=> document.documentElement=>得到的就是该页面的html标签2. head

2021-08-17 10:24:50 88

原创 Math方法

MathMath.random(数字)作用：获取一个0-1之间的随机小数返回值：一个0-1之间的随机小数注意：有可能得到0，但是绝不可能得到1Math.round(数字)返回值：四舍五入取整后的结果Math.ceil(数字) 向上取整后的结果Math.floor(数字) 向下取整后的结果Math.abs(数字) 取绝对值以后的结果Math.pow(底数，指数) 取幂之后的结果Math.sqrt(数字) 该数字的算术平方根Math.max(数字1，

2021-08-13 17:50:54 59

原创字符串常用方法

字符串的基本操作字符串有一个length属性是一个只读属性，只能获取不能设置=>空格也是一个字符，中文也是一个字符字符串有一个索引属性是一个只读属性，智能获取不能设置=》语法：字符串[索引]=》获取到的就是该字符串指定索引位置的那一位字符->如果有该索引位置，那么就是该索引位置的字符-> 如果没有该索引位置，那么就是undefined遍历字符串 for循环字符串的常用方法注意：所有字符串常用方法，都不会改变原始字符串，都是以返回值的形式出现结果c

2021-08-13 17:26:56 97

原创数组常用方法

数组常用方法会改变原始数组push() 向数组的末尾追加数据，返回值：数组最新的pop() 删除数组的最后一个数据，返回值：被删除的数据unshift() 从数组最前面插入一个数据返回值：数组最新shifit() 从数组最前面删除一个数据返回值：被删除的数组reverse() 反转数组返回值：反转后的数组原先数组倒过来sort() 排序，把每一个数据一位一位的看待进行排序，返回值：排序后的数组数组.sort(funciton(a,b){return a-b}) 所有

2021-08-13 14:55:33 85

原创选中与非选中状态转换

.root { display: flex; flex-wrap: wrap; span { padding: 4px 12px; color: rgba(0, 0, 0, 0.5); font-size: 12px; font-family: PingFangSC-Regular; line-height: 14px; border: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer; m

2021-07-30 10:28:22 104

原创图片左右滑动，并展示出选择的序号

import React, { useState, useEffect } from 'react';import styles from './index.less';const ImageSwitch = (props) => { // 传入图片的大小，及图片图片是数组的形式 const { width = 150, height = 150, picList = [] } = props; const [newPicList, setNewPicList] = useStat

2021-07-30 09:38:14 168

原创图片左右切换进行查看

import React, { useState } from 'react';import styles from './index.less';const ImageSwitch = (props) => { // 传入图片的大小，及图片图片是数组的形式 const { width = 150, height = 150, picList = [] } = props; const [picIndex, setPicIndex] = useState(1); // 当前图片展

2021-07-10 22:40:45 255

原创 react实现小方块随意拖拽

import React, { useState } from 'react';import ReactDOM from 'react-dom';const App = (props) => { const [needX,setNeedX] = useState(0); const [needY,setNeedY] = useState(0); const [disX, setDisX] = useState(0); const [disY, setDisY] = useStat

2021-03-29 14:58:08 885

原创 React

1.ReactReact 构建用户界面的JavaScript库，主要用于构建UI界面。特点：声明式的设计高效，采用虚拟DOM来实现DOM的渲染，最大限制的减少DOM的操作。灵活，跟其他库灵活搭配使用JSX，俗称JS里面写HTML，JavaScript语法的扩展组件化、模块化。代码容易复用，2016年之前大型项目非常喜欢react单向数据流。没有实现数据的双向绑定。数据 =》视图=》事件=》数据创建项目通过script引入使用，仅用于学习调试使用<script crosso

2020-11-19 11:12:49 130

原创数组循环

1.forEachforEach 对数组直接进行循环，相当于直接for循环,没有返回值let arr = [1,2,3,4,5,6];arr.forEach((item,index,arr)=>{ console.log(item); console.log(index); console.log(arr);})2.mapmap,对数组每一项进行加工，加工完成之后返回1个新的数组let arr2 = ['香蕉','苹果','雪梨'];let result = arr2.

2020-11-13 19:11:34 474

原创同步异步

同步与异步同步：后一个任务等待前一个任务执行完毕之后，再执行，执行顺序和任务的排序顺序一致异步：异步是非阻塞的，异步逻辑与主逻辑相互独立，主逻辑不需要等待异步逻辑完成，而是可以立即继续下去同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线

2020-11-09 10:16:06 859

原创原型、原型链和继承

1. 原型prototype和_proto_每个对象都有一个_proto_属性，并且指向它的prototype原型对象每个构造函数都有一个prototype原型对象prototype原型对象里的constructor指向构造函数本身实例对象的_proto_指向构造函数的prototype，从而实现继承prototype对象相当于特定类型所有实例对象都可以访问的公共容器看一段代码就明白了 function Person(nick, age){ this.nick = ni

2020-10-30 10:16:21 113

原创闭包

闭包什么是闭包？闭包是指内部函数总是可以访问其所在的外部函数中声明的变量和参数，即使在其外部函数被返回（寿命终结）了之后函数嵌套函数内部函数使用外部函数的形参和变量被引用的形成和变量不会被垃圾回收机制所回收在 JavaScript 中，所有函数都是天生闭包的（只有一个例外）因为JS函数在创建时保存了当前的词法环境，任何JS函数都可以通过链式作用域访问到外部环境的变量，所以每个函数都可以看成是闭包。子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之

2020-10-29 15:05:33 62

原创 Vue进阶(2)

1. vue-router 的一级配置下载路由，之前在创建项目时已经安装,项目已经自动创建好了router.jsrouter.js写上切换的路由配置将vue文件放在views，页面级的组件放在views在router.js进行引用 import Film from ‘@/views/Film’ @代表指向src文件的别名在main.js中把router引入进来并配置 import router from ‘./router’在new Vue中配置 router：rou

2020-06-03 08:45:50 128

原创 Vue进阶(1)

1.slot插槽（内容分发）内容分发：把父组件的内容分发到子组件里面a.单个slotb.具名slot（具有名字的插槽）混合父组件的内容与子组件自己的模板-->内容分发父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译 <body> <div id="box"> <child> <div slot='a'>aaaaaa</div> <div

2020-06-02 15:15:43 193

原创 Vue基础(2)

1.表单修饰符.lazy(限制实时传入服务器) 失去焦点之后才能更新.number(限制输入的为数字).trim(去掉首尾字符是空格) <body> <div id="box"> <input type="text" v-model.lazy='mytext'> {{mytext}} <!-- <input type="text" v-model.number='mynumber'> --&gt

2020-05-31 11:20:16 163

原创 Vue基础(1)

1.vue入门小案例渐进式JavaScript框架cdn下载npm下载<div id="box"> {{10+20}} <p>{{myname}}</p> </div> <div> {{10+20}} </div> <script src='../js/vue.js'></script> <script&gt

2020-05-29 11:09:34 234

原创 nodejs(1)

1.md文件笔记的编写nodewhatchrome VB runtime事件驱动非阻塞的 i/oi/o：input output 输入输出流正常下i/o的操作都是阻塞的（ajax同步）网络请求数据库处理文件的读写。。。。优点：高并发特别好why防止甩锅，明确数据交互的错误问题在谁能够书写api，斜杠青年了解前后端的交互流程全栈工程师js运行环境浏览器基本语法bomdomajax系统文件数据库（不能，不是语言不能处于安全性考虑不能）服务器

2020-05-28 10:10:54 117

原创 Jquery学习(4)-jquery方法

1.remove detachremove() 删除元素节点[注]并不会保留这个元素节点上之前的事件和行为detach() 删除元素节点[注]会保留这个元素节点上之前的事件和行为 <script src="../JS/jquery-1.11.3.js"></script> <style> #div1{width: 100px;height: 100px;background-color: red;} #div

2020-05-25 18:51:37 325

原创 Jquery学习(3)-特效函数

1.val() size() each() <script> /* val() value 获取/设置表单元素的值 size() 输出，获取网页元素的个数 each() */ $(function(){ // alert($("input").val()); //JQ取值只能取第一个符合条件元素的值 // $(

2020-05-23 21:02:46 155

原创 Jquery学习(2)-jquery方法

1. filter not hasfilter 过滤对已经获取到的网页元素进行过滤not filter的反义词has 拥有，直接判定子节点中是否有符合条件的元素 <script> $(function(){ // $("div").css("backgroundColor","orange"); // $("div").filter(".box").css("backgroundColor","orange")

2020-05-22 22:26:10 206

原创 Jquery学习(1)

什么是JQuery?一个快速、简洁的JavaScript框架设计的宗旨是"write less,do more"jQuery兼容各种主流浏览器，如IE6.0+、 FF 1.5+ 、 Safari 2.0+ 、Opera 9.0+等JQuery的好处？简化JS的复杂操作；不再需要关心兼容性；提供大量实用方法如何学习JQ？1.https://jquery.com/ JQ的官方网站（查阅中文文档）2.JQ只是辅助工具，要正确面对3.需要分阶段学习Jquery设计思想 -选择

2020-05-21 10:26:10 125

原创 JS学习（4）

1.解构中括号解构var[x,y,z]=[10,20,30];alert(x+","+y);var [x,[a,b],y]=[10,[20,30],40];大括号解构var{name,age,sex}={ age:18, name:"钢铁侠"， sex:'男' }; alert(name); alert(age); alert(sex);使用解构的好处交换两个数，比之前更加简单var [x, y] = [10, 20];[x, y]

2020-05-19 10:13:08 225

原创 JS学习（3）

1.事件和事件类型事件发生必须绑定绑定事件 1.内联模式 2.外联模式/脚本模式(最多)绑定事件格式：元素节点.on+事件类型 = 匿名函数click 事件类型onclick 事件处理函数事件类型的种类一、鼠标事件（可以绑定任意的元素节点上)click 单击dblclick 双击mouseover 鼠标移入经过子节点会重复触发mouseout 鼠标移出经过子节点会重复触发mousemove 鼠标移动（会不停的触发）mousedown 鼠标

2020-05-18 21:48:42 286

原创 JS学习（2）

1.字符串概念：所有带单引号或者双引号的都叫做字符串字符串声明通过new运算符去声明字符串 var str=new String(100)；省略new声明字符串字符串常量赋值访问字符串中的字符字符串.length 访问字符串中字符的个数 [注] 中文 utf-8(三个字符表示一个汉字) gbk(两个字符表示一个汉字) ,在计数的时候都是当作一个汉字计数 var str = “hello北京”; alert(str.length); //7访问字符串中单个字符

2020-05-18 19:25:55 281

原创 JS学习（1）

1.JS命名规则：只能由数字、字符、下划线和美元符号($)组成不能以数字开头不能是保留字和关键字大小写敏感2.数据类型：弱引用类型：给赋值什么就是什么数据类型，不建议改变数据类型值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。复合数据类型/引用数据类型：统称为object类型.里面包含的object类型、function、 Array、Date、RegExp3.运算符：

2020-05-13 20:51:26 128

原创 HTML+CSS(5)

1.CSS HackCSS Hack用来解决浏览器的兼容性问题，为不同版本的浏览器定制编写不同的CSS效果，使用每个浏览器单独识别的样式代码，控制浏览器的显示样式。Hack分类CSS属性前缀法属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀，以达到预期的页面展现效果前两个前缀加在属性前面，后面两个加载属性值后面前缀标识兼容浏览器 _ IE6 +、*

2020-05-13 10:25:32 262

原创 HTML+CSS(4)

1.BFC规范Formattion context（格式化上下文）是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。BFC即Block Formatting Contexts（块级格式化上下文），它属于上述中的其中一种规范，具有BFC特性的元素可以看作是隔离了的独立容器。容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性。触发BFC浮动元素： float除none以

2020-05-12 18:19:42 187

原创 HTML+CSS(3)

1.CSS添加省略号单行添加省略号width 必须有一个固定的宽white-space:nowrap 不让内容折行overflow：hidden 隐藏溢出的内容text-overflow:ellipsis 添加省略号div{width: 100px;border:1px solid black;white-space: nowrap;overflow: hidden;text-ov...

2020-05-10 08:53:54 354

空空如也

空空如也