
JavaScript
文章平均质量分 76
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 · 1156 阅读 · 0 评论 -
jQuery - 方法 - each()
<script> $(function(){ // each方法: 可以用来遍历jq对象 // 语法:jq对象.each(function(index, ele){ // index 当前遍历的元素的下标 // ele 当前遍历的元素 ==> 是个dom对象 // }) .原创 2021-08-30 22:52:57 · 339 阅读 · 0 评论 -
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 · 175 阅读 · 0 评论 -
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 · 439 阅读 · 0 评论 -
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 · 189 阅读 · 0 评论 -
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 · 191 阅读 · 0 评论 -
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:30:03 · 377 阅读 · 0 评论 -
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" />原创 2021-08-28 20:28:40 · 389 阅读 · 0 评论 -
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 · 161 阅读 · 0 评论 -
JavaScript - js进阶 - 闭包
闭包概念在计算机科学中,闭包(英语:Closure),又称词法闭包(Lexical Closure)或函数闭包(function closures),只要出现引用了外部变量的函数,那么这个现象就叫做闭包作用让数据变得更加的安全优化代码函数内返回了另外一个函数1. 闭包概念<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> &原创 2021-08-28 20:18:01 · 234 阅读 · 0 评论 -
JavaScript - jQuery
为什么要学 jQuery原生js实现方式 及 缺点: <script> // 麻烦的地方 // 1. 获取元素的方法名太长,不好写,不好记 // 2. 代码冗余(for循环太多) // 3. 使用on注册事件,存在覆盖问题,使用addEventListener来注册(兼容问题,IE678不兼容) // 4. 没有动画效果 // 找对象原创 2021-08-27 08:37:47 · 449 阅读 · 0 评论 -
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 · 224 阅读 · 0 评论 -
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 · 394 阅读 · 0 评论 -
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 · 229 阅读 · 0 评论 -
JavaScript - js进阶 - 原型 prototype
原型 prototype原型上存放函数原型解释原型的单词是 prototype, 原型的这个名字是行业内共同认可的名字。原型本质是一个对象,理解为 JavaScript 自动帮我们添加的原型是 JavaScript 自动帮我们在定义构造函数的时候添加的所有构造函数的实例,共享一个原型原型上一般是挂载函数原型 proto实例的 proto 属性 等于 构造函数的 prototypep1.__proto__ === Person.prototype // true不过由于不原创 2021-08-23 08:31:07 · 210 阅读 · 0 评论 -
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 · 510 阅读 · 0 评论 -
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 · 152 阅读 · 0 评论 -
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 · 283 阅读 · 0 评论 -
JavaScript - js进阶 - 面向对象编程思想
<!-- 面向对象: 是一种编程思想, 而不是技术 面向对象编程思想对应的语言: 高级编程语言(类似于自然语言), 如java\JavaScript\C#\C++\PHP\Python... 与面向对象对应的高级语言: 面向过程, 如C语言 1. 面向过程(Procedure Oriented Programming): POP, 将一个业务过程(买棒棒糖), 拆解成具体的细节(节点), 然后用函数封装各个节点, 最后通过顺序调用函数,实现最原创 2021-08-20 16:25:53 · 252 阅读 · 0 评论 -
JavaScript - js进阶 - 数组排序 - 冒泡算法
数组排序-冒泡算法算法algorithm,是一种解决问题的方法算法的目标:使用最少的内存,最短的时间,解决最多的问题冒泡算法:重复地走访过要排序的元素列,依次比较两个相邻的元素顺序正确:代表位置正确,不需要交换顺序错误:交换两个元素,让顺序正确<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta h原创 2021-08-20 15:19:58 · 149 阅读 · 0 评论 -
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>原创 2021-08-19 20:58:47 · 105 阅读 · 0 评论 -
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 · 367 阅读 · 0 评论 -
JavaScript - WebAPI -键盘事件
键盘事件及获取键盘按键本小节知识点:介绍键盘的事件和获取按键1.键盘事件onkeydown:键盘按下触发onkeyup:键盘弹起触发onkeypress:键盘按下并弹起会触发onkeydown和onkeypress的区别:了解即可onkeypress可以过滤掉特殊的功能键例如删除、F1-F12,shift,alt键等等,onkeydown不会过滤onkeypress可以区分大小写,但是onkeydown永远都是大写(不管大小写状态)2.如何获取你到底按的是哪个键?通过原创 2021-08-19 20:54:09 · 244 阅读 · 0 评论 -
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 · 428 阅读 · 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 · 689 阅读 · 0 评论 -
JavaScript - WebAPI - 阻止a标签默认跳转
阻止a标签默认跳转1.1-阻止a标签跳转两种常用方式默认情况下,点击a标签会跳转到一个新的网页,这叫做超链接某些情况下,我们只希望拿到a标签的样式(鼠标放上去有小手,用户很直观的知道这可以点击),而不希望跳转到新的网页这个时候我们就可以阻止a标签的跳转以下几种不需要死记硬背,实际开发习惯任何一种即可原理了解即可:第一种:给a标签添加点击事件,在点击事件中return false(建议使用,用于任意跳转a标签)第二种:给a标签的href属性设置一个伪链接(一般不用,用于页内跳转的a标签)原创 2021-08-19 19:56:20 · 1024 阅读 · 0 评论 -
JavaScript - WebAPI - 事件对象
事件对象1.1-事件对象介绍(获取事件对象)1.什么是事件对象event:当某一个事件被触发时(例如点击事件),此时浏览器会记录触发时的某些信息, 例如你是在哪个位置点击的,你在点击的时候是直接鼠标左键点击的,还是鼠标左右键一起点击(骚操作)的等等 浏览器把这些所有的信息放到一个变量中存储,这个变量的数据类型是对象,所以称之为事件对象2.如何获取事件对象:只需要在事件函数中添加一个参数即可我们在注册事件的时候会写一个函数告诉浏览器这个事件被触发就调用这个函数,浏览器调用这个函数的时候 会传递一个原创 2021-08-14 20:18:24 · 132 阅读 · 0 评论 -
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 · 238 阅读 · 2 评论 -
JavaScript -WebAPI - 案例 - 轮播图动画函数封装
1原创 2021-08-14 20:08:34 · 140 阅读 · 0 评论 -
JavaScript - WebAPI - 定时器/延时器/匀速动画/getElementStyle获取全部样式/缓速动画及缓速动画函数封装
定时器作用及语法1.1-setInterval 定时器定时器:某一件事(一段代码)并不是马上执行,而是隔一段时间执行setInterval:创建定时器特点:一旦创建立即计时,必须要手动停止,否则会无限的每隔一段时间执行代码clearInterval(定时器id):清除定时器一个页面可以创建很多个定时器,通过制定定时器id可以清除特定的定时器<!DOCTYPE html><html lang="en"> <head>原创 2021-08-14 14:42:07 · 241 阅读 · 0 评论 -
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 · 194 阅读 · 1 评论 -
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 · 133 阅读 · 0 评论 -
JavaScript - webAPI - 本地存储
1.1-会话存储 - sessionStorage1.sessionStorage相当于短命版的localStorage,其他用法完全一致2.两者区别:HP值不同 localStorage:永久存储(存在硬盘,HP值无限) sessionStorage:临时存储(存在内存,HP值一条命,只要浏览器关闭就没有了)<!DOCTYPE html><html lang="en"> <head>原创 2021-08-11 20:54:17 · 265 阅读 · 0 评论 -
JavaScript - webAPI - DOM节点 && DOM操作 / 网页一切内容皆节点
1.1-DOM节点介绍1.什么是节点:在HTML文档中,一切皆节点(HTML文档本身、标签、属性、注释内容、文本)2.什么是元素:元素在HTML中叫做标签,在JS的dom对象中称为元素(可以理解为标签的面向对象的叫法)3.HTML标签属于节点的一种,叫做元素节点4.节点三要素:节点类型:标签、属性、注释、文本,nodeType节点名称:p、div、class(属性名),nodeName节点的值:one(属性的值),nodeValue在JavaScript中,document这个对象大原创 2021-08-10 22:28:22 · 306 阅读 · 1 评论 -
JavaScript - WebAPI - BOM浏览器对象模型
1.1-BOM与DOM介绍JavaScript语言由三部分组成ECMAJavaScript:定义了js的语法规范Dom:document object model文档对象模型:一个HTML文档中所有的一切都是dom对象 * Dom定义了一套操作HTML文档的API(节点的增删改查)Bom:Browser object model浏览器对象模型 例如:一个浏览器的窗口就是一个window对象 * Bom定义了一套操作浏览器窗口的APIBom主要由五大对象组成:原创 2021-08-10 22:07:25 · 197 阅读 · 0 评论 -
JavaScript -WebAPI - 属性补充 - dataset自定义属性
<!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-09 10:24:22 · 409 阅读 · 0 评论 -
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" />原创 2021-08-09 10:07:04 · 119 阅读 · 0 评论 -
JavaScript - WebAPI - 元素属性操作及注册事件
02 - 获取页面元素思考 : css语言如何获取页面元素?通过选择器id选择器 : #id名类选择器: .类名标签选择器:标签名子代选择器:ul>li后代选择器:ul lijs语言如何获取元素页面元素?也是通过选择器语法示例描述返回值querySelector()document.querySelector(‘选择器’)根据选择器获取满足条件第一个元素DOM对象 nullquerySelectorAll()docume原创 2021-08-07 20:53:47 · 410 阅读 · 0 评论 -
JavaScript - 函数
04-函数函数作用:将代码存入变量中,实现代码复用1.1-函数介绍函数是一种结构,使用function关键字声明函数不会自动运行函数定义后,需要主动调用才会触发//1.声明函数:将代码存入结构中function 函数名(){ 函数体:一段代码}//2.调用函数:执行函数体代码函数名();1.2-函数参数参数的目的是让函数能够变的灵活,可以完成不同的,但是功能类似的需求函数参数分为两种:形参:定义函数时的参数,属于占座位实参:调用函数时的参数,属于实际数据原创 2021-08-04 20:00:28 · 112 阅读 · 1 评论 -
JavaScript - 对象
对象1.1-对象的基本使用对象作用:一个变量存储多个数据对象与数组异同点 相同点:一个变量存储多个数据 不同点: 数组有序存储:元素与下标一一对应 对象无序存储:属性名与属性值一一对应(键值对)<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible原创 2021-08-04 19:55:16 · 105 阅读 · 0 评论