- 博客(57)
- 收藏
- 关注
RSS订阅原创 展开运算符
<script> /* 1.展开运算符 ： ... 2.作用： 相当于遍历对象简写 3.应用场景： 3.1 连接数组（上拉加载下一页） ： arr1.push(...arr2) 3.2 求数组最大值 : Math.max(...arr) */ //1.用于连接数组 : 页面上拉加载下一页的时候，就需要连接数组 l...
2022-04-15 23:32:00
382
原创 箭头函数的this指向
<script> /* 箭头函数 与 function函数唯一的区别： this规则不同 1. function函数this指向有三种情况 this: 谁调用我，我就指向谁 (1)普通函数： 函数名() this指向window (2)对象方法： 对象.方法名() this指向对象 (3)构造函数： new 函数名()..
2022-04-14 23:56:30
166
原创 对象和数组的解构
对象解构 <script> /*解构赋值 ： 变量赋值简写语法 1.重点掌握 1.1 取出对象的属性 赋值给 变量 let {name,age,sex} = 对象名 1.2 取出变量的值 赋值给 对象的属性 let 对象名 = {name,age,sex} */ //1. 取出对象的属
2022-04-13 23:50:02
294
原创 递 归
<script> /* 高阶函数： 自调用函数、回调函数、闭包、递归 */ /* 1.什么是递归函数？ ： 函数内部调用自己 * 注意点： 需要满足条件才会递归，否则会导致死循环 * 递归函数和循环功能类似 2.递归函数应用场景 ： */ //单函数递归 // function fn(){ .
2022-04-12 23:36:25
95
原创 闭 包
<script> /* 1.闭包（closure）是什么？ 1.1 闭包是一个访问其他函数内部变量的函数 1.2 闭包 = 函数 + 上下文引用 的组合 2.闭包作用 : 变量污染 */ function fn(){ let a = 1 //在fn1函数中， 访问了其他函数fn内部的变量。 fn...
2022-04-11 23:06:37
92
原创 call apply bind上下文调用
call上下文调用<script> /* 1.默认情况下，this指向是无法修改的。 普通函数：函数名() this指向window 对象方法: 对象名.方法名() this指向对象 构造函数: new 函数名() this指向new创建的对象 2.上下文调用 ： 修改函数中this指向 (1)函数名.call(修
2022-04-10 23:54:58
154
原创 this的三种指向
<script> /* 1.this环境对象 ： 谁‘调用’我,我就指向谁 （相当于中文‘我’，谁说出这个字，这个字就代表谁） * 重点： 与函数声明无关，取决于函数调用 * (1)普通函数调用: 函数名() -> this指向window * (2)对象方法调用: 对象名.方法名() -> this指向对象 * (3)构造函..
2022-04-09 23:07:44
328
原创 【无标题】
arguments关键字<script> /* 1.函数中的关键字： arguments 2.arguments:获取函数所有的实参(伪数组) 3.应用场景： 例如 arr.push() 底层就是用arguments获取实参 */ function fn(a,b){ console.log(a,b)//10,20 console.log( arguments )//获取
2022-04-08 21:29:52
331
原创 ES6继承
class关键字<script> /* 1.class关键字： 声明类函数 （相当于构造函数） * (1)构造函数和原型对象写在一个大括号中： 代码清晰 * (2)class类函数必须使用new关键字，不用则会报错 ： 代码清晰 class 函数名{ //构造函数 constructor(){ }
2022-04-07 23:03:34
513
原创 原 型 链
<script> /* 1.原型链 ： 每一个实例对象都有自己的原型，而原型也是对象，也有自己的原型。以此类推，形成链式结构,称之为原型链。 2.原型链访问规则 ：就近原则 * 对象优先访问自己的成员，自己没有就找原型的，如果原型也没有，就找原型的原型。以此类推，直到原型链终点null. 如果还找不到， 属性则获取undefined，方法则报错undefined is not a function </scr..
2022-04-06 23:06:42
392
原创 面向对象三大特征
<script> /*面向对象三大特征 1.封装 ： 把代码放入对象的方法中 2.继承 ： 一个对象有另一个对象所有的成员 * js语言侧重点继承 3.多态 ： 一个对象在不同情况下的不同状态 * js语言不怎么用多态 */ </script>js继承(混入式)<script> /* 继承： 子对象有父对象..
2022-04-05 18:06:35
314
原创 【无标题】
工厂函数 <script> /* 解决代码冗余方案：封装函数 工厂函数 ： 用于创建多个对象的函数 */ function createPerson(name,age){ //1.声明对象 let p = {} //2.对象赋值 p.name = name p.age = age //3.返回值
2022-04-04 21:36:59
166
原创 内置对象
数组对象<script> /* 1.内置对象api : js作者写好的对象的一些方法 内置对象 ： js作者提前写好的对象，直接拿来使用即可 api : 是预先定义的函数 */ let arr = [20,60,88,90,100,50] /*1.数组增删改查 push() : 在数组末尾 新增元素
2022-04-03 22:31:11
163
原创 正则表达式
介绍 <script> /* 1.正则表达式(RegExp) ： 对字符串进行逻辑匹配运算 的内置对象 * 正则是对象类型 * 表达式作用：对字符串进行匹配运算 2.作用与场景 ： 表单验证 (手机号，验证码，账号。邮箱等) 3.如何使用 ： 2个流程 (1)创建正则对象： let reg = new RegExp('正则表达式')
2022-04-03 00:14:56
672
原创 存储对象
localStorage<body> <button class="btn1">setItem</button> <button class="btn2">getItem</button> <button class="btn3">removeItem</button> <button class="btn4">clear</button> <scr
2022-04-01 22:53:02
226
1
原创 五大对象
window对象 <script> /* window对象 ： 浏览器窗口 1. 是js中的顶级对象。 所有的全局函数、全局属性都是window对象的成员(属性+方法) 2. 只要是window对象的成员，在使用时可以省略window 3. window对象有一些特殊的属性不能被覆盖。 例如top不能作为全局变量名 */ console.log( w
2022-04-01 00:10:40
468
原创 三大家族
<style> * { margin: 0; padding: 0; } div { width: 150px; height: 150px; background-color: pink; overflow: auto; padding: 10px; border: 10px solid red; mar...
2022-03-30 23:46:15
127
原创 事件流与事件委托
事件冒泡 <style> .father { width: 300px; height: 300px; background-color: red; } .son { width: 100px; height: 100px; background-color: cyan; } </style> </head>
2022-03-29 23:30:30
184
原创 事件对象
事件对象的常用属性 <body> <div id="box" style="width: 200px; height: 200px;background-color: red" ></div> <script> /* 1.事件对象 : 存储与事件相关的数据。 当我们触发事件的时候，浏览器会自动捕捉触发时的鼠标(坐标点)和键盘信息(按键)，存入一个对象中，称之为事件对象
2022-03-28 23:04:14
377
原创 addEventListener
addEventListener注册事件<body> <div id="box" style="width: 100px;height: 100px;background-color: red"></div> <script> /* 1.dom中注册事件有两种语法 点语法： 只能注册一个‘同名’事件 addEventListener语法 ： 可以注册多
2022-03-27 22:40:29
343
原创 定时器
setInterval永久定时器<body> <button class="btn">移除定时器</button> <p id="pp">0</p> <script> /* 1.定时器 ： 一断代码 间隔时间 重复执行 2.定时器语法 : 2.1 setInterval : 永久定时器。 一旦开启永久重复执行，只能手动清除 开启：
2022-03-26 23:03:55
79
原创 dom节点操作
查找子节点 <body> <ul> <!-- 我是注释哟 --> 我是文本哈 <li>我是1</li> <li>我是2</li> <li>我是3</li> <li>我是4</li> <li>我是5</li> </ul> <
2022-03-25 22:48:41
43
原创 【无标题】
tab栏切换 <style> .Box { width: 240px; border: 1px solid #000; margin: 100px auto; padding: 20px; } .con { width: 100%; height: 200px; background-color: #cccccc; bord
2022-03-24 22:54:15
43
原创 开关思想
全选全部选<body> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type="checkbox"> <input class = 'check' type=
2022-03-23 19:53:56
92
原创 排他思想
排他思想 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button> <script> /* 1.点击所有按钮 : 排他思想
2022-03-22 22:23:34
44
原创 【无标题】
dom工作流程/* dom工作流程 1.代码读取到内存 2.生成DOM树 （dom语法增删改查，渲染也会跟着改变） 3.渲染DOM树 */查询元素 <div class="box">程序员</div> <p class="box">前端</p> <script>/查询元素两种方式 1.查询单个元素 : documen...
2022-03-21 23:03:08
34
原创 对象类型
对象介绍1.对象是什么 : 对象是一种复杂数据类型2.对象作用 ：以键值对方式存储多个数据3.对象与数组异同点 相同点：都是复杂数据类型，都可以存储多个数据 不同点： 存储方式不同 数组： 有序存储 对象： 无序存储(键值对)对象语法1.声明对象 let 对象名 = { 属性名:属性值, 属性名:属性值, }2.取值语法 对象名.属性名3.细节： 对象中的属性值是什么数据类型， 取出来的时候就可以使用这个类型的所有语法 如，对象的属性值是 数组， 则可以： 对象名.属性名[
2022-03-20 21:34:43
954
原创 作用域,作用域链
作用域1.js变量作用域： 变量可以使用的区域 * 作用：避免变量污染(变量名相同导致代码冲突)2.js三种作用域 2.1 全局作用域(全局变量) ： 在函数外面let的变量2.2 局部作用域(局部变量) : 在函数里面let的变量2.3 快级作用域(快级变量) ： 在分支或循环大括号中let的变量作用域链作用域链： 默认情况下，代码处于全局作用域(0级链),当声明一个函数之后就会开辟一个局部作用域（1级），而函数里面又可以声明一个函数,又会形成...
2022-03-19 21:18:38
46
原创 函数类型
函数声明/调用声明函数 : 是一个存储过程，此时不会执行函数体代码 function 函数名(){ 函数体代码： 需要存储的一段代码 }调用 ： 执行函数体代码 函数名()function 函数名() {}函数名()函数参数调用者 传递数据 函数传：调用者 函数名(实际参数)收：函数 function 函数名(形式参数){ 函数体代码 }函数传参本质： 实参给形参赋值的过程 (1)函数传参是按照传入顺序一一赋值 (2)函数每一次调用传参过程都是独立的，互不影响 (3
2022-03-18 22:14:05
36
原创 数 组
循环嵌套九九乘法表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> &l
2022-03-17 22:11:23
33
原创 流程控制-循环结构
while循环while循环语法while( 条件 true/false ){循环体：需要重复执行的代码} let num = 1 while (num <= 3) { console.log('芜湖'); num++ } console.log('完事了');for循环语法：for(语句1;语句2;语句3){循环体：需要重复执行的代码}//模拟吃10个饺子 for (let i = 1;
2022-03-16 23:27:45
30
原创 流程控制-分支结构
if单分支结构1.顺序结构(默认) ： 代码从上往下依次执行2.分支结构 ： 代码根据条件来执行语法if(条件 true/false){满足条件需要执行的代码}注意点： 小括号里面的条件可以写哪些代码呢？(1)比较表达式 ： 比较表达式结果一定是布尔类型(2)直接写布尔类型的值(3)写其他的值 ： 编译器会自动转成布尔类型来判断是否成立//需求：考试不及格爸爸才打我let score = 55 console.log('1-我今天上学了')
2022-03-15 22:13:15
86
原创 运算符与表达式
算术运算符加:+ 减:- 乘:* 除:/ 取余:%(取值为两数相除取余数)赋值运算符注意:赋值运算符左边一定是变量,因为只有变量才可以存储数据= : 右边数据存入左边的变量+= : 自身加-= : 自身减*= :/=%= //+= let num1 = 10; num1 += 10;//这行代码相当于 num1 = num1 + 10 的简写形式 console.log ( num1 );//20 //-= let n
2022-03-14 22:34:25
43
原创 【无标题】
变量的作用在内存中存储数据变量语法声明变量: let 变量名 在内存中开辟空间赋值:变量名=值 把右边的值存入左边的变量取值: 变量变量注意点let变量不允许重复声明变量赋值的时候会先销毁旧值,然后再存入新值变量给变量赋值,先拷贝后在赋值变量名的命名规则与规范强制遵守,不遵守就会报错:开头: 字母 下划线(_) $后面跟着:字母 下划线(_) $ 数字注意: 不能使用关键字常量变量 : 值可以修改, 使用let声明常量 :
2022-03-12 22:46:11
381
原创 简单数据类型
number数值类型一切数学中数字作用:数学计string字符串类型一切以引号包裹起来的内容:单引号 '' 拼接:+双引号""反引号(模板字符串) `` ${变量名}boolean布尔类型只有两个值 true falseundefined未定义变量有声明,未赋值.默认值是undefinednull空值检测数据类型typeof数据得到一个字符串,告诉你数据是什么类型数据类型转换瘾式转换隐式转换 ： 当运算符两边的
2022-03-11 23:42:34
138
原创 JavaScript
前段三老铁HTML:确定网页的结构CSS: 确定网页的样式JS:确定网页交互js组成三个部分ECMAScript :确定js的语法规范DOM: js动态操作网页内容BOM:js动态操作浏览器窗js三种书写位置>行内：写在标签内部>内联：写在script标签里面， script标签放在</body>上方>外联：写在js文件中，使用script标签的src属性引入js两种注释写法// 单行注释 /* 多行注释 */
2022-03-11 00:55:12
440
原创 响应式布局
媒体查询body { background-color: gray;}/* 大于等于768px 为粉色 */@media (min-width: 768px) { body { background-color: pink; }}/* 大于等于992px 为蓝色 */@media (min-width: 992px) { body { background-color: skyblue; }}/* 大于等于9
2022-03-09 22:08:12
68
原创 less
less 可以帮我们把px单位转换到rem单位。Less是一个CSS预处理器, Less文件后缀是.less扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。Less插件:Easy Less(less文件保存自动生成css文件)less注释单行注释语法：// 注释内容快捷键：ctrl + /多行注释语法：/* 注释内容 */快捷键： shift + alt + Aless 运算计算以第一个单位为准， 尽量写到最后一个数字上除法比较特.
2022-03-08 21:09:21
31
原创 flex布局
主轴对齐方式 justify-content: justify-content:flex-start; 默认值 justify-content:flex-end; 终点开始 justify-content:center;沿主轴居中 justify-content:space-around;弹性盒子沿主轴均匀排列,空白间隙分布在弹性盒子两侧 justify-content:space-between;弹性盒子沿主轴均匀排列,空白间隙均分在相邻盒子之间 justify-content:space
2022-03-07 23:20:02
56
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人