javascript
喵帕斯_喵太
前端新人,会从零记录自己的学习知识,遇到问题和解决办法。欢迎大家一起讨论更优质的代码结构。
展开
-
--递归--recursive
01-递归recursive<body> <!-- 递归:recursive,是一种解决问题的方式 问题特点:大问题里面有小问题,大问题与小问题的性质是一样的,但是规模较大 解决方式 1. 先找到最小的问题(不能再分解:文件夹里面没有文件夹) 2. 先解决最小问题:文件夹里面的内容全部输出 3. 回退上一级:用同样的方式原创 2021-05-05 20:41:50 · 1608 阅读 · 0 评论 -
-Set-集合数据类型
01-Set集合数据类型 <script> // Set:是一种新的数据类型,表示数据不会重复 // 构造函数:首字母大写 // 使用语法:new Set(放数据) const s = new Set() // 新增:add() s.add(1) s.add('a') s.add([1, 2, 3]) // Set数据类型没有限定数据类型原创 2021-05-05 20:34:19 · 752 阅读 · 0 评论 -
剩余运算符--...
01-剩余运算符 … <script> // 剩余运算:...,获取剩余的数据 let hero = { name: '德莱厄斯', age: 18, gender: '小C', skill: [ { skill1: '自残打击' },原创 2021-05-05 20:32:38 · 1224 阅读 · 1 评论 -
--解构--
01-解构 <script> // 解构:一种从复杂数据(数组和对象)中提取数据的方式 // 数组解构(用的少) // 对象解构(用的非常多) // 数组解构:数组用中括号包裹多个数据 let arr = ['a', 'b', 'c', 'd'] // 解构:也必须使用[]:类型对上 // [变量,可以多个,顺序对应] let [a1, a2] = arr原创 2021-05-05 20:27:29 · 259 阅读 · 0 评论 -
--对象的简写--
01-对象简写<body> <form action=""> <input type="text" name="username"> <input type="password" name="password"> </form> <script> // 工厂函数产生对象:复用结构 function factory(name, age) {原创 2021-05-05 20:23:17 · 258 阅读 · 0 评论 -
-函数形参默认值-
01-函数形参默认值 <script> // 形参默认值作用:方便调用者,不传参数也有效果,传参就是具体参数的效果 // 形参默认值:在定义函数的时候,给形参直接复制:形参 = 值,这个值就是默认值 function show(msg = '来啊,互相伤害啊') { console.log(msg) } show('滚') // 如果有实参:默认值不生效 show原创 2021-05-05 20:18:31 · 2254 阅读 · 0 评论 -
ES5原型链的继承----创建元素继承案例
01-ES5原型链的继承 <script> // ES6继承 class Person { } class Student extends Person { } console.log(new Student()) // ES5的原型继承 function Animal() { } Animal.prototype.say = function () {原创 2021-05-05 20:16:44 · 134 阅读 · 0 评论 -
this的指向问题
01-this的指向问题 <script> // 类中:回调函数里面的this没有指向:值为undefined(class产生了内部作用域:出不去,找不到window) class Test { showArr() { let arr = [1, 2, 3, 4, 5] arr.forEach(function (item) {原创 2021-05-05 20:13:41 · 60 阅读 · 0 评论 -
闭包`closure`/实际应用-数据安全
01-闭包-closure <script> // 闭包:closure,函数内部用到了函数外部的数据(变量存着),这种现象就叫做闭包现象 let arr = [1, 2, 3] function getArrMax() { let max = -Infinity for (let i = 0; i < arr.length; i++) { if (原创 2021-05-03 20:23:22 · 92 阅读 · 0 评论 -
面向对象-类成员/ES6-面向对象-constructor构造器/继承extends/重写override-`super`/构造方法重写/面向对象的案例-TAB栏切换/创建元素继承
01-面向对象-类成员 <script> // 类成员:member,能够直接写在类的{}里面的内容(写的内容的上级一定是{}) // 定义类 class Student { // 类成员:属性(变量)和方法(函数) /* 属性:变量,不需要let 方法:函数,不需要function */原创 2021-05-03 20:21:36 · 296 阅读 · 0 评论 -
对象归属判定`instanceof`-`constructor`/
01-对象归属判定-instanceof(只要在原型链上)-constructor(必须是直属关系,不能是继承的血缘关系) <script> // 实际开发中:对象是很多的,如果要使用对象的API(原型方法):前提是必须知道是哪个构造函数的对象,才能调用对应的API // 老师对象 function CreateTeacher(name, age) { this.name = name th原创 2021-05-03 19:48:47 · 81 阅读 · 0 评论 -
箭头函数/
01-箭头函数 <script> // 箭头函数:特点,简化函数的书写方式 // 语法:() => {} // 应用:当做回调函数,不能当做有名函数和构造函数(深层次原因:箭头函数没有this) let fn1 = function () { } // 箭头函数 let fn2 = () => { console.log('我是一个函数:就必须通过函数的原创 2021-05-03 19:45:03 · 158 阅读 · 0 评论 -
原型链(原型对象:挂载函数,给对象使用)/顶级构造函数Function与构造函数的原型关系/原型对象与构造函数Object的原型关系/原型三角关系链
原型链 <script> // 原型 链 :原型形成了一个链条 // 原型链的价值:实现继承效果 // 凡是在原型链的东西:构造函数产生的对象,都可以访问 // 原型对象:挂载函数,给对象使用 function CreateStudent(name, age) { this.name = name this.age = age }原创 2021-05-02 20:28:41 · 363 阅读 · 0 评论 -
函数借调应用/三种借调的区别-借调的区别
01-借调应用<body> <ul> <li>前端小白1</li> <li>前端小白2</li> <li>前端小白3</li> <li>前端小白4</li> <li>前端小白5</li> </ul> <script> /原创 2021-05-02 20:05:02 · 433 阅读 · 0 评论 -
定义函数的三种形式/06-this与函数的四种模式-借调模式(上下文模式)/ 函数.call(新对象)-函数.apply(新对象)-函数.bind(新对象)/
01-定义函数的三种形式 <script> // 1. 有名函数 fn1() function fn1() { console.log('我是有名函数') } // 特点:多次调用,可以先调用后定义(变量提升) // 2. 匿名函数(函数表达式) let fn2 = function () { console.log('我是匿原创 2021-05-02 20:01:43 · 124 阅读 · 0 评论 -
构造函数-原型对象(利用原型挂载解决内存占用问题)
01-构造函数-原型对象(利用原型挂载解决内存占用问题)构造函数链接:构造函数解决内存占用问题方法之一<body> <script> // 解决内存占用问题 function CreateTeacher(name, age) { this.name = name this.age = age } // 将为函数的属性:挂载到原型对象上 Crea原创 2021-05-01 17:59:23 · 412 阅读 · 1 评论 -
利用构造函数创造对象的几种方式/构造函数与普通函数的区别/构造函数给对象赋值的弊端
01-创造对象的几种方式<body> <script> // 创建对象 // 1. 字面量:{} let obj1 = { name: '德莱厄斯', gender: '男', age: 28, skill: '大杀四方' } // 如果需要创建另外一个英雄?字面量创建对象,结构不能复用原创 2021-05-01 17:50:32 · 286 阅读 · 0 评论 -
冒泡排序
01-冒泡排序<body> <script> // 冒泡排序:bubble sort // 定义要排序的数组 let ages = [18, 20, 30, 19, 15, 8, 25, 60, 10] // 自己实现 // 冒泡特点:遍历,相邻进行比较:位置不对就交换 // for (let i = 0; i < ages.length; i++) {原创 2021-05-01 17:24:11 · 69 阅读 · 0 评论 -
while循环/do-while循环/
01-while-循环<body> <script> // while循环:不确定次数的循环 /* while(条件 true/false){ 循环体/需要重复执行的代码; } // while循环一般比较配:break */ // 用户猜数字:1-100之间随机整数 let ra原创 2021-05-01 17:03:34 · 294 阅读 · 0 评论 -
-switch-case分支/三元表达式
01-switch-case分支<body> <input type="text" name="age"><br> <button>提交</button> <script> // switch-case是一种条件匹配:是全等匹配匹配 /* switch(表达式){ // 不是布尔类型:是一个确定的变量 case 值1:原创 2021-05-01 16:59:46 · 486 阅读 · 0 评论 -
-键盘事件-keyup\keydown\keypress(屏蔽部分功能键)/-右键事件- e.preventDefault()
01-键盘事件-keyup\keydown\keypress(屏蔽部分功能键)<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,原创 2021-04-30 14:43:12 · 800 阅读 · 0 评论 -
事件冒泡-捕获/
01-事件冒泡 捕获<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-04-30 14:40:32 · 70 阅读 · 0 评论 -
事件冒泡-事件委托-影响-如何阻止冒泡` e.stopPropagation()`-点击登录框案例
01-事件冒泡原理 <style> .box { width: 200px; height: 200px; background-color: pink; position: relative; } .son { width: 100px; height: 100px;原创 2021-04-30 14:38:38 · 201 阅读 · 0 评论 -
-注册同名事件-addEventListener/-移出事件-removeEventListener
01-注册同名事件-addEventListener<body> <div class="box"></div> <script> // 需求:点击盒子box,变成圆角 let box = document.querySelector('.box') // box.onclick = function () { // this.style.borderRadius =原创 2021-04-30 14:27:38 · 400 阅读 · 0 评论 -
盒子拖拽-登录验证/阻止a链接跳转/页面换肤(点击小图,切换大图)/
01-盒子拖拽-登录验证<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-04-29 23:01:44 · 217 阅读 · 0 评论 -
事件对象/三大坐标系/修改鼠标样式并且跟随案例/相对距离运算/京东放大镜案例
01-事件对象 <style> body { /* width: 2000px; */ height: 2000px; } </style></head><body> <script> // 给body添加一个点击事件 document.body.onclick = function (e) {原创 2021-04-28 00:04:33 · 124 阅读 · 0 评论 -
三大家族-滚动家族-scroll家族/固定导航栏/client家族-元素的可视区域:`clientWidth`、`clientHeight`/响应式布局原理(可视家族)
01-三大家族-滚动家族-scroll家族-滚动事件:onscroll <style> .box { width: 200px; height: 200px; /* 滚动效果 */ overflow: auto; } </style></head><body> <div class="box"&原创 2021-04-27 23:47:55 · 105 阅读 · 0 评论 -
缓动动画-手风琴/360-开机动画隐藏
01-缓动动画-手风琴案例<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-04-27 20:54:54 · 79 阅读 · 0 评论 -
轮播图/window.onload(解决js结构在html的上面:如何保证js能拿到下面的元素)
01-轮播图<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-04-27 20:52:45 · 190 阅读 · 0 评论 -
获取全部样式-`getComputedStyle`/JS缓动动画/缓动动画函数封装/淡入淡出效果
01-获取全部样式-getComputedStyle <style> .box { position: absolute; left: 0; width: 100px; height: 100px; background-color: red; } </style></head><body&g原创 2021-04-26 22:34:15 · 171 阅读 · 0 评论 -
定时器-延时器setTimeout./定时器bug解决方法之将定时器存在元素自己身上(元素是一个对象,对象是引用传值:安全)
01-定时器-延时器-广告案例 <style> .box { width: 600px; height: 400px; background-color: green; text-align: center; line-height: 400px; /* margin: 100px auto; */ po原创 2021-04-24 20:25:16 · 174 阅读 · 0 评论 -
定时器setInterval(function(){},1000(时间毫秒))/清除定时器-`clearInterval()`/多个计时器叠加问题/倒计时 秒杀/
01-定时器-setInterval(function(){},1000(时间毫秒) <script> // 需求:间隔一段时间就输出一次:前端小白 // 定时器:setInterval(function(){},1000时间) setInterval(function () { console.log('前端小白') }, 1000) </script>02-定时器-自动原创 2021-04-24 20:20:10 · 4669 阅读 · 0 评论 -
offset家族/`offsetParent`-定位父级/真实宽高:offsetWidth,offsetHeight/offsetLeft和offsetTop
01-offset家族.真实宽高:offsetWidth,offsetHeight.-真实偏移:margin和定位的偏移组合:offsetLeft和offsetTop <style> .box { width: 100px; height: 100px; background-color: red; text-align: center; line-he原创 2021-04-24 20:03:56 · 155 阅读 · 0 评论 -
本地储存临时储存`sessionStorage`/永久储存`localStorage`/利用本地储存进行登录界面和验证登录/单词查看表
01-本地存储-sessionStorage会话存储(临时)-存储数据:sessionStorage.setItem('名字','值')-取出数据:sessionStorage.getItem('名字')-删除数据:sessionStorage.removeItem('名字')-清除数据:sessionStorage.clear() <script> // sessionStorage:js中提供了这个对象专门操作Session Storage conso原创 2021-04-24 19:51:49 · 338 阅读 · 1 评论 -
节点操作-创建createElement||appendChild-/追加-/插入insertBefore-/替换replaceChild-/删除remove-克隆元素 cloneNode(增删改查)
01-节点操作-创建元素·createElement||appendChild<body> <div class="box"> <span>我是前端小白</span> </div> <script> // 创建元素:document.createElement('标签名') let div = document.createElement('div')原创 2021-04-23 20:12:58 · 1201 阅读 · 0 评论 -
节点/`childNodes`子节点/`previousSibling`兄弟节点`nextSibling`/父亲节点
01-节点查找-网页一切皆节点 <!-- 这是注释 --> <div class="box">我是前端小白</div> <script> // 网页一切皆节点:document也是节点,是顶级节点 // 节点有三要素:nodeType nodeName nodeValue console.log(document.nodeType) console.log(docum原创 2021-04-23 19:50:15 · 200 阅读 · 0 评论 -
BOM-location对象-页面跳转/-BOM-navigator对象-获取用户信息/历史对象/
01-BOM-location对象-页面跳转<body> <button class="btn1">新开页面</button> <button class="btn2">刷新页面</button> <button class="btn3">替换页面</button> <script> // location.assign('新url'):新开页面原创 2021-04-23 19:40:04 · 143 阅读 · 0 评论 -
自定义属性:Attribute/`getAttribute` `setAttribute` `removeAttribute`(一般不用这种,建议用dataset)
getAttribute('属性名') setAttribute('属性名','属性值'):设置属性 removeAttribute('属性名'):删除属性<body> <ul> <!-- li如果自带下标的话:用起来就方便了 --> <li data-index="10" class="item">隔壁老王1</li> <li data-index="1" class="item"&原创 2021-04-23 09:32:12 · 139 阅读 · 0 评论 -
属性补充操作-dataset操作自定义属性-修改-新增-删除
01-属性补充操作-dataset操作自定义属性-修改-新增-删除<body> <ul> <!-- li如果自带下标的话:用起来就方便了 --> <li data-index="10" class="item">隔壁老王1</li> <li data-index="1" class="item">隔壁老王2</li> <li data-index原创 2021-04-21 20:30:58 · 1336 阅读 · 0 评论 -
BOM-window对象-onload事件/window:是所有对象的顶级对象(DOM和BOM)/BOM-window对象-操作窗口
01-BOM-window对象-onload事件 <script> // 尝试获取box盒子 // let box = document.querySelector('.box') // console.log(box) // window.onload:页面加载事件,浏览器不要执行js:等html加载结束后再执行(所有资源都加载完毕) window.onload = function () {原创 2021-04-21 20:13:23 · 250 阅读 · 0 评论