- 博客(53)
- 收藏
- 关注
RSS订阅原创 新老React入口写法
// import ReactDOM from 'react-dom'import { createRoot } from 'react-dom/client'import { Component } from 'react'import './index.css'// 类组件(了解):重点掌握函数组件// - 使用 ES6 的 class 创建的组件，叫做类（class）组件// - 约定1：类名称也必须以大写字母开头// - 约定2：类组件应该继承 React.Component 父..
2022-04-10 08:59:58
944
原创 02-Node.js的模块化
一、模块化分类自定义模块 NodeJS中，创建的JS文件都是自定义模块。（也就是处处皆模块） 内置模块（核心模块） 安装Node之后，自带了很多内置模块。我们可以直接加载使用他们。 第三方模块 其他人编写的模块，发布到 npm 网站 上，我们可以下载使用。 二、自定义模块jia我们写好了一个具有某种功能的js文件，如何让其他的文件使用...
2022-01-06 19:44:58
530
原创 01-Node.js的使用环境搭建
目录一、Node.js简介二、下载安装一、安装2、查看已安装的Node.js的版本号三、在Node.js环境中运行JavaScript一、Node.js简介Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。通俗的理解：Node.js 为 JavaScript 代码的正常运行，提供的必要的环
2022-01-06 18:49:19
308
原创 数据可视化Echarts
一、Echarts准备工作Apache ECharts由官网下载对应的js文件即可，引入html里二、使用步骤1、准备好一个DOM元素，用来盛放图表，图表在页面上的宽度将由此DOM元素决定<div id="main" style="width: 600px;height:400px;"></div>2、初始化echart实例，固定写法var myChart = echarts.init(document.getElementById('选择盛放图表的DOM
2022-01-02 18:45:07
371
原创 Ajax-原生JS实现Ajax请求
一、Ajax的核心：XMLHttpRequest概念:XMLHttpRequest是浏览器中内置的一个构造函数(属于BOM和DOM范畴)，用来创建对象的作用:用来发起Ajax请求的,是Ajax的核心原理1、使用XMLHttpRequest进行发送请求分析ajax请求axios({ url:'请求地址', method:'请求方式', //查询参数 //请求体}).then(function(res){})2、XMLHttpRequest中必须要有 请求
2021-12-26 14:54:31
2189
原创 Ajax-03
目录一、如何一次性拿到form范围内表单数据二、axios的简写形式1、get简写形式a)不带查询参数的写法b)带查询参数2、post简写形式a)不带请求体的b)带有请求体数据c)带有查询参数、请求体数据的三、全局默认设置四、拦截器五、文件上传一、如何一次性拿到form范围内表单数据表单序列化:当提交表单的时候,通过表单序列化获取表单中所有的数据表单序列化就是一种获取表单数据的方式使用方法：form标签.serialize()代码演示：
2021-12-26 11:49:49
273
原创 Ajax-02
目录一、post请求1、post请求基础2、用post请求向服务器发送数据二、get请求和post请求三、报文1、Ajax请求中的报文2、响应报文:四、业务状态码一、post请求1、post请求基础作用: post请求: 向服务器增加数据应用场景: 注册,登录,上传文件...post请求语法:axios({ //设置路径 url: '地址', //设置提交方式 method: 'post'}).then(func
2021-12-26 10:51:05
222
原创 Ajax之基础知识
目录一、什么是Ajax?二、Ajax请求的使用1.Ajax请求使用步骤2.如何发送Ajax请求1.(现在没落了)通过jQUery方式2.(现在重点用这个)axios发送Ajax请求3.详解发送了get请求后客户端做了哪些事三、编码解码方法一、什么是Ajax?核心:就是从服务器端进行数据交互的一种技术通俗:通过Ajax从服务器获取数据为什么要从服务器获取数据?在实际开发中需要动态的从服务器获取数据。客户端和服务器：什么是客户端?概念:手机电脑都属于
2021-12-24 21:02:08
517
原创 jQuery-03
一、jQuery中的遍历1、对象的遍历格式：jQuery对象.each(function(index,item){})index代表索引值,item代表数组元素(由于jquery对象存放的都是标签,所以一般都是标签对象)代码演示：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Co.
2021-12-20 15:29:36
180
原创 jQuery-02
目录一、jQuery中的hover事件二、jQuery中的动画1、内置动画1）show()和hide() | 由左上角缩放出现消失2）slideDown()和slideUp() | 上下滑动出现消失3）fadeIn()/fadeTo()和fadeOut() | 淡显淡隐2、自定义动画3、动画队列现象三、jQuery中获取标签属性第一:jQuery.prop()第二: jQuery.attr()四、获取标签内容1、获取非表单元素内容...
2021-12-19 22:13:19
1183
原创 jQuery-01
目录一、$符号介绍二、通过jQuery的方式获取元素1、基本语法2、其他选择器获取元素3、通过标签关系获取元素a）根据父元素获取子元素b）根据子元素获取父元素c）获取兄弟元素三、DOM对象和jQuery对象DOM对象和jQuery对象的转换四、jQuery给元素注册事件语法五、通过jQuery操作标签样式六、通过jQuery方式给标签设置样式删除类名切换类名判断是否具有某个类名七、点击获取索引值一、$符号介绍1\ $ 符号是j.
2021-12-17 18:12:15
623
原创 JS高级之ES6类与对象、静态成员、类的继承
一、类与对象什么是类？好比：人类、动物类就是一个群体的统称类里描述这一类群体，有哪些特征和行为，所谓的特征对应到代码中就是属性，行为对应到代码中就是方法类理解为是一套描述数据的模板，但是没有具体的数据在ES6以前JS里是没有类专门的语法，都是通过 构造函数 起到类的作用什么是对象？某一个群体里的实际例子对象可以理解为是根据模板创造出来的具体的数据所以我们经常把 创建对象 叫做 实例化对象ES6里声明一个类的语法...
2021-12-17 17:22:32
408
原创 JS高级之this指向
一、this的指向函数直接调用，this就是window函数如果被对象调用，谁调用，this就是谁函数绑定到事件里，被事件触发调用，this就是绑定这个事件的元素函数被new调用，那么函数里的this就是new创建出来的对象函数被定时器调用，那么this就是window如果是箭头函数，当前this是什么，箭头函数里的this就是什么二、修改this指向之 call语法：函数.call(要修改的this指向, 实参列表)其实以前该怎么给函数传参，现在依然怎么传，只不过
2021-12-17 17:13:51
105
原创 JS高级之使用instanceof查询复杂对象类型
格式： 对象 instanceof Date/Array/Object，如果对象属于Date/Array/Object的话，返回true，否则返回false。注意，数组、对象在instanceof Object的判断下都是true，即复杂类型皆对象作用：用来判断是不是某种复杂类型，如果是得到true，如果不是得到false为什么不用typeof？因为typeof只对基本数据类型比较精准，复杂类型不行，复杂类型都只会得到Object console.log...
2021-12-17 16:38:13
557
原创 JS高级之给数组扩展方法
一、给数组扩展方法例如：数组有没有一个求最大值的方法？没有需求：给数组加一个 max 方法，可以求出数组里的最大数，并且要让每个数组都有这个方法1、如何给数组扩展方法原理：给数组（Array）对象添加一个原型对象名叫max，并且给这个叫max的原型对象设置一个方法。但是方法里操作的数据不能写死，而应该谁调用就用谁的数据，所以也就是说要用 this Array.prototype.max = function () { // consol
2021-12-17 15:51:48
1428
原创 JS高级之原型对象、三角关系、面向对象的三大特征
目录开辟空间的细节构造函数里内存浪费的问题原型对象__proto__对象成员访问规则面向对象的三大特征继承原型链开辟空间的细节什么时候会开辟堆空间的总结有 new 就会开新的堆空间遇到 function 声明函数也会开辟一个新空间遇到 {} 或者 [] 也会开辟一个新的堆空间{} 相当于 new Ob...
2021-12-17 15:19:21
177
原创 JS高级之字符串方法
目录1、trim()去除字符串两边的空格2、substr() 截取字符串3、把字符串当作伪数组4、split()按某个符号切割成数组5、toUpperCase()转大写6、toLowerCase()转小写字符串的恒定性：也就是说字符串不可改！字符串不可改，所以我们学的任意方法，都不会改变原本的字符串只会产生一个新的字符串1、trim()去除字符串两边的空格格式： 字符串.strim() 返回两边没有空格的字符串 let s...
2021-12-17 14:57:02
472
原创 JS高级之数组方法
一、数组方法1、拼接一个数组 数组一.concat(数组二) // concat拼接一个数组 let arra = ['a', 'b', 'c', 'd'] let arrb = ['1', '2', '3', '4'] // concat会组合一个新数组,并不会影响原来的数组 let arr = arra.concat(arrb) console.log(arr);2、将...
2021-12-14 20:50:46
900
原创 JS高级之静态成员和实例成员
成员 就是指属性、方法的统称 静态成员是指 由构造函数直接调用的属性、方法叫静态成员 实例成员是指 由构造函数创建出来对象才能调用的属性和方法就叫实例成员 实例化： 创建一个对象，也可以叫实例化一个对象 静态成员优势 调用方法 实例成员优势 操作不同数据 成员：就是指属性、方法的统称静态...
2021-12-12 16:40:34
1059
原创 JS高级之解构赋值
一、数组解构语法：按顺序取 变量之间用逗号隔开let [ 变量列表 ] = 数组变量列表里的变量比数组长度多的情况：按顺序赋值，多出来的变量值是undefinedlet [变量*5] = 数组 // 但是这个数组只有三个变量列表里的变量比数组长度少的情况：按顺序赋值let [变量*2] = 数组 // 数组假设长度为5只取2个，剩余都放到一个新数组里let [变量*2, ...新数组名字] = 数组取中间第三、第四个let [,,变...
2021-12-12 16:36:43
472
原创 JS高级之箭头函数
一、箭头函数的基本介绍与使用箭头函数也是函数，但是只能作为表达式（也就是说给变量赋值、或者作为回调函数、或者作为自执行函数）来使用，不能声明// 声明function foo () { }// 表达式let f = function () { }let f = 箭头函数箭头函数的语法(形参列表) => { 函数体}实例： // 这就是一个无参数无返回值的函数 let foo = () =&g
2021-12-12 16:27:37
1138
原创 JS高级-闭包
闭包 就是一种函数，一种可以访问另外一个函数内部变量的函数闭包作用1： 可以让外界间接访问到函数内部变量闭包作用2： 延长局部变量的生命周期，所以它不会被销毁，所以不要大量使用闭包function fn1 () { let num = 10 return function inner () { console.log(num) }}// res就是返回的那个闭包函数let res = fn1()res() // 相当于间接的
2021-12-10 16:56:55
202
原创 JS高级-变量与函数提升
预解析阶段里，除了有检测变量声明是否正常，和解析要开多少空间以外，还有个步骤，就是变量提升与函数提升变量与函数提升指的是所有用 var 声明的变量和 function 声明的函数，会把他们的声明语句提前到它所在的作用域最顶端，赋值语句留在原地let没有提升console.log(age) // undefined 因为变量提升后，var age会提升到最前面var age = 99console.log(age) // 99...
2021-12-10 11:44:09
48
原创 JS高级-预解析
浏览器在执行JS代码之前，会先把所有的变量与函数声明先解析一遍为什么要这么做？因为它需要提前确定大概开多少个空间，空间够不够，先提前开好，这样子到时候执行代码，就不用临时开空间，大大提升性能等好处，所以总而言之，预解析是在正儿八经执行代码之前来解析的，所以称之为预解析如何验证，是在代码执行之前解析的？以前就算某句代码报错，但是它前面的代码会被执行，只是后面代码不再执行了。但是如果你是变量声明报错，里面一句代码都不会执行，所以证明有个阶段叫预解析，在预解析里如果...
2021-12-10 11:42:52
54
原创 JS高级-const关键字
const 是声明 常量 的变量： 可以变化的量，顾名思义，声明后还可以对它进行修改常量： 声明的数据不能修改的 const num2 = 10 num2 = 30 // 报错，因为常量值不能被修改const也是认块级作用域 { const num = 10 console.log(num) } console.log(num) // 报错，const也认块级作用域cons
2021-12-10 11:41:14
1165
原创 JS高级-局部作用域
分为两种：函数作用域、 块级作用域局部作用域里声明的变量：就只能在它所在的局部作用域里访问，出了作用域就无法访问函数作用域：声明一个函数，函数内的作用域就是函数作用域，这是局部的块级作用域：一个{}（不包含对象）包出来的空间，就是块级作用域，是局部的var 声明的变量认函数作用域 ， let 声明的变量认 块级作用域例：{ let num = 10}console.log(num) // 报错，因为let声明的变量...
2021-12-10 10:27:04
275
原创 WebAPI之正则表达式
目录一、正则的基本使用步骤二、普通字符和元字符1、元字符-边界符<1> 精确匹配2、元字符 - 量词3、元字符 - 字符类<1>| 或<2>[] 或的集合<3>[-] 范围<4>[^] 非，除了某范围外<5> . 表示\r与\n以外的任意字符<5> 匹配中文4、元字符 - 预定义类三、正则修饰符四、正则本质是对象与它...
2021-12-09 20:26:08
197
原创 WebAPI之scroll、offset、client与轮播图
一、scroll家族scroll卷轴的意思，整个内容被称为卷轴，边框围绕的观察框被称为视窗，视窗大多数是一个div视窗.scrollWidth 和 视窗.Height指的是是卷轴的宽度和高度视窗.scrollLeft 和 视窗.scrollTop指的是视窗左侧到卷轴左侧的距离，同样的 视窗.scrollTop指的是视窗上边到卷轴上边的距离视窗使div盒子，卷轴是一张图片案例：设置一个按钮，每次按动就能让滚动条往右走200px<!DOCTYPE ht...
2021-12-06 20:44:27
208
原创 WebAPI之日期对象、事件对象、事件流、阻止默认行为
一、日期对象1、日期对象的创建let time = new Date()获取计算机当前时间给变量timelet time2 = new Date('2021-1-5 12:45:32')创建时间对象时指定时间（传的是字符串）let time3 = new Date(2021,0,2,16,32,12) // 代表2021年1月2日16点32分12秒创建时间对象时指定时间（传的是数字，分别是年、月、日、时、分、秒），time3代表2021年1月2日16点32分12秒，如果对应
2021-12-05 20:24:10
417
原创 WebAPI之节点关系查找、创建元素、添加元素、克隆元素、删除元素
一、节点关系查找1、节点介绍一般的节点有这三类关系父节点(包含的叫父节点)、子节点（被包含的叫子节点）、兄弟节点。网页中所有内容都称之为节点节点分类： 元素节点：指的就是标签属性节点：指的就是属性文本节点：指的就是文本其他节点：注释、document2、查找父节点元素.parentNode案例：点击x图标，删除自己父节点，常见于广告的关闭<!DOCTYPE html><html...
2021-12-05 13:10:54
632
原创 WebAPI之事件监听、高阶函数、环境对象、排他思想
一、事件监听1、事件监听的语法事件源.addEventListener('事件类型', 响应程序)事件监听三要素： 事件源：发生事情的元素（标签） 事件类型：是具体发生的什么事，比如是被点击了，还是被双击了，还是被鼠标经过。。。 响应程序：就是一个函数，也就是当事件发生后调用的函数注意： 事件类型要加引号！例如：如果我希望点击一个按钮，弹出一个提示框，那么事件源就是按钮，事件类型就是点击，响应程序就是弹出一个提示框。注意： 事件类型要加引号！代码：...
2021-12-02 17:24:44
774
原创 WebAPI之基本概念、查找元素、修改元素、间歇函数
目录一、基本概念1、Web APIs是什么？2、BOM和DOM二、查找元素1、document.querySelector2、document.querySelectorAll三、修改元素1、修改元素的属性2、修改元素的样式3、修改元素的内容<1>innerText<2>inneHTML4、修改标签的类名<1>.className<2>.classList.add<3>.classLi
2021-12-02 14:28:35
642
原创 JS基础之对象
目录一、什么是对象1、对象的创建2、对象的引用二、对象的增、改、删、遍历1、对象的增加2、对象的修改3、对象的删除4、对象的遍历三、内置对象一、什么是对象对象是一组相关的数据集合，对象属于引用类型，对象相对于数组好处在于对象能够设置属性、方法，这样能直观的从字面量上表达数据的含义。对象包含两种内容，属性和方法，他们本质在于值的不同，包含函数的就成为方法。 let 属性名= { 属...
2021-11-28 21:57:23
314
原创 JS基础之数组
数组的基础内容,以及十分重要的数组的增删改操作,其中重中之重就是splice操作,如果对splice操作有深刻的理解,那么对数组的操作一定会得心应手!!!!
2021-11-25 20:37:12
323
原创 JS基础之函数
目录一、什么是函数？1、语法2、调用函数二、函数的参数1、形式参数（形参）2、实际参数（实参）3、参数传递4、为形参设置默认值三、例子一、什么是函数？函数：一段代码的封装。函数的作用：能够在任意地方重复执行某些代码，提高代码的复用性。1、语法function 函数名 () { 函数体 }注意：函数在定义完之后并不会执行，只有等调用的时候才会开始执行。2、调用函数语法：函数名();函数后面加小括号称为调用（执行函
2021-11-25 16:43:40
330
原创 JS基础之for循环
目录一、语法1、循环三要素：2、for循环基本语法二、执行三、案例一、语法1、循环三要素： 1、循环变量初始化 2、循环条件 3、循环变量改变2、for循环基本语法 for ( 变量初始化；条件判断；变量改变 ) { 循环体 }二、执行 ...
2021-11-25 15:38:14
675
原创 JS基础之while循环
while循环语句while ( 条件 ) { 循环体 }while的执行过程 判断条件（true）进入循环 ==> 执行循环体 ==>判断条件（true）进入循环 ==>执行循环体 ==>判断条件（false）退出循环 跳出循环循环三要素 1、变量初始化（let i = 1）; ...
2021-11-23 20:49:25
1307
原创 JS基础之if语句和switch语句
一、if语句1、单分支结构语法：if (条件) { 语句块 }执行：如果条件（true）执行语句块、条件（false）就不执行语句块例：如果你年龄够18岁，你就可以出国啦。代码： let age = 23; if (age >= 18) { document.write('可以出国'); }2、双分支结构语法：if (条件) { 语句块1 } else { 语句块2 }执行：如果条件(true)
2021-11-22 21:18:39
881
原创 JS基础之运算符
一、算术运算符+ 加法运算符 - 减法运算符 * 乘法运算符 / 除法运算符 % 取余运算符 1、加法运算符使用加法运算符"+"进行加法运算代码： let num1 = Number(prompt('请输入第一个数')); let num2 = Number(prompt('请输入第二个数')); l...
2021-11-22 17:16:36
857
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人