JavaScript
关注
分享
扫一扫
文章平均质量分 56
MDR_0820
这个作者很懒，什么都没留下…
展开
-
Vue注册组件语法糖、 事件修饰符 ，组建模块的抽离两种写法、父子组件通信
Vue注册组件语法糖<!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-11-15 15:04:21 · 295 阅读 · 0 评论 -
vue 购物车案例
html<body> <div id="app"> <div v-if="books.length"> <table> <tr> <th> 序列 </th> <th> 名称 </th> <th原创 2021-11-13 18:59:20 · 329 阅读 · 0 评论 -
正则表达式、工具
正则表达式正则表达式是用于匹配字符串中字符组合的模式。在 JavaScript中，正则表达式也是对象正则表达式 通常被用来检索、替换那些符合某个模式（规则的文本）例如：表单验证 用户名表单只能输入英文字母 数字或者下划线 昵称 输入框可以输入中文 （ 匹配）此外正则表达式 还常用于过滤掉页面中的一些敏感词 （替换）从字符串中 获取我们想要的特定部分 （提取） 等正则表达式的特点灵活性 逻辑性 和功能性都非常强可以迅速地极简单的方式达到字符串的复杂控制对于刚接触的人来说 比较原创 2021-11-10 19:53:06 · 823 阅读 · 0 评论 -
闭包、递归
变量作用域变量根据作用域的不同分为两种 ：全局变量和局部变量1 函数内部可以使用全局变量2 函数外部 不可以使用局部变量3 当函数执行完毕 本作用域 的局部变量会销毁什么是闭包闭包（closure） 指 有权 访问 另一个函数作用域中变量的 函数简单理解就是 一个作用域可以访问另外一个函数内部的局部变量<script>// 闭包 ：fun 这个函数作用域 访问了另外一个函数 fn里面的局部变量num// 闭包的主要作用 延伸了变量的 作用范围 function原创 2021-11-10 14:30:30 · 836 阅读 · 0 评论 -
flexible.js
(function flexible(window, document) { var docEl = document.documentElement; var dpr = window.devicePixelRatio || 1; // adjust body font size function setBodyFontSize() { if (document.body) { document.body.style.fontSiz原创 2021-11-03 16:55:09 · 102 阅读 · 0 评论 -
JavaScript 数据可视化 + 常见的数据可视化库
数据可视化数据可视化的主要目的：借助于图形化手段 清晰有效的传达与沟通信息数据可视化可以把 数字转换为图形 揭示蕴含在数据中的规律和道理数据可视化的使用场景常见的数据可视化库D3.js 目前web端评价最高的JavaScript可视化工具库（入手难）ECharts.js 百度出品的一个开源JavaScript数据可视化库Highcharts.js 国外的前端数据可视化库Antv 蚂蚁金服全新一代数据可视化解决方案等等<style> .box{原创 2021-11-03 16:27:52 · 592 阅读 · 0 评论 -
JavaScript本地存储
本地存储特性数据存储在用户浏览器中设置读取方便 甚至页面刷新 不丢失数据容量较大、sessionStorage 约5M localStorage 约20M只能存储字符串 可以将对象JSON.stringify()编码后储存window.sessionStorage生命周期为关闭窗口在同一个窗口（页面）下 数据可以共享以键值对的形式存储使用sessionStorage.setlitem( key,value) 键，值sessionStorage.getItem(‘key’) 获取数原创 2021-10-29 22:07:25 · 111 阅读 · 0 评论 -
JavaScript 插件 轮播图插件、框架
插件使用确认插件实现的功能官网查看说明下载插件打开demo实力文件 查看需要引入的相关文件 并且引入复制demo实例文件中的结果HTML 样式css 及JS代码轮播图插件 https://www.swiper.com.cn/使用方法https://www.swiper.com.cn/usage/index.html其他移动端常见插件superslide：http://www.superslide2.com/...原创 2021-10-29 17:00:55 · 180 阅读 · 0 评论 -
javascript 移动端 触屏事件touch
触屏事件 touchtouch 对象代表一个 触摸点 触摸事件可响应用户手指 或触控笔对屏幕或触控板操作常见触屏事件script> var div = document.querySelector('div') div.addEventListener('touchstart',function(){ console.log('touchstar 触摸事件'); }) div.addEventList原创 2021-10-28 20:16:52 · 219 阅读 · 0 评论 -
JavaScript动画原理
动画原理<style> div{ position: absolute; top: 0; left: 0; width: 100px; height: 100px; background-color:skyblue; } </style></head><body>原创 2021-10-26 21:06:07 · 103 阅读 · 0 评论 -
JavaScript：元素偏移量offset、元素可视区 client、立即执行函数、scroll滚动距离、mouse enter和mouse over的区别
offsetoffset 翻译就是 偏移量 我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）大小等常用属性代码展示// CSS .father{ width: 200px; height: 200px; margin: 200px;; background-color: skyblue; } .son{ width: 100原创 2021-10-26 13:52:56 · 211 阅读 · 0 评论 -
JavaScript:navigator对象、history 对象
navigator对象navigator对象 包含有关浏览器的信息 他有很多属性 我们最长常用的是userAgent 该属性该属性可以返回由客户 机发送服务器的 user-agent 头部的 值下面前端代码可以判断用户那个终端打开页面 实现跳转history 对象window 对象给我们提供了一个history对象 与浏览器历史记录进行交互 该对象包含用户（在浏览器窗口中) 访问的URL （地址）...原创 2021-10-26 10:27:42 · 98 阅读 · 0 评论 -
JavaScript：this指向问题、同步和异步、 JS执行机制、location对象
thisthis 的指向在函数定义的时候 是确定不了的 只有函数执行的时候才能确定this指向谁 一般情况下 this 的最终指向的是那个调用它的对象.全部作用域或者普通作用函数中 this指向全局对象window （定时器里面的 this指向window）方法调用中 谁调用this指向谁构造函数this指向构造函数<body> <button> 按钮</button> <script> // this 指向问题原创 2021-10-25 18:08:39 · 1172 阅读 · 0 评论 -
JavaScript BOM概述、window常见事件、定时器 、案例
BOMBOM 即 浏览器对象模型 它提供了独立于内容而与浏览器窗口进行交互的对象 其核心对象是 windowBOM 是由一些列相关的对象构成 并且每个对象都提供了很多方法与属性BOM 缺乏标准 JavaScript 语法标准组织是ECMA ，DOM的标准组织是W3C，BOM 最初是Netscape 浏览器标准的一部分DOM文档对象模型DOM 就是把文档当做一个对象来看待DOM的顶级对象是documentDOM主要学习的是 操作元素页面DOM 是W3C标准规范BOM浏览器对原创 2021-10-25 16:10:18 · 165 阅读 · 0 评论 -
JavaScript 鼠标事件、图片跟随鼠标移动。键盘事件
鼠标事件对象event 对象代表事件的状态 跟事件相关的一系列信息的集合 现阶段 我们主要是用鼠标事件对象 mouseEvent 和键盘事件对象KeyboardEvent图片跟随鼠标移动<body> <img src="images/h_h.jpg" alt=""> <!-- <img src="images/gif.gif" alt=""> --> <script> var pic = docum原创 2021-10-24 21:01:57 · 450 阅读 · 0 评论 -
JavaScript DOM事件流、事件对象
DOM 事件流事件流描述的的是页面中接收事件的顺序事件发生时 会在元素节点之间按照特定的顺序传播 这个传播过程 就是 DOM事件流DOM 事件流 分为三个阶段1.捕获阶段2.当前目标阶段3 .冒泡阶段比如 给div 注册点击事件事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程注意js 代码中只能执行捕获或者冒泡其中的一个阶段oncli原创 2021-10-24 17:40:38 · 144 阅读 · 0 评论 -
JavaScript 关于DOM操作小结 创建、 增、删、改、查、属性操作、事件操作
js组成 web API、DOM、获取元素的五种方法详情请点击：点击跳转关于dom操作主要针对元素的操作主要创建 增、删、改、查、属性操作、事件操作创建详情请跳转：点击跳转docunment.write( )innerHTMLcreateElement创建节点补充：三种创建元素区别document.writeelement.innerHTMLdocument.createElement区别document.write（ ）是指直接将内容写入页面中的内容流 但是文原创 2021-10-24 10:09:45 · 3076 阅读 · 0 评论 -
javascript 注册事件、删除事件
注册事件概述给元素添加事件 称为 注册事件或绑定事件注册事件有两种方式 ：传统方式 和 方法监听注册方式传统注册方式利用 on 开头的事件 比如on开通的鼠标事件代码<button>123</button> <button>456</button> <script> var buts = document.querySelectorAll('button') // 注册事件 点击事原创 2021-10-23 23:07:41 · 765 阅读 · 0 评论 -
JavaScript 节点概述 、父节点 parentNode、子节点children、兄弟节点、创建节点 添加节点、删除节点、复制拷贝节点 ★案例★
一般 节点至少拥有nodeType(节点类型）.nodeName(节点名称）和nodeValue(节点值）这三个基本属性元素节点 nodeType 为 1属性节点 nodeType 为 2文本节点 nodeType 为 3（文本节点包含文字、空格、换行等）开发中 节点操作主要操作的是元素节点父节点 parentNode获得里元素最近的父级节点<body> <div class="nav"> <div class="jiedian">原创 2021-10-22 17:58:05 · 2019 阅读 · 0 评论 -
JavaScript 排他思想 、自定义属性操作
排他思想如果有同一组元素 想要某一个元素实现某种样式 需要用到循环的排他思想算法所有元素全部清除样式给当前元素设置样式首先先排除其他 然后设置自己的样式<body> <button>一篇诗</button> <button>一壶酒</button> <button>一曲长歌</button> <button>一剑天涯</butto原创 2021-10-21 17:53:07 · 253 阅读 · 0 评论 -
JavaScript 简单事件，innerText、.inner HTML、常用的元素属性操、练习案例和小结
简单事件JavaScript 使我们有能力创建动态页面 而事件是可以被JavaScript侦测到的行为网页中每个元素都可以产生某些可以触发JavaScript的事件简单说就是：触发…响应机制事件是由三部分组成：事件源、事件类型、事件处理程序 ，也称为事件三要素事件源：事件被触发的对象事件类型：怎样被触发 ，鼠标点击？还是鼠标经过？还是键盘按下？事件处理程序：通过一个函数赋值的方式 完成鼠标事件<body> <button id="but"> 按钮 &l原创 2021-10-20 20:44:30 · 630 阅读 · 0 评论 -
JavaScript、js组成 web API、DOM、获取元素的五种方法
js组成 web API、DOM、获取元素、ID 获取元素、标签名获取、HTML5新增获取、quertSelector、document.querySelectorAll、获取特殊元素（body、HTML）JS 的组成APIAPI 应用程序编程接口 是一些预先定义的函数 目的是提供应用程序与开发人员基于某软件或硬件得以访问一组编程的能力 而又无需访问源码 或理解内部工作机制的细节简单理解： API 是给程序员提供一种工具 以便更轻松的实现想要完成的功能Web APIWeb API 是浏览原创 2021-10-20 13:31:40 · 352 阅读 · 0 评论 -
JavaScript 根据位置 返回字符、charAt、charCodeAt,ASCII表
charAt（index）返回指定位置的字符（index 字符串索引号）语法str.charAt（0） var arr ='skyblue' //遍历所有字符 for(var i =0; i <arr.length;i++){ console.log(arr.charAt(i)); }charCodeAtcharCodeAt（index） index索引号获取指定位置处字符原创 2021-10-19 19:07:41 · 287 阅读 · 0 评论 -
JavaScript 基本包装类型、查找数组中某一字符出现的位置和次数
基本包装类型为了方便操作基本数据类型 JavaScript 还提供了三个特殊的引用类型：StringNumberBoolean基本包装类型 就是把简单的数据类型包装成复杂数据类型 这样 基本数据就有了属性和方法代码演示 <script> // 基本包装类型 var str = 'sky' console.log(str.length); // 输出的是 3 // 简单数据类型包装成复杂数据类型 相当于执行了三步原创 2021-10-19 18:24:39 · 202 阅读 · 0 评论 -
JavaScript 连接数组concat、数组截取slice、数组删除splice 和添加
concatconcat（） 连接两个或多个数组 不影响原数组 返回一个 新数组concat方法创建一个新的数组，它由被调用的对象中的元素组成，每个参数的顺序依次是该参数的元素（如果参数是数组）或参数本身（如果参数不是数组）。它不会递归到嵌套数组参数中。注意：数组/值在连接时保持不变。此外，对于新数组的任何操作（仅当元素不是对象引用时）都不会对原始数组产生影响，反之亦然。 // concat（） 连接两个或多个数组 不影响原数组 返回一个 新数组 var arr2 = [1,2,原创 2021-10-19 17:29:08 · 236 阅读 · 0 评论 -
JavaScript 返回数组索引号方法、数组去重、数组转换字符串的两种方法
数组索引方法indexOf（）indexOf 作用就是返回该数组元素的索引号 从0开始查找它只返回第一个满足条件的索引号如果找不到该数组里面的元素 则返回的是 -1 // indexOf 返回索引号 var arr=['一','二','三','四','五','六','五'] // 两个相同的元素只返回第一个符合条件的索引号 console.log(arr.indexOf('五')); // 4 返回的索引号 console.log(arr原创 2021-10-19 16:26:47 · 2075 阅读 · 0 评论 -
JavaScript 数组对象、检查是否为数组、添加 删除数组元素的方法 push...和数组排序
数组对象的创建创建数组的两种方式字面量方式new Array()<title>Document</title> <script> // 字面量创建数组 var arr = [ 1,2,3,5] console.log(arr[0]); // new Array 创建数组 var arr1 = new Array(1,2,3); //表示 有3个数组 是 1，2，3原创 2021-10-19 14:53:18 · 408 阅读 · 0 评论 -
JavaScript 内置对象、math、绝对值和三个取整的方法、Date 日期、MDN查阅文档网站
内置对象JavaScript 中 对象分为3中：自定义对象、内置对象、浏览器对象前面两种对象是JS基础内容 属于ECMAScript 第三个浏览器对象属于我们jS独有的内置对象是指 JS 语言自带的一些对象 这些对象供开发者使用 并提供了一切常用的或是基本而必要的功能（属性和方法）内置对象的优点 帮助我们快速开发JavaScript提供了对少个内置对象：math，date，Array,String 等mathmath 数学对象不是一个构造器 所以不需要用new来调用 可以直接使用里面原创 2021-10-18 19:25:53 · 371 阅读 · 0 评论 -
JavaScript 对象、创建对象、构造函数创建对象、 对象调用、遍历对象
对象在JavaScript 中 对象是一组无序的相关属性方法的集合 所有的事物都是对象 如：字符串、数值、数组、函数等对象由 属性 和 方法 组成属性：事物的特征 在对象中用属性来表示 常用名词方法：事物的行为 在对象中用方法表示 常用动词创建对象的三种方式利用 字面量创建对象利用 new object 创建对象利用 构造函数 创建对象利用字面量 创建对象对象字面量：就是花括号{ } 里面包含了表达这个具体事务（对象）的属性和方法*（ ） 里面采取 键 值 对 的形式表示原创 2021-10-17 17:35:55 · 314 阅读 · 0 评论 -
JavaScript 预解析、代码执行
预解析JavaScript代代码 是由浏览器中的JavaScript解析器来执行的 JavaScript解析器在运行JavaScript代码的时候分为两步：预解析和代码执行js引擎运行js分为两步 ：1.预解析、2.代码执行预解析 ：js引擎会把js里面所有的var 还有function 提升到当前作用域的最前面代码执行： 按照代码书写的顺序 从上往下执行预解析分为 变量预解析（变量提升）和函数预解析（函数提升变量提升：就是把所有的变量声明提升到当前作用域最前面 不提升赋值操作函数提升：就原创 2021-10-17 16:03:23 · 98 阅读 · 0 评论 -
JavaScript 作用域、 全局变量、局部变量、 作用域链
JavaScript 作用域就是代码名字（变量）在某个范围内起作用和效果 目的就是 为了提高程序的可靠性 更重要的是减少命名冲突js 的作用域 ：全局作用域 局部作用域全局作用域 ：整个script标签中 或者时一个单独的js文件局部作用域（函数作用域） 在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用全局变量在全局作用域下声明的变量 叫做全局变量（在函数外部定义的变量）全局变量在代码的任何位置都可以使用在全局作用域下 var 声明的变量 是全局变量特殊情况下 在函数原创 2021-10-17 13:53:29 · 212 阅读 · 0 评论 -
JavaScript 函数的使用、函数的参数、函数的返回值 return、arguments
函数在js里 可能会定义非常多的相同代码 或者功能相似的代码 这些代码可能需要大量使用 虽然for循环语句也能实现一些简单的重复操作 但是 比较具有局限性 此时我们就可以使用JS 中的函数函数：就是封装了一段可能被重复调用执行的代码块 通过此代码块可以实现大量代码的重复使用函数的使用函数在使用是分为两步；声明函数 和 调用函数先声明： ”function 函数名（）{ console.log（‘’） }在调用： 函数名（） 通过调用函数名来执行函数体代码原创 2021-10-17 09:58:26 · 471 阅读 · 0 评论 -
JavaScript数组中 新增元素、数组存放、数组筛选、冒泡排序
通过修改length长度来实现新增数组元素通过修改length长度来实现数组扩容的目的length属性是可读写的<script> var arr = ['red','green','yellow','blue'] arr.length=8; console.log(arr); console.log(arr[4]); console.log(arr[5]); console.log(arr[原创 2021-10-16 14:37:40 · 207 阅读 · 0 评论 -
JavaScript 数组的概念、 数组（Array）、遍历数组、数组的长度
数组（Array）是指一组数据的集合 其中每个数据被称作元素 在数组中 可以存放任意类型的元素 数组是一种将一租数据存储在单个变量名下的优雅方式用 new 创建数组var arr = new Array(); 创建一个空数组利用数组字面量 创建数组 [ ]var arr = [ ]; 创建一个空的数组数组里面的 数据一定要用 逗号， 隔开数字里面的数据 称为 数组元素代码展示<script> var arr = ['星期一','星期二','星期三','星原创 2021-10-15 22:20:02 · 299 阅读 · 0 评论 -
JavaScript 双重 for循环、 ★99乘法表★
有些情况下 单层for 循环 并不能满足我们的需求 此时就要用到循环嵌套来实现循环嵌套是指 在一个循环语句中 在定义一个循环语句的语法结构 如 在for循环中在嵌套一个for循环 这个循环称为双重for循环<script> var rows = prompt('请输入行数'); var cols =prompt('请输入列数'); var p =''; for (var i = 1; i <= rows; i++){原创 2021-10-15 15:17:10 · 183 阅读 · 0 评论 -
JavaScript 循环 for循环 、断点调试
循环分为for循环双重for循循环while循环do while 循环continue break循环的目的 可以重复执行某些代码在实际问题中 有许多具有规律性的重复操作 因此在程序中要完成这类操作就需要重复执行某些语句for循环在程序中 一租被重复执行的语句 被称为循环体 能否继续重复执行 取决于循环的终止条件 由 循环体及循环的 终止条件组成的语句 被称为循环语句for 重复执行某些代码 通常跟记数有关系语法结果for（初始化变量；条件表达式；操作表达式）{ 循原创 2021-10-15 13:18:57 · 682 阅读 · 0 评论 -
JavaScript 流程控制 分支语句 双分支语句 if、、else 、switch
在一个程序执行的过程中 各条代码的执行顺序对程序的结果是有直接影响的，很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能简单理解 ：流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构 分别是 顺序结构、分支结构、循环结构 这三种结构代表三种代码执行的顺序分支结构由上到下执行代码的过程中 根据不同的条件 执行不同的 路经代码（执行代码多选一的过程）从而得到不同的结果JS 语言提供了两种分支结构语句if语句switch语句if语句语法结构if（）{.原创 2021-10-14 22:42:58 · 625 阅读 · 0 评论 -
JavaScript 赋值运算符 、运算符 优先级
赋值运算符= 直接赋值= 、-= 加减一个数后再赋值*=、/=、%= 乘 除 取模 后在赋值<script> var m =2; m += 5; console.log(m);// 7 var s =5; s *= 3 console.log(s); // 15 </script>...原创 2021-10-14 21:02:58 · 258 阅读 · 0 评论 -
逻辑运算符 、逻辑中断
逻辑运算符逻辑与 ‘’&&‘’ 简称 ‘’与 ‘’逻辑或 ‘’||‘’ 简称 ‘’或‘’逻辑非 ‘’！ ‘’简称 ‘非逻辑与 两边都是 true 返回结果才为true // 逻辑与 && 两侧结果都为 true 则返回结果才为true console.log(1 > 2 && 3 > 2);//fales 有一个是假 返回结果就是假 console.log(5原创 2021-10-14 20:19:37 · 407 阅读 · 0 评论 -
JavaScript 递增和递减运算符、比较符运算
递增运算符如果需要反复给数字变量添加或减去 1 可以使用 递增（++）和递减（- -） 运算来完成在JavaScript中 递增（++）和递减（- - ） 既可以放在变量前面也可以放在变量后面我们称之为 前置递增 递减 放在后面时 我们称为后置递增 递减运算符注意 递增和递减 运算符 必须和变量配合使用前置递增 先自加 在返回值后置递增 先表达式返回原值 在自加 <script> var num = 1;原创 2021-10-14 18:18:07 · 222 阅读 · 0 评论