JavaScript
关注
分享
扫一扫
文章平均质量分 78
再快一步`
这个作者很懒，什么都没留下…
展开
-
JS进阶——高阶技巧
性能优化说明使用场景防抖单位时间内，频繁触发事件，只执行最后一次搜索框搜索输入、手机号、邮箱验证输入加测节流单位事件内，频繁触发事件，只执行一次高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等。原创 2023-11-20 16:49:21 · 199 阅读 · 0 评论 -
JS进阶——深入面向对象
构造函数通过原型分配的函数是所有对象所共享的。JavaScript规定，每一个构造函数都有一个prototype属性，指向另一个对象，所以也称为原型对象这个对象可以挂载函数，对象实例化不会多次创建原型上函数，节约内存可以把那些不变的方法，直接定义在prototype对象上，这样所有对象的实例就可以共享这些方法。构造函数和原型对象中的this都指向实例化的对象。原创 2023-11-17 20:51:28 · 146 阅读 · 0 评论 -
JS进阶——构造函数&数据常用函数
构造函数：是一种特殊的函数，主要用来初始化对象使用场景：常规的{...}语法允许创建一个对象。比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。注意构造函数在技术上是常规函数。原创 2023-11-17 19:00:01 · 355 阅读 · 0 评论 -
JS进阶——作用域、解构、箭头函数
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问。原创 2023-11-16 19:21:49 · 426 阅读 · 0 评论 -
Web APIs——实战案例
让黑色盒子的移动的核心思想：不断把鼠标在中等盒子内的坐标给黑色遮罩层 let top 值，这样遮罩层就可以跟着移动了。水平坐标 如果 大于等于100 并且小于300，移动的距离就是 mx - 100 （100是遮罩盒子自身宽度的一半）鼠标在middle 盒子里面的坐标 = 鼠标在页面中的坐标 - middle 中等盒子的坐标。让鼠标经过小图片的爸爸li盒子，添加类，其余的li移除类（注意先移除，后添加）显示和隐藏也尽量定义一个函数，因为鼠标经过离开中等盒子，会显示隐藏，同时，原创 2023-11-13 17:58:15 · 147 阅读 · 0 评论 -
Web APIs——综合案例
侦听使用change事件，当鼠标离开了表单，并且表单值发生了变化时触发（类似京东效果） change事件是内容发生了变化。classList.contains()看看有没有包含某个类，如果有则返回true，没有则返回false。添加类，.icon-queren2 则是默认选中样式，可以使用toggle切换类。如果上面input表单，只要有模块，返回的是false则阻止提交。如果不符合要求，则出现提示信息，并return false中断程序。正则/^[a-zA-Z0-9-_]{6,10}$/原创 2023-11-12 20:53:43 · 913 阅读 · 0 评论 -
Web APIs——正则表达式使用
其中/ / 是正则表达式字面量例如查找下面文本中是否包含字符串‘前端’原创 2023-11-12 10:27:42 · 660 阅读 · 0 评论 -
Web APIs——BOM和延迟函数setTimeout
作用：可以将数据永久存储在本地（用户的电脑），除非手动删除，否则关闭页面也会存在可以多窗口（页面）共享（同一浏览器可以共享）以键值对的形式存储使用存储数据：获取数据：<head></head><body><script>// 要存储一个名字 uname， xiaochen// localStorage.setItem('键','值')// 2. 获取方式 都加引号// 3. 删除本地存储 只删除名字// 4. 改 如果原来有这个键，则是改，如果没有这个键则是增。原创 2023-11-09 12:55:04 · 445 阅读 · 0 评论 -
Web APIs——M端事件、JS插件
移动端也有自己独特的地方。比如触屏事件touch（也称触摸事件），Android 和 IOS都有。原创 2023-11-03 12:42:24 · 217 阅读 · 0 评论 -
Web APIs——节点操作
DOM节点：DOM树里每一个内容都称之为节点。原创 2023-11-03 09:29:29 · 134 阅读 · 0 评论 -
Web APIs——日期对象的使用
日期对象：用来表示时间的对象作用：可以得到当前系统时间。原创 2023-11-01 15:29:30 · 275 阅读 · 0 评论 -
Web APIs——案例
需求：当页面滚动到秒杀模块，导航栏自动滑入，否则滑出分析：①：用到页面滚动事件②：检测页面滚动大于等于 秒杀模块的位置 则滑入，否则滑出③：主要移动的是秒杀模块的顶部位置。原创 2023-10-31 21:07:19 · 239 阅读 · 0 评论 -
Web APIs——其他事件
加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件为什么要学？事件名：load注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载事件名：DOMContentLoaded监听页面DOM加载完毕。原创 2023-10-31 15:20:33 · 332 阅读 · 0 评论 -
Web APIs——事件委托
事件委托（Event delegation）是一种JavaScript设计模式，用于处理事件监听和处理程序的优化。它通过将事件处理程序绑定到父元素而不是绑定到子元素，从而减少DOM元素上的事件处理程序数量。事件委托是利用事件流的特征解决一些开发需求的知识技巧给父元素注册事件例如，如果我们有一个包含多个按钮的列表，并且希望在单击按钮时执行某些操作，则可以将单个事件监听器添加到整个列表。当单个按钮被单击时，事件将冒泡到列表元素，并且我们可以检查事件目标以确定哪个按钮被单击，然后执行相应的操作。原创 2023-10-31 09:39:44 · 514 阅读 · 0 评论 -
Web APIs——事件流
事件流指的是事件完整执行过程中的流动路径说明：假设页面里有个div，当触发事件时，会经历两个阶段，分别是捕获阶段、冒泡阶段简单来说：捕获阶段是 从父到子 冒泡阶段是从子到父实际工作都是使用事件冒泡为主。原创 2023-10-29 11:05:21 · 271 阅读 · 0 评论 -
Web APIs——环境对象this以及回调函数
环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境作用：弄清楚this的指向，可以使代码更简洁[谁调用，this就是谁]原创 2023-10-25 20:12:57 · 272 阅读 · 0 评论 -
Web APIs——事件对象
也是个对象，这个对象里有事件触发时的相关信息例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息语法：如何获取。原创 2023-10-25 18:39:25 · 224 阅读 · 0 评论 -
Web APIs——键盘事件以及发布评论
需求：用户输入文字，可以计算用户输入的字数。原创 2023-10-25 14:18:57 · 850 阅读 · 0 评论 -
Web APIs——焦点事件以及小米搜索框
需求：当表单得到焦点，显示下拉菜单，失去焦点隐藏下拉菜单。原创 2023-10-25 09:50:58 · 335 阅读 · 0 评论 -
Web APIs——轮播图完整版
②：左侧按钮点击，变量--，如果小于0，则复原最后一张。①：右侧按钮点击，变量++，如果大于等于8，则复原0。需求：当点击左右按钮，可以切换轮播图。③：鼠标经过暂停定时器。④：鼠标离开开启定时器。原创 2023-10-25 09:17:27 · 217 阅读 · 0 评论 -
Web APIs——事件监听以及鼠标事件
什么是事件？事件是在编程时系统内发生的动作或者发生的事情比如用户在网页上单击一个按钮什么是事件监听？就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。比如鼠标经过显示下拉菜单，比如点击可以播放轮播图等等。原创 2023-10-24 07:00:00 · 845 阅读 · 0 评论 -
Web APIS——第一天（下）
网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发。原创 2023-10-23 19:35:34 · 246 阅读 · 0 评论 -
web APIs——第一天（上）
DOM（Document Object Model——文档对象模型）是用来呈现以及与任意HTML或XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能开发网页内容特性和实现用户交互标准属性：标签自带的属性 比如class id title等，可以直接使用点语法操作比如：disabled、checked、selected在html5中推出了专门的data-自定义属性在标签上一律以data-开头在DOM对象上一律以dataset对象方式获取原创 2023-10-20 09:31:26 · 303 阅读 · 0 评论 -
JavaScript基础——巩固练习（3）
点名: 每次刷新网页运行, 在控制台 随机输出一位同学的名字 ["老赵", "老李", "小传", "小黑"]，如果输出了，则数组中删除这个名字。例如检测 香蕉 是否存在于 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 true。例如检测 香蕉 数组['苹果', '香蕉', '橘子', '荔枝', '梨子']中， 返回结果是 1。如果找到，则返回查找元素在数组中的索引号，如果查找不到，则返回 -1。提示: 对象中的方法本质是函数, 调用需要加()原创 2023-10-16 13:03:23 · 1154 阅读 · 1 评论 -
JavaScript基础知识——练习巩固（2）
使用for循环 - 求出班级里同学们平均年龄[15, 19, 21, 33, 18, 24]使用for循环 - 求出数组里大于5的i和 [4, 9, 5, 20, 3, 11]使用for循环 - 求出数组元素的和 [5, 8, 9, 2, 1, 5]计算[2, 6, 18, 15, 40] 中能被3整除的偶数的个数。计算[2, 6, 18, 15, 40] 中能被3整除的偶数的和。例如: [88,20,10,100,50] 打印 2。例如: [88,20,30,100,50] 打印-1。原创 2023-10-16 12:44:39 · 1555 阅读 · 0 评论 -
JavaScript基础——练习巩固题目(1）
接收用户输入的用户名和密码，若用户名为 “admin” ,且密码为 “123456” ,则提示用户登录成功!如果输入的是 + - * / 其中任何一个，比如用户输入是 + ，则是计算求和，如果用户输入是 * 则是计算乘积。打开页面出现一个提示框，注意是一直提示的，'请您选择 + - * / ，如果输入q，则是退出结束程序。接收用户输入的分数，根据分数输出对应的等级字母 A、B、C、D、E，比如 用户输入的是 5， 则计算 1~5 之间的累加和。比如用户输入的是10， 则计算 1~10 之间的累加和。原创 2023-10-16 12:24:59 · 1023 阅读 · 0 评论 -
JavaScript入门——（6）对象
对象（object）：JavaScript里的一种数据类型可以理解为是一种无序的数据集合，注意数组是有序的数据集合用来详细的描述某个事物，例如描述一个人。原创 2023-10-10 20:46:26 · 790 阅读 · 0 评论 -
JavaScript入门——（5）函数
函数：function，是被设计为执行特定任务的代码块说明：函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，有利于精简代码方便复用。比如之前使用的alert()、prompt()和console.log()都是一些js函数，只不过已经封装好了，可以直接使用的。原创 2023-10-09 21:42:31 · 948 阅读 · 0 评论 -
JavaScript入门——基础知识（4）
作用：重复执行代码好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式循环练习1.利用for循环输出1~100岁2.求1-100之间所有的偶数和3.页面中打印5个小星星4.循环数组请将数组 ['马超','赵云','张飞','关羽','黄忠'] 依次打印出来。原创 2023-10-08 16:38:16 · 351 阅读 · 0 评论 -
JavaScript入门——基础知识（3）
目标：能够通过使用赋值运算符简化代码赋值运算符：对变量进行赋值的运算符。原创 2023-10-07 13:23:04 · 235 阅读 · 0 评论 -
JavaScript入门——基础知识（2）
JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。注意：HTML和CSS是标记语言。未定义是比较特殊的类型，只有一个值undefined。什么情况出现未定义类型？只声明变量，不赋值的情况下，变量的默认值为undefined，一般很少【直接】为某个变量赋值为undefined。工作中的使用场景：在开发中经常声明一个变量，等待传送过来的数据。如果不知道这个数据是否传递过来，此时可以通过检测这个变量是不是undefined，就判断用户是否有数据传递过来。原创 2023-09-24 18:58:43 · 349 阅读 · 0 评论 -
JavaScript入门——（1）基本软件及准备工作
也可以自定义设置快捷键。原创 2023-09-21 10:46:13 · 245 阅读 · 0 评论