2021年08月_Henry_ww

原创 jQuery - 方法 - map() --- 常用遍历方法

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> &l

2021-08-30 22:54:15 1103

原创 jQuery - 方法 - each()

2021-08-30 22:52:57 309

原创 JavaScript - js进阶 - 递归

递归思想<!DOCTYPE html><html lang="en"> <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-08-28 20:49:51 149

原创 JavaScript - js进阶 - Set集合对象

Set永远不会有重复元素的对象可以理解为不重复的数组 const set = new Set([1, 5, 3, 4]); set.add(5); set.add(5); console.log(set);Set对象转为数组 const set = new Set([1, 5, 3, 4]); set.add(5); set.add(5); console.log(set); const arr = [...set];// 将

2021-08-28 20:40:07 405

原创 JavaScript - js进阶 -剩余运算

剩余运算符通过 ...符号来获取剩下的参数<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width,

2021-08-28 20:36:21 163

原创 JavaScript - js进阶 -解构

提供更加方便获取数组中元素或者对象中属性的写法获取数组中的元素 const [a, b, c, d] = [1, 2, 3, 4]; console.log(a, b, c, d);// 1,2,3,4元素交互顺序 let a = 1111; let b = 2222; [b, a] = [a, b]; console.log(a, b);// 2222 1111 获取对象中的属性（重点） const obj = {

2021-08-28 20:34:12 173

原创 JavaScript -js进阶 - 对象简写

<!DOCTYPE html><html lang="en"> <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" /&gt

2021-08-28 20:30:03 347

原创 JavaScript -js进阶 - 函数参数默认值 - level

<!DOCTYPE html><html lang="en"> <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" /&gt

2021-08-28 20:28:40 355

原创 JavaScript - js进阶 - ES5原型继承及创建元素

ES5原型继承<!DOCTYPE html><html lang="en"> <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-08-28 20:23:35 126

原创 JavaScript - js进阶 - 闭包

闭包概念在计算机科学中，闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），只要出现引用了外部变量的函数,那么这个现象就叫做闭包作用让数据变得更加的安全优化代码函数内返回了另外一个函数1. 闭包概念<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> &

2021-08-28 20:18:01 190

原创 JavaScript - jQuery

为什么要学 jQuery原生js实现方式及缺点: <script> // 麻烦的地方 // 1. 获取元素的方法名太长，不好写，不好记 // 2. 代码冗余（for循环太多） // 3. 使用on注册事件，存在覆盖问题，使用addEventListener来注册（兼容问题，IE678不兼容） // 4. 没有动画效果 // 找对象

2021-08-27 08:37:47 418

原创 JavaScript - js进阶 - ES6面向对象

es6 classes6的class 的出现基本上可以替代了es5的构造函数和原型,使之代码结构上更加简洁。关键字class属性方法继承 extends构造函数 constructor方法重写 override：子类方法覆盖父类，super.父类方法()父类的构造函数 super ：子类有构造方法且使用this前，必须使用super()ES6面向对象 - 类和成员<!DOCTYPE html><html lang="en"> <head&g

2021-08-23 19:52:21 208

原创 JavaScript - js进阶 - 对象判定( instanceof / constructor )

instanceof 和 constructor判断一个实例是否属于某个构造函数<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="w

2021-08-23 19:42:52 368

原创 JavaScript - js进阶 - 箭头函数

箭头函数<!DOCTYPE html><html lang="en"> <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-08-23 19:41:03 199

原创 JavaScript - js进阶 - 原型 prototype

原型 prototype原型上存放函数原型解释原型的单词是 prototype, 原型的这个名字是行业内共同认可的名字。原型本质是一个对象，理解为 JavaScript 自动帮我们添加的原型是 JavaScript 自动帮我们在定义构造函数的时候添加的所有构造函数的实例，共享一个原型原型上一般是挂载函数原型 proto实例的 proto 属性等于构造函数的 prototypep1.__proto__ === Person.prototype // true不过由于不

2021-08-23 08:31:07 171

原创 JavaScript - js进阶 - this与函数的四种调用模式/借调方法/借调应用/借调的传参区别

普通函数对象方法构造函数<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-

2021-08-21 19:38:05 485

原创 JavaScript - js进阶 - 爬虫

可以扒取任何网站的任何列表级别的数据: 必须先找到$0代表顶级元素, 然后修改querySelectorAll()里面的选择器(匹配批量), 以及修改 map()里面的return值: 要哪个属性,就哪哪个属性即可JSON.stringify(Array.prototype.slice.call($0.querySelectorAll('a')).map(function(item){return {href:item.href,text:item.innerText}}))...

2021-08-21 18:06:45 133

原创 JavaScript - js进阶 -创建对象的几种方式 - 工厂模式

创建对象的几种方式字面量简单粗暴不适合创建多个同样类型的对象的场景const obj ={ name:"悟空",height:100,age:5000};工厂函数容易理解失去血缘关系,无法简单分辨对象的特征<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-

2021-08-20 17:31:28 258

原创 JavaScript - js进阶 - 面向对象编程思想

<!-- 面向对象: 是一种编程思想, 而不是技术面向对象编程思想对应的语言: 高级编程语言(类似于自然语言), 如java\JavaScript\C#\C++\PHP\Python... 与面向对象对应的高级语言: 面向过程, 如C语言 1. 面向过程(Procedure Oriented Programming): POP, 将一个业务过程(买棒棒糖), 拆解成具体的细节(节点), 然后用函数封装各个节点, 最后通过顺序调用函数,实现最

2021-08-20 16:25:53 224

原创 JavaScript - js进阶 - 数组排序 - 冒泡算法

数组排序-冒泡算法算法algorithm，是一种解决问题的方法算法的目标：使用最少的内存，最短的时间，解决最多的问题冒泡算法：重复地走访过要排序的元素列，依次比较两个相邻的元素顺序正确：代表位置正确，不需要交换顺序错误：交换两个元素，让顺序正确<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta h

2021-08-20 15:19:58 134

原创 JavaScript - WebAPI - 案例 - 点名系统/打地鼠/计时器/今日代办

点名系统<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>点名系统</title> <style type="text/css"> * { font-family: "微软雅黑"; /*transition-duration: ;*/ }

2021-08-19 21:28:22 523

原创 JavaScript - WebAPI - 事件补充 - 防止白嫖

<!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"> <title&gt

2021-08-19 20:58:47 90

原创 JavaScript - WebAPI -右键事件

右键事件网页默认都有右键事件，是一个菜单右键事件：contextmenu阻止右键默认的事件：e.preventDefault()自定义右键菜单<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <met

2021-08-19 20:56:51 340

原创 JavaScript - WebAPI -键盘事件

键盘事件及获取键盘按键本小节知识点：介绍键盘的事件和获取按键1.键盘事件onkeydown:键盘按下触发onkeyup：键盘弹起触发onkeypress：键盘按下并弹起会触发onkeydown和onkeypress的区别：了解即可onkeypress可以过滤掉特殊的功能键例如删除、F1-F12,shift,alt键等等，onkeydown不会过滤onkeypress可以区分大小写，但是onkeydown永远都是大写（不管大小写状态）2.如何获取你到底按的是哪个键？通过

2021-08-19 20:54:09 209

原创 JavaScript - WebAPI - 事件冒泡与事件捕获

01-事件冒泡1.1-事件冒泡介绍本小节知识点：介绍什么是事件冒泡事件冒泡：如果一个元素的事件被触发，那么他的所有父级元素的同名事件也会被依次触发元素->父元素->body->html->document->window事件冒泡一直存在，只不过以前我们没有给父级元素加同名事件<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8

2021-08-19 20:47:14 402 1

原创 JavaScript - WebAPI - 注册/移除多个同名事件(addEventListener)

1.1-addEventListener注册事件<!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=

2021-08-19 20:00:32 660

原创 JavaScript - WebAPI - 阻止a标签默认跳转

阻止a标签默认跳转1.1-阻止a标签跳转两种常用方式默认情况下，点击a标签会跳转到一个新的网页，这叫做超链接某些情况下，我们只希望拿到a标签的样式（鼠标放上去有小手，用户很直观的知道这可以点击），而不希望跳转到新的网页这个时候我们就可以阻止a标签的跳转以下几种不需要死记硬背，实际开发习惯任何一种即可原理了解即可：第一种：给a标签添加点击事件，在点击事件中return false（建议使用，用于任意跳转a标签）第二种：给a标签的href属性设置一个伪链接（一般不用，用于页内跳转的a标签）

2021-08-19 19:56:20 970

原创 JavaScript - WebAPI - 案例 - 盒子拖拽

1.1-拖拽盒子 - 基本流程思路分析本小节知识点：鼠标拖拽复习鼠标事件：onclick：鼠标点下去并且弹起来触发（单击一次）ondblclick:鼠标连续点击两次（双击）onmousedown：鼠标按下就触发onmouseup：鼠标弹起触发onmouseover：鼠标移入onmouseout：鼠标移出onmousemove：鼠标移动鼠标拖拽：（1）先按下（2）然后移动（3）最后松开<!DOCTYPE html><html lang="zh-C

2021-08-19 19:16:58 865 6

原创 JavaScript - WebAPI - 定时器 - 案例 - 京东倒计时秒杀

<!DOCTYPE html><html lang="en"> <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" /&gt

2021-08-17 14:53:57 297

原创 JavaScript - WebAPI - 事件对象 - 案例 - 放大镜

需求分析1.小图片鼠标移入时:出现遮罩层，并将遮罩部分放大在右边显示2.小图片鼠标移动时：遮罩层与大图片相应移动2.1：鼠标在遮罩层中心位置2.2：遮罩层边界检测，遮罩层不能超出图片范围2.3：遮罩层与大图片相应移动假如遮罩层大小50px 50px 大图片100px 100px,那么每当遮罩层鼠标移动1px，大图片应该移动2px。（100/50）3.小图片鼠标移出时：遮罩层与大图片隐藏<!DOCTYPE html><html lang="en"> .

2021-08-14 20:24:16 138

原创 JavaScript - WebAPI - 事件对象 - 案例 - 天使跟随

需求分析：移动鼠标，改变图片的位置思路分析：1.监听鼠标在网页的移动事件网页：window 鼠标移动：onmousemove2.让图片的位置与事件对象的触发点位置一直界面元素定位相对于页面的左上角距离<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.

2021-08-14 20:20:14 97

原创 JavaScript - WebAPI - 事件对象

事件对象1.1-事件对象介绍（获取事件对象）1.什么是事件对象event:当某一个事件被触发时（例如点击事件），此时浏览器会记录触发时的某些信息，例如你是在哪个位置点击的，你在点击的时候是直接鼠标左键点击的，还是鼠标左右键一起点击（骚操作）的等等浏览器把这些所有的信息放到一个变量中存储，这个变量的数据类型是对象，所以称之为事件对象2.如何获取事件对象：只需要在事件函数中添加一个参数即可我们在注册事件的时候会写一个函数告诉浏览器这个事件被触发就调用这个函数，浏览器调用这个函数的时候会传递一个

2021-08-14 20:18:24 114

原创 JavaScript - WebAPI - 可视家族 - client家族

client家族（元素可视区域大小）client家族：clientWidth/clientHeight：获取可视区域的宽高（padding+content）clientTop/clientLeft:不常用，其实就是左边框border-left和上边框border-top获取网页可视区域大小本小节知识点1.监听浏览器窗口变化的事件: window.onresize()2.获取页面的可视区域存在浏览器兼容问题，兼容情况与scroll家族基本类似谷歌/火狐： window.inner

2021-08-14 20:14:39 227 2

原创 JavaScript -WebAPI - 案例 - 轮播图动画函数封装

1

2021-08-14 20:08:34 123

原创 JavaScript - WebAPI - 定时器/延时器/匀速动画/getElementStyle获取全部样式/缓速动画及缓速动画函数封装

定时器作用及语法1.1-setInterval 定时器定时器：某一件事（一段代码）并不是马上执行，而是隔一段时间执行setInterval:创建定时器特点：一旦创建立即计时，必须要手动停止，否则会无限的每隔一段时间执行代码clearInterval(定时器id)：清除定时器一个页面可以创建很多个定时器，通过制定定时器id可以清除特定的定时器<!DOCTYPE html><html lang="en"> <head>

2021-08-14 14:42:07 211

原创 JavaScript - WebAPI - 滚动家族 - scroll家族 - 案例 - 固定导航栏

<!DOCTYPE html><html lang="en"> <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" /&gt

2021-08-14 13:55:54 117

原创 JavaScript - WebAPI - 滚动家族 - scroll家族

1.0-offset家族(元素自身大小)offsetWidth：宽度，border（左右） + padding（左右）+content：getComputedStyle(元素)[width\border\padding]offsetHeight：高度（与宽度逻辑一样）offsetLeft：自己的border外部到定位父级 border的内部offsetTop：与offsetLeft逻辑一样offsetParent：定位父级1.1-scroll家族（元素内容大小）1.offset家族：

2021-08-14 13:54:25 174 1

原创 JavaScript - WebAPI - 动画 - 案例 - 360开机动画隐藏

<!DOCTYPE html><html lang="en"> <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" /&gt

2021-08-14 13:49:45 166

原创 JavaScript - WebAPI - 动画 - 案例 - 手风琴图

<!DOCTYPE html><html lang="en"> <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" /&gt

2021-08-14 13:47:46 200

原创 JavaScript - WebAPI - offset家族

offset家族1.offset属性家族：获取元素真实的宽高和位置offsetWidth、offsetHeight、offsetParent、offsetLeft、offsetTop2.之前学习的通过style属性获取宽高的特点1.只能获取行内的宽高2.获取到的值是一个string类型，并且带px3.获取到的只有宽高，不包含padding、border（总结就是行内写的是什么，获取的就是什么）4.既可以读取，也可以设置3.offsetWidth与offsetHeight：获取的

2021-08-11 20:58:31 115

index.vue

空空如也