喵帕斯_喵太-CSDN博客

01-watch监听属性 // watch 侦听器结构 - 侦听 data 或 computed 值的变化 watch: { // user(newVal, oldVal){ // console.log(newVal, oldVal); // } user: { // 立即执行，监听 immediate: true, // 深度监听对象 deep: true, // 复杂写法原本的函数写到 handle

2021-08-03 20:27:11 211

原创 ajax----FormData对象-序列化表单-遍历

01-FormData对象<body> <script> // FormData 不是普通对象，直接打印是没有结果的 const fd = new FormData() // 往 FormData 对象追加数据 fd.append('aa', 11) fd.append('aa', 22) console.log(fd) // FormData 不是普通对象，直接打印是没有结果的 const res = fd.get

2021-05-23 20:46:56 509

原创 -loading加载效果--/防抖优化-/节流优化-

01-loading加载效果<!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-05-23 20:43:49 592

原创 ajax--xhr配置项/上传进度条/-请求超时属性timeout-/-请求失败回调函数error

01-xhr配置项 <script> $.ajax({ type: 'get', url: 'http://127.0.0.1:3001/getHeroSkin', // xhr配置项：用于重写或者提供一个增强的 XMLHttpRequest 对象 xhr: () => { // 创建一个自己的 xhr 对象 const xhr = new XMLHttpReques

2021-05-23 20:41:53 781

原创 ajax-模板语法/05-template方法参数解读

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-05-23 20:35:51 179

原创 -jq-lazyload插件-懒加载

01-jq-lazyload插件-懒加载<!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-05-11 20:10:39 168

原创 -jq-固定导航栏案例-/-小火箭返回顶部案例/

01-jq-固定导航栏案例<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { verti

2021-05-11 20:08:16 121

原创 -jq-链式编程原理

01-jq-链式编程原理<!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-05-11 20:04:39 167

原创 -jq-多库共存释放$-jq冲突

0-jq-多库共存释放$ <script> // 释放$ const $my = $.noConflict() </script> </head><body> <script> // $(function () { }) // 不能使用$，被释放了 $my(function () {

2021-05-11 20:03:33 48

原创 -jq-事件触发(搜索框案例)/-音频-视频播放-load()-play()/

01-jq-事件触发<body> <input type="text" name="word"><button>搜索</button> <script> $(function () { // 给搜索按钮绑定点击事件 $('button').on('click', function () { // 获取输入的数据

2021-05-11 20:02:32 400

原创 -jq-事件解绑-off()

01-jq-事件解绑-off()<!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-05-11 19:58:20 255

原创 -jq-on注册事件

01-jq-on注册事件<!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-05-11 19:54:53 114

原创 -jq-事件委托-bind绑定事件-bind绑定事件-append（）-事件委托：delegate(‘目标子元素选择器‘,‘事件类型‘,回调函数)

01- jq-事件委托<body> <ul> <li>隔壁老王1</li> <li>隔壁老王2</li> <li>隔壁老王3</li> <li>隔壁老王4</li> <li>隔壁老王5</li> <li>隔壁老王6</li>

2021-05-11 19:52:21 134

原创 -jq-offset()-position()-scrollLeft()||Top()-偏移-距离文档（body）-滚动-

01-jq-偏移-offset()-距离文档<!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.

2021-05-11 19:47:17 113

原创 -jq-显式迭代-each()/-jq-创建元素-`append()`-`prepend()`--兄弟关系-`after()`-`before()`/-jq-尺寸-width()-height()

01-jq-显式迭代-each()<body> <ul> <li>隔壁老王1</li> <li>隔壁老王2</li> <li>隔壁老王3</li> <li>隔壁老王4</li> <li>隔壁老王5</li> <li>隔壁老王6</li>

2021-05-09 22:22:55 193 1

原创 -jq-data存储数据-/-jq-data临时存储数据-数据编辑-让input框拿到光标：focus()

01-jq-data存储数据<body> <div class="box" data-age="80">前端小白</div> <script> $(function () { // data() const $box = $('.box') // 获取是所有以data-开头的自定义属性 console.log($box.data

2021-05-09 20:26:03 176

原创 -jq-属性操作-`prop()`-`attr()`/-jq-点餐系统-/-jq-文本操作-`html()`-`text()`-`val()`

01-jq-属性操作-prop()-attr()<body> <div class="box" id="box1" data-index=1>前端小白</div> <input type="text" name="username" id="un" placeholder="请输入用户名"> <script> $(function () { // prop()

2021-05-09 20:20:01 118

原创 -jq-动画-下拉菜单/-jq-动画-淡入淡出效果-`fadeIn()`-`fadeOut()`-`fadeToggle()`-`fadeTo()`/-jq-动画-自定义动画

01-jq-动画-下拉菜单<!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-05-09 20:01:46 292 1

原创 -jq-动画-显示与隐藏-`show()`-`hide()`-`toggle()`/-jq-动画-滑动效果-`slideDown()`-`slideUp()`-`slideToggle()`

01-jq-动画-显示与隐藏-show()-hide()-toggle() .box { width: 100px; height: 100px; background-color: red; display: none; } </style> <script src="../js/jquery-1.12.4.min.js"></sc

2021-05-09 19:49:51 162

原创 -jq-样式操作-css/-jq-删除元素-empty() || html(‘‘)-删除元素：remove()

01-jq-样式操作-css <style> .box { width: 100px; height: 100px; background-color: pink; } </style></head><body> <div class="box"></div> <script>

2021-05-06 19:55:56 130

原创 jq-手风琴/-jq-淘宝精品显示/-jq-TAB栏目切换

01-jq-手风琴<!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"> &l

2021-05-06 19:54:47 112

原创 jq-入口函数/jq-原生对象/jq-基本选择器/jq-重点筛选方法`children``find``siblings``parent``next``prev`/

01-jq-入口函数 <script> // 入口 // $(function(){ // 入口}) $(function () { console.log('入口一') }) // $(document).ready(function(){}) $(document).ready(function () { // console.log

2021-05-06 19:44:38 99

原创 --递归--recursive

01-递归recursive<body> <!-- 递归：recursive，是一种解决问题的方式问题特点：大问题里面有小问题，大问题与小问题的性质是一样的，但是规模较大解决方式 1. 先找到最小的问题（不能再分解：文件夹里面没有文件夹） 2. 先解决最小问题：文件夹里面的内容全部输出 3. 回退上一级：用同样的方式

2021-05-05 20:41:50 1568

原创 -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 691

原创剩余运算符--...

01-剩余运算符 … <script> // 剩余运算：...，获取剩余的数据 let hero = { name: '德莱厄斯', age: 18, gender: '小C', skill: [ { skill1: '自残打击' },

2021-05-05 20:32:38 1187 1

原创 --解构--

01-解构 <script> // 解构：一种从复杂数据（数组和对象）中提取数据的方式 // 数组解构（用的少） // 对象解构（用的非常多） // 数组解构：数组用中括号包裹多个数据 let arr = ['a', 'b', 'c', 'd'] // 解构：也必须使用[]：类型对上 // [变量,可以多个,顺序对应] let [a1, a2] = arr

2021-05-05 20:27:29 244

原创 --对象的简写--

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 221

原创 -函数形参默认值-

01-函数形参默认值 <script> // 形参默认值作用：方便调用者，不传参数也有效果，传参就是具体参数的效果 // 形参默认值：在定义函数的时候，给形参直接复制：形参 = 值，这个值就是默认值 function show(msg = '来啊，互相伤害啊') { console.log(msg) } show('滚') // 如果有实参：默认值不生效 show

2021-05-05 20:18:31 2155

原创 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 98

原创 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 53

原创闭包`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 79

原创面向对象-类成员/ES6-面向对象-constructor构造器/继承extends/重写override-`super`/构造方法重写/面向对象的案例-TAB栏切换/创建元素继承

01-面向对象-类成员 <script> // 类成员：member，能够直接写在类的{}里面的内容（写的内容的上级一定是{}） // 定义类 class Student { // 类成员：属性（变量）和方法（函数） /* 属性：变量，不需要let 方法：函数，不需要function */

2021-05-03 20:21:36 271

原创对象归属判定`instanceof`-`constructor`/

01-对象归属判定-instanceof(只要在原型链上)-constructor(必须是直属关系，不能是继承的血缘关系) <script> // 实际开发中：对象是很多的，如果要使用对象的API（原型方法）：前提是必须知道是哪个构造函数的对象，才能调用对应的API // 老师对象 function CreateTeacher(name, age) { this.name = name th

2021-05-03 19:48:47 74

原创箭头函数/

01-箭头函数 <script> // 箭头函数：特点，简化函数的书写方式 // 语法：() => {} // 应用：当做回调函数，不能当做有名函数和构造函数（深层次原因：箭头函数没有this） let fn1 = function () { } // 箭头函数 let fn2 = () => { console.log('我是一个函数：就必须通过函数的

2021-05-03 19:45:03 146

原创原型链（原型对象：挂载函数，给对象使用）/顶级构造函数Function与构造函数的原型关系/原型对象与构造函数Object的原型关系/原型三角关系链

原型链 <script> // 原型链：原型形成了一个链条 // 原型链的价值：实现继承效果 // 凡是在原型链的东西：构造函数产生的对象，都可以访问 // 原型对象：挂载函数，给对象使用 function CreateStudent(name, age) { this.name = name this.age = age }

2021-05-02 20:28:41 335

原创函数借调应用/三种借调的区别-借调的区别

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 395

原创定义函数的三种形式/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 118

原创构造函数-原型对象（利用原型挂载解决内存占用问题）

01-构造函数-原型对象（利用原型挂载解决内存占用问题）构造函数链接：构造函数解决内存占用问题方法之一<body> <script> // 解决内存占用问题 function CreateTeacher(name, age) { this.name = name this.age = age } // 将为函数的属性：挂载到原型对象上 Crea

2021-05-01 17:59:23 367 1

原创利用构造函数创造对象的几种方式/构造函数与普通函数的区别/构造函数给对象赋值的弊端

01-创造对象的几种方式<body> <script> // 创建对象 // 1. 字面量：{} let obj1 = { name: '德莱厄斯', gender: '男', age: 28, skill: '大杀四方' } // 如果需要创建另外一个英雄？字面量创建对象，结构不能复用

2021-05-01 17:50:32 264

空空如也

空空如也