
JavaScript
文章平均质量分 72
兰de宝贝
前端开发小博主,目前在努力学习中,望不吝赐教
展开
-
JS 分页效果展示
首先是默认界面,默认首次进入页面的时候,每页展示4条数据,默认展示第一页,并把向前翻页按钮禁止掉。🏡 点击下一页按钮,可以进行翻页效果,当前页不是第一页或者最后一页时,前后翻页按钮都是可用状态。🏡 点击展示数据的按钮 可以渲染不同数量的数据在页面中。原创 2022-11-30 20:25:08 · 1214 阅读 · 0 评论 -
JavaScript的判断语句
【代码】JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。JavaScript的判断语句。if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,if/if,else,原创 2022-11-24 18:00:40 · 8896 阅读 · 1 评论 -
JS中判断数据类型的几种方法
JS中判断数据类型的几种方法:1.typeof 2.constructor 3.instanceof 4.Object.prototype.toString.call原创 2022-11-19 10:49:06 · 507 阅读 · 0 评论 -
一篇文章弄懂JS中的原型和原型链
每一个函数都有一个原型(是一个空间,或者是一个对象,内部能存储一些东西),原型内部都有一个constructor,这个属性表明当前这个原型具体是哪个函数的。每一个对象都有一个__proto__ (注意:proto两边分别是两个下划线),可以去访问到自己构造函数的原型。🍀如果这里没找到, 会继续去对象的 __proto__ 查找, 找到直接使用, 然后停止查找。🍀如果没有找到, 会去对象的__proto__查找, 如果找到直接使用, 然后停止查找。对象访问原型的方法 : 对象.__proto__原创 2022-11-18 21:04:25 · 289 阅读 · 6 评论 -
自定义构造函数的书写和缺陷
1.一定是和 new 关键字连用,如果没有和 new 关键字连用,那么它就是一个普通函数2.当一个函数和 new 关键字连用的时候, 这个函数就被称为自定义构造函数, 这个函数内的 this 指向, 指向返回出来对象3.构造函数不能使用给箭头函数, 因为箭头函数内部没有 this4.构造函数内部不需要 returnreturn 了基本数据类型, 写了和没写一样return 了引用数据类型, 写了构造函数就没用了5.书写构造函数时, 首字母建议大写.目的: 仅仅是为了和普通函数区分开。原创 2022-11-17 20:36:21 · 358 阅读 · 0 评论 -
批量生产对象
内置构造函数的方式也不能批量生产对象。字面量的方式是不能批量生产对象的。4.自定义构造函数方式创建对象。* 手动向创建的对象添加属性。3.工厂函数方式创建对象。这个方法可以批量生产对象。2.内置构造函数的方式。* 手动给对象添加属性。* 手动创建一个函数。* 手动返回一个属性。* 自动创建一个对象。* 自动返回一个对象。原创 2022-11-17 20:01:06 · 292 阅读 · 0 评论 -
认识面向对象
面向对象也叫OOP (Object Oriented Programming),它不是一个语法,它是一种编程思想和架构。如果有这个机器, 我们直接通过这个机器去得到轮播图, 如果没有这个机器, 我们需要自己创造一个机器。找到一个"饭馆",它能够完成我的需求, “生产"一顿饭,然后我们通过这个"饭馆”,得到一顿饭。编程时注重过程, 一切功能都是一步一步来。如果有这个"饭馆",那我们直接使用;如果没有,那就自己开一个"饭馆"找一个 ‘机器’ 这个机器能生产产品, 这个产品就是轮播图。原创 2022-11-16 21:07:37 · 279 阅读 · 0 评论 -
HTML+CSS+JavaScript实现轮播图
左右按钮显示。点击右侧按钮一次,图片往左播放一张,以此类推, 左侧按钮同理。图片播放的同时,下面的焦点一起变化。点击焦点,可以播放对应的图片。鼠标不经过轮播图, 轮播图也会自动播放图片。鼠标经过轮播图模块的时候, 自动播放会停止。原创 2022-11-16 19:54:04 · 1171 阅读 · 0 评论 -
JS运动函数
运动函数,div盒子移动原创 2022-11-16 19:39:03 · 868 阅读 · 0 评论 -
正则中字符串的方法(search;match;replace)
正则中字符串的方法(search;match;replace)原创 2022-11-14 21:11:54 · 273 阅读 · 0 评论 -
JS中的正则表达式
正则就是一种规则的的表达式,书写一段规则,用于匹配一段字符串是否符合规则创建正则表达式创建正则表达式有两种方式:1.字面量的形式2.内置构造函数的形式 * 1. 字面量的形式 const reg = / abc / * 2. 内置构造函数的形式 const reg1 = new RegExp('abc') console . log(reg) // /abc/ console . log(reg1) // /abc/ *1.原创 2022-11-14 20:35:40 · 5798 阅读 · 0 评论 -
ES6基本语法
1.ES6的相关概念2.ES6新增语法2.1 le2.2 const2.3 let 与 const 的差异2.4 letconstva的区别2.5箭头函数2.6 箭头函数与普通函数的区别2.7 解构赋值3.ES6的内置对象扩展3.1 展开运算符(扩展运算符)3.2 Set 和 Map原创 2022-11-08 20:19:53 · 584 阅读 · 0 评论 -
this关键字
每一个函数内部都有一个关键字thisthis 的值, 只和函数的调用有关, 与函数书写无关1. 一个普通的全局函数, 在正常调用的情况下, this === window 2. 如果将函数放置到对象, 通过对象的语法去获取到并调用, 那么 this === 对象2. 如果将函数作为 事件处理函数, 那么触发的时候, 内部的 this 指向了 事件源3. 如果将函数作为定时器执行时的函数, 那么触发的时候, 内部的 this 指向了 全局对象 window原创 2022-11-07 19:48:56 · 236 阅读 · 0 评论 -
JS目标冒泡捕获
这里的目标就是事件源,传播时,会从目标传播到父级,body,html,document,window。'触发了 box2222 的点击事件''触发了 box1 的点击事件''触发了 box2 的点击事件''触发了 body 的点击事件''触发了 box1 的点击事件''触发了 body 的点击事件'原创 2022-11-05 10:45:31 · 214 阅读 · 0 评论 -
JS事件委托
事件委托是利用事件的冒泡原理来实现的,那么什么是事件冒泡呢?比如给最里面的li添加一个click点击事件,那么这个事件就会一层一层的往外执行.而利用事件委托,给最外层的div添加click事件,那么里面的ul,li做点击事件的时候,都会冒泡到最外层的div上,所以都会触发,这就是事件委托,委托它们父级代为执行事件.顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件委托给父元素,让父元素担当事件监听的职务。//新添加的li也可以触发点击事件。'我是通过 JS 创建的'**HTML和css部分。原创 2022-11-05 10:02:26 · 1040 阅读 · 0 评论 -
JavaScript中关于DOM的知识详解
DOM是一种文档对象模型,同时也是用于HTML编程的接口,通过DOM来操作页面中的元素。当HTML页面被实现加载的时候,浏览器会创建一个DOM,给文档提供了一种新的逻辑结构,并且可以改变内容和结构。DOM是面向对象,并且定义了修改文档所需要的对象,各个对象之前的关系,我们可以也页面上的DOM看成一个树状结构,通过JS,对HTML文档进行添加排版,JS要想访问HTML中的元素,就要通过对象模型来获得。原创 2022-11-03 20:55:12 · 489 阅读 · 0 评论 -
通过JS实现瀑布流效果
JS实现瀑布流效果/ 默认每页展示数据 8 条(因为4条高度不够,不能滚动)// 因为每页展示数据固定, 所以总页数也是固定。// 2. 首次打开页面时, 直接调用渲染函数。// 3.1 如果后续没有新数据, 那么不执行。// 3.2.5 打开 loading 图片。// 3.2.4 开始请求, 修改开关的值。// 3. 监听页面的滚动事件。// loadding 效果。// 1.1 从数组截取数据。// 浏览器的可视区域高度。// 3.2.2 书写判断。// 1. 准备渲染函数。// 1.2 展示到页面。原创 2022-11-03 19:04:47 · 514 阅读 · 0 评论 -
JavaScript的事件汇总
DOM 2级事件绑定(事件监听) 事件源.addEventListener(‘事件类型’, 事件处理函数)// 4. 鼠标按下事件 鼠标左键按下的时候会触发的(哪怕鼠标没有抬起)// 8. 鼠标移动事件 鼠标在元素内部移动时触发。// 5. 鼠标抬起事件 鼠标左键抬起的时候会触发的。// 6. 鼠标移入事件 鼠标的移动到元素内部时触发。// 7. 鼠标移出事件 鼠标移动出元素内部时触发。// console.log('鼠标移动时触发')原创 2022-11-02 20:37:44 · 296 阅读 · 0 评论 -
JS之全选按钮的实现
/ 点击其中一个按钮的时候, 判断其他几个 的选中状态是否为 true;如果都是true 那么选中全选;//获取所有class为item的元素,并且输出为真数组。//获取所有class为item的元素,并且输出为真数组。//获取所有class为item的元素,并且输出为真数组。// 获取class为allBtn的元素。// 获取class为allBtn的元素。// 获取class为allBtn的元素。//取消选中1~4选项。//取消选中1~4选项。原创 2022-11-01 20:43:50 · 872 阅读 · 0 评论 -
JavaScript实现回到顶部效果
可以通过element.scrollTop的方法实现回到顶部的效果,如下:原创 2022-11-01 19:41:37 · 712 阅读 · 4 评论 -
JavaScript中cookie的认知
不管设置的是哪个时区的时间,它都会按照世界标准时间去设置,以中国为例,处于东八区,如果需要设置一个过期时间的话 ,需要先往后面调整8个小时,然后再加上需要的过期时间。cookie只能在用服务器启动的页面中正常使用.解决办法:vscode安装live server。原创 2022-10-31 19:24:26 · 260 阅读 · 0 评论 -
cookie与storage的区别(JS)
cookie:默会话画级,页面关闭,存储消失;sessionstorage:会话级别, 关闭页面,存储就失效。storage:交互式请求不会携带,属于前端人员配置出传递。localstorage:永久存储,除非手动清理。cookie:交互时请求默认携带cookie。co4.okie:不管前后端语言都可操作。storage:只能在前端语言来操作。storage:有\H5以后才有的。storage:不能通过手动配置.cookie:有JS的时候就有了。原创 2022-10-31 14:28:15 · 357 阅读 · 0 评论 -
JavaScript中字符串的方法
作用: 找到当前字符串中第一个参数对应的值, 然后将其替换为 第二个参数传入的数据。返回值: 查询到的值对应的十进制码, 没有查询到就是 NaN。返回值: true: 是开头;作用: 在 字符串中找到分隔符, 将其分割, 并放置到数组中。作用: 判断 当前字符串中 是否拥有 指定字符串 片段。返回值: 查询到的值, 没有查询到就是一个 空字符串。作用: 寻找数据在字符串中出现的位置(倒叙查找)作用: 查询字符串开头是不是 指定的 字符串片段。作用: 查询字符串结尾是不是 指定的 字符串片段。原创 2022-10-28 19:29:29 · 237 阅读 · 0 评论 -
JavaScript中数组的遍历方法
【代码】JavaScript中数组的遍历方法。数组的遍历方法forEach; map; filter; find; findIndex; every; some; reduce;原创 2022-10-27 19:39:49 · 794 阅读 · 0 评论 -
JavaScript中数字的方法
作用:得到一个0~1之间的随机数,包含0,不包含1。语法:Math.max(数据1,数据2,数据3…语法:Math.min(数据1,数据2,数据3…语法:Math.pow(数据1,数据2)语法:Math.random()语法:Math.round()语法:Math.floor()语法:Math.ceil()语法:Math.sqrt()语法:Math.abs()作用:将数据四舍五入取整。作用:求参数中的最小值。作用:求参数中的最小值。作用:将数据向上取整。作用:取数据的绝对值。语法:Math.PI。原创 2022-10-27 16:23:49 · 340 阅读 · 0 评论 -
JavaScript中数组的方法
数组.sort(function (a, b) {retrun a - b});数组.splice(开始索引, 多少个, 数据1, 数据2, 数据3…作用: 将 参数, 合并到 指定数组内(如果参数写了数组, 那么会将数组的每一个值合并到指定数组)会将数组内所有值, 转换为字符串, 然后一位一位的对比(第一位相同,对比第二位,…传递参数: 剪切数组中的某一段数据, 将第三个参数开始, 当成新数据插入到数组内。语法: 数组.slice(开始索引, 结束索引)语法: 数组.concat(数据1, 数据2)原创 2022-10-26 20:18:43 · 266 阅读 · 0 评论 -
JavaScript中数据类型之间的区别
数据类型之间的区别原创 2022-10-25 19:59:50 · 268 阅读 · 0 评论 -
JavaScript数组
JS数组原创 2022-10-25 19:47:58 · 273 阅读 · 0 评论 -
JS之数组去重
【代码】JS之数组去重splice。原创 2022-10-25 18:54:45 · 221 阅读 · 0 评论 -
JavaScript中对象的基本操作
2.对象的基本操作包括:增删查改四种.有两种语法形式,分别是点语法和中括号语法(数组语法).对象就是一个数据的集合(复杂数据),对象属于复杂数据类型(也叫引用数据类型)3.当出现变量的时候(想用变量作为 key) 也需要使用 中括号语法。1.对象 的 key 符合命名规范的时候,两种方式都可以。a.3 增加 (对象.新的key = 值)b.2 修改 (对象[‘key’] = 新的值)b.3 增加 (对象[‘新的key’] = 值)a.2 修改 (对象.key = 新的值)c.可以使用特殊符号。原创 2022-10-25 16:29:04 · 824 阅读 · 0 评论