![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JavaScript
文章平均质量分 53
以分享知识点为乐趣,由浅入深,让你明明白白,轻轻松松搞懂啥是JS!
Jikel
小小前端一枚
展开
-
前端打印功能 vue
前端vue 打印功能原创 2022-09-08 15:46:59 · 267 阅读 · 0 评论 -
JS分支语句的对比和运用
JS判断语句对比原创 2022-08-24 16:19:08 · 210 阅读 · 0 评论 -
echarts 对后端获取的值进行数据格式化处理
echarts是我们经常用到的数据可视化图形但是后端反馈给我们的数据经常是数组包对象的集合类型 , 我们常常需要进行一些数据格式化的算法取值操作 , 这里我提供一种方法,希望对读者有所帮助!// 后端返给我们的值echarts:[ {id:1,createData:2020-1-4,num:20}, {id:2,createData:2020-2-6,num:120}, {id:3,createData:2020-4-10,num:80},原创 2022-04-18 14:07:37 · 3074 阅读 · 1 评论 -
浅谈javascript堆栈内存
之前已经自己学习过javascript的语法了 , 但是最近又在重新刷这方面的基础 , 树大必须根深!在腾讯课堂上看到了关于js基础数据类型以及堆栈的相关知识 , 在此作为总结和分享首先我们知道js提供了几种基础的数据类型是 数字 布尔 字符串 undefined unll以及几种引用类型是 对象 数组你或许知道 , javascript 将基础数据类型存放到了栈 , 将引用类型存放到了堆比如我此时声明了 var a = 1;在栈内存里面 就会声明一个叫做 a的空间 , 里面原创 2022-03-19 22:39:19 · 501 阅读 · 0 评论 -
下划页面固定效果
此段代码可以具有下划页面将元素固定的效果,相当于京东侧边栏的固定滚动-js版本 // 左侧年份菜单栏固定 aaaaa(){ function menuFixed(id){ var obj = document.getElementById(id); var _getHeight = obj.offsetTop; window.onscroll = function(){ changePos(id,_getHeight原创 2022-01-11 11:47:19 · 262 阅读 · 0 评论 -
循环案例-用户输入爱,退出,否则无限循环
话不多说,上代码! // ---------用户输入爱,退出,否则无限循环------------- let love = prompt('你爱我吗') while (love !== '爱') { // 如果不是爱,循环就是true,一直循环循环体 love = prompt('你爱我吗') // 变量已经生命过了,所以不用再次声明,直接使用 }...原创 2021-08-03 13:33:15 · 183 阅读 · 0 评论 -
案例--点击方块变形出时间
<!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-07-11 15:25:49 · 56 阅读 · 0 评论 -
js-基础-小案例-交换变量的值
项目场景:交换变量的值问题描述:设置两个变量 a和c 分别赋值,然后交换数据,在控制台打印出来<!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=d原创 2021-06-20 00:12:18 · 76 阅读 · 0 评论 -
JS--注册事件
注册事件1.事件监听1.概念2.事件监听三要素3.事件监听的语法2.注册事件代码演示1.事件监听1.概念程序检测是否发生状态改变,立即调用函数,做出响应<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=原创 2021-06-20 00:11:30 · 87 阅读 · 0 评论 -
自定义属性
自定义属性概念作用规范为什么要加 data- 开头语法注意事项代码演示:利用自定义属性完成tab切换在 HTML 中除了标签的【标准属性】外,开发者还可以给标签【自定义属性】概念img的标准属性为src、alt等,但若写一个 data-info 则data-info叫自定义属性作用一般用来存储额外数据辅助完成某个功能规范自定义属性一律以 data- 开头,后面接名字,且名字中若多个单词用-隔开例:data-info 、data-label、data-login-name等为什么要加 dat原创 2021-06-20 00:10:52 · 1446 阅读 · 0 评论 -
封装-自执行函数-命名空间
封装-自执行函数-命名空间1.封装1.概念2.提升程序的可维护度2.自执行函数1.概念2.代码执行3.本质4.注意:自执行函数前面尽量都加上分号2.命名空间1.概念2.优点2.代码演示3.封装一个命名空间,将时间对象封装4.总结以上点1.封装1.概念通过命名空间或自执行函数实现程序的基本封装2.提升程序的可维护度2.自执行函数1.概念是一种将函数声明和调用合并到一起的写法2.代码执行常见写法<!DOCTYPE html><html lang="zh-CN">原创 2021-06-15 22:23:24 · 226 阅读 · 0 评论 -
除 addEventListener外的事件监听的方法,以及事件的杂点知识
这里写目录标题1.行内事件1.概念2.语法3.代码演示2.DOM L0事件1.指的是 DOM 刚诞生时的版本2.语法3.代码演示3.事件移除1.概念2.使用场景3.语法4.代码演示4.事件类型1.概念2.代码演示5.事件对象1.概念2.使用3.语法4.代码演示1.行内事件1.概念 监听一个元素的事件,也可以写在标签内2.语法3.代码演示如果事件触发时要执行多句代码,一般会调用函数此时也可以给函数传参注:此时函数内的this是window2.DOM L0事件1.指的是 DOM 刚诞原创 2021-06-15 22:23:01 · 311 阅读 · 0 评论 -
JS操作节点的增删改查!(重要)以及事件流
增删改查-事件流!一 js节点的增删改查!1.插入节点概念方法 - 创建 - 插入注意代码演示2.删除节点概念语法:注意-没有父元素删除不成功!代码演示3.查找节点的方法1.通过子元素找到父元素2.通过父元素找到子元素代码演示兄弟之间的查找4.替换节点二 事件流1. 捕获概念使用代码演示2.冒泡-默认存在的概念代码演示3.阻止事件默认行为解释语法代码演示4.事件委托概念前提(父子同事件)以及本质代码演示一 js节点的增删改查!增(插入、复制)、删、改(替换)、查1.插入节点概念即创造出一个新的网页原创 2021-06-15 22:22:23 · 1209 阅读 · 0 评论 -
JS-加载事件-滚动事件
加载事件一 加载事件1.语法2.详解3.注意4.代码演示二 滚动事件1.概念2.语法3.注意事项4.代码演示5.总结:一 加载事件加载事件是浏览器加载,如图片外联JavaScript、外联 CSS 等外部资源完成时触发的事件1.语法element.addEventListener(‘load’,function () {});2.详解1、网页当中凡是写路径的都会再network被查看2、凡是有路径的都需要有外部资源有时候我们需要加载资源之后再去做某些事情,那么此时就需要加载事3.注意通原创 2021-06-15 22:22:03 · 1143 阅读 · 0 评论 -
动态获取元素大小与位置
动态获取元素大小与位置一 动态获取元素大小1.语法:2.代码演示3.结论:4.注意二 动态获取元素位置1. 语法2.代码演示3.总结三 小练习鼠标拖拽一 动态获取元素大小动态获取 DOM 元素的大小与位置是开发网页特效所必不可少的。1.语法:element.clientWidthelement.offsetWidthelement.scrollWidth2.代码演示<!DOCTYPE html><html lang="en"><head> <原创 2021-06-15 22:21:44 · 383 阅读 · 0 评论 -
JS-延时函数
延时函数延时函数1.概念2.与定时器的区别3.细节4.代码演示5.总结6.延时执行(删除)延时函数JavaScript 中定时器函数的构成,能够基于定时器创建定的定时任务1.概念延时函数是实现程序暂缓执行的技术延时函数和间歇函数统称为定时器或定时任务2.与定时器的区别间歇函数(定时器)的特征是不间断的重复执行而延时函数只会执行 1 次。结合递归函数可以使用 setTimeout实现setInterval 一样的功能!3.细节1.setInterval 间歇函数也会延时执行2.setT原创 2021-06-15 16:59:53 · 12318 阅读 · 0 评论 -
JS实现动画
这里写目录标题JS动画概念注意事项代码演示通过js控制动画(元素属性)总结JS动画概念setInterval 、 setTimeout 常被用于创建 JavaScript 动画。注意事项1.动的元素必须是定位来设置,例如绝对定位2.元素移动的时候,是改变定位的top / left值操作的代码演示定时器延时<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8">原创 2021-06-15 16:58:57 · 2137 阅读 · 0 评论 -
JS--环境变量-- this初识
环境变量1.概念2.作用3.代码演示4.初步总结this1.概念是函数内部特殊的变量 this ,它代表着当前函数运行时所处的环境2.作用弄清楚this的指向,可以让我们代码更简洁1.【谁调用, this 就是谁】 是判断普通函数中 this 指向的粗略规则2.直接调用函数,其实相当于是 window.函数,所以 this 指代 window3.代码演示<!DOCTYPE html><html lang="zh-CN"><head> <m原创 2021-06-15 16:57:46 · 353 阅读 · 0 评论 -
高阶函数的初体验-回调函数--函数表达式
高阶函数1.概念2.函数的分类1.匿名函数函数表达式回调函数具名函数1.概念高阶函数可以被简单理解为函数的高级应用JavaScript 中函数可以被当成【值】来对待,基于这个特性实现函数的高级应用。【值】就是 JavaScript 中的数据,如数值、字符串、布尔、对象等。2.函数的分类1.匿名函数不定义函数名–通常作为值(表达式)或者自调用<!DOCTYPE html><html lang="zh-CN"><head> <meta ch原创 2021-06-14 14:45:08 · 106 阅读 · 0 评论 -
JS-定时器函数!
这里写目录标题1.定时器介绍2.定时器的使用1.开启定时器2.关闭定时器1.定时器介绍概念: 每隔一段时间需要自动执行一段代码2.定时器的使用定时器函数可以开启和关闭定时器1.开启定时器<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2021-06-14 14:44:47 · 773 阅读 · 0 评论 -
JS -- 时间对象
时间对象1.事件对象1.概念2.作用3.实例化2.获得当前时间1.获得指定时间2.具体实现获取系统时间3.时间戳1.概念2.三种方式获取时间戳注意事项以及相关公式1.事件对象1.概念用来表示时间的对象2.作用可以得到当前系统时间3.实例化在代码中发现了 new 关键字时,一般将这个操作称为实例化2.获得当前时间1.获得指定时间2.具体实现获取系统时间实现图实现代码<!DOCTYPE html><html lang="zh-CN"><head原创 2021-06-14 14:44:30 · 150 阅读 · 0 评论 -
JS-修改Css属性和元素文字
修改Css属性和元素文字1.修改css属性语法代码演示:注意2.修改元素文本innerText 属性2.innerHTML 属性3.代码演示1.修改css属性语法代码演示:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-06-14 14:44:11 · 700 阅读 · 0 评论 -
修改元素自带的属性
修改元素自带的属性1.对象解决2.通过 setAttribute 方法修改3.代码演示4.注意事项1.对象解决2.通过 setAttribute 方法修改3.代码演示<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <原创 2021-06-14 14:43:53 · 153 阅读 · 0 评论 -
查找Dom节点的方式
查找Dom节点的方式1.根据 id 来查找dom元素节点注意事项2.查找html标签元素3.查找body标签元素1.根据 id 来查找dom元素节点<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v原创 2021-06-14 14:43:34 · 1138 阅读 · 0 评论 -
Dom-Dom树-Dom节点
Dom-Dom树-Dom节点Dom概念核心思想作用全称2.DOM树概念实质作用3.Dom节点概念节点类型1.元素节点:2.属性节点3.文本节点4.其他4.document概念作用本质document 是学习 DOM 的核心Dom概念是浏览器提供的一套专门用来操作网页内容的功能核心思想把网页内容当做对象来处理作用开发网页特效和实现用户交互全称Document Object Model 文档对象模型2.DOM树概念HTML 文档以树状结构直观的表现出来,我们称为文档树或 DOM 树原创 2021-06-14 14:43:12 · 441 阅读 · 0 评论 -
JavaScript与ECMAScript之间的火花与碰撞
JavaScript与ECMAScript1.ECMAScript概念2.JavaScript 是什么?概念3.Web APIs 是什么?概念4.关系图1.ECMAScript概念ECMAScript 是一套语法标准简称ESJavaScript的语法其实就是 ECMAScript 里的语法变量、数据类型、运算等规则都是 ECMAScript 规定的2.JavaScript 是什么?概念遵守 ECMAScript 规则的一套编程语言严格来讲,ECMAScript 配合浏览器提供的 Web原创 2021-06-14 14:42:49 · 43 阅读 · 0 评论 -
数组介绍-- 重要模块(数组遍历以及对象的遍历)
数组-- 对象的遍历1.啥是数组?2.为什么要数组?3.概念总结:4.数组的语法以及使用5.数组的初体验6.数组的一些术语(下标)7.动态添加属性8.数组的遍历9.对象的遍历10.模仿取出后端数据打印后台11.数组方法总结1.啥是数组?数组(Array)是一种可以按顺序保存数据的数据类型2.为什么要数组?可以将多个数据有序的保存,我们在工作中从后端接收的数据很多都是数据套对象的形式,所以数组必不可少!3.概念总结:// 数组:将一堆数据,按照顺序保存数据的数据类型 // 数组:Array --原创 2021-06-14 14:42:03 · 230 阅读 · 0 评论 -
关键字-保留字是啥?
原创 2021-06-14 14:40:59 · 101 阅读 · 0 评论 -
循环大全--while--do-while--for循环--循环结束!
JS循环全解1. while 循环语法本质三要素代码演示:循环的过程总结2. do-while循环语法和while的区别:代码演示:总结两者区分总结:3.for循环作用:好处:代码演示:循环嵌套:执行原理:先执行外层循环,外层海执行一次,里层执行完毕后,再执行外层第二次,以此类推!4.循环结束-continue和break两者区别代码演示!5.以上循环大总结!1. while 循环循环:重复执行某段代码, 而 while : 在…. 期间语法 // while(循环条件为true){原创 2021-06-13 17:31:54 · 907 阅读 · 0 评论 -
查询亦师亦友的BUG存在-断点调试
断点调试什么是断点调试?断点:作用:如何使用断点调试?详细解释小图标什么是断点调试?断点:在某句代码上加的标记就叫断点,当程序执行到这句有标记的代码时会暂停下来作用:后台进行代码的断掉调试,可以帮助更好的理解代码运行,更快找到bug如何使用断点调试?浏览器打开调试界面1. 按F12打开开发者工具2. 点到sources一栏3. 选择代码文件4. 选择断点代码5. 点击刷新,操作小图标即可详细解释小图标<!DOCTYPE html><html lang="原创 2021-06-13 17:07:56 · 93 阅读 · 0 评论 -
运算符的优先级
运算符的优先级简单介绍本章分享运算符的优先级如何进行判断呢?代码演示:简单介绍本章分享本篇技术分享较为简单,主要是掌握运算符优先级,能判断运算符执行的顺序即可,多部分会进行判断的时候使用,加之数据的算法,配合查看使用!运算符的优先级如何进行判断呢?1.一元运算符里面的逻辑非优先级很高2. 逻辑与比逻辑或优先级高3.代码演示:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="原创 2021-06-13 16:58:11 · 2419 阅读 · 0 评论 -
一元运算符之自增自减
一元运算符的自增和自减一元运算符的自增和自减解释:自增:自减:前置自增:后置自增:自增运算符的用法:一元运算符的自增和自减自增自减:是比较重要的进行简单的数据进行判断叠加的手段之一虽然知识比较少,但是我还是决定将他的运算方法,在此进行一篇详细的讲解!解释:因为自增和自减的用法基本一致,所以我在这里,就简单的以自增进行讲解和用法演示!自增:符号:++作用:让变量的值 +1自减:符号:–作用:让变量的值 -1 l 使用场景:使用场景:经常用于计数来使用。 比如进行10次操作,用它来计原创 2021-06-13 16:30:13 · 201 阅读 · 0 评论 -
赋值运算符
<font color=#999AAA 本篇技术分享为赋值运算符文章目录前言一、赋值运算符是什么?二、赋值运算符的类型总结前言在我们使用js进行编程的时候,给变量进行赋值以及根据赋值运算符进行判断的时候,赋值运算符是必不可少的!一、赋值运算符是什么?对变量进行赋值的运算符二、赋值运算符的类型简单的赋值运算符:=复杂的赋值运算符:+=-=*=/=%=代码演示:<!DOCTYPE html><html lang="zh-CN"><he原创 2021-06-13 16:18:48 · 502 阅读 · 0 评论 -
Javascript的函数基础知识(全)
系列文章目录JavaScript关于函数基础知识的总体汇总文章目录系列文章目录前言一、函数是什么?1.函数的概念:2.函数的说明二、函数的介绍和基本使用1. 函数的基本语法2.函数的命名规范3.函数的调用4.函数体5.函数的封装三、有参数的函数1. 有参数的函数声明和调用2.执行过程3.形参以及实参4关于函数的传参小练习5.关于形参实参一一对应的参照6.函数传参的提升-案例四、有返回值的函数1.有返回值的函数2. 为什么要让函数有返回值3. 用return返回数据五、内置函数1. 什么是内置函数2.内原创 2021-06-01 18:51:23 · 1690 阅读 · 1 评论 -
前端js的术语-语句和对表达式的认识
术语各行各业都有自已独特的术语(黑话),JavaScript 自然也不例外,这些术语都是人为规定的用来描述、归纳、概括某个知识点的特征,具有一定的抽像性,需要通过实践一步步加深理解,在此我们先有个大致的印象。也许当你成为前端攻城狮在公司的时候,也会遇到我这里了分享的术语也许说不定…1.关键字&保留字关键字是指 JavaScript 中内置提供且具有特殊意义的词汇,如 let 是用来定义变量的、function 是用来定义函数的、if 是控制程序执行的等。保留字是指那些 JavaScript原创 2021-05-12 23:07:48 · 168 阅读 · 0 评论 -
js的条件控制-if判断-switch语句-以及三元表达式(详解)
文章目录前言1.if 语句2.switch 语句3.三元表达式总结前言上一章,我们抛出了什么是JavaScript 提供了3种条件控制的语法支持,本人会在这一张仔细的进行讲解!1.if 语句通过关键 if、else、else if 控制程序的执行顺序,具体分成3种情形:1.单分支情形,当某个条件为 true 时,才执行某段程序代码<script> // 语法格式为 // if(条件) { 要执行的代码 } // 举例:国家规定年龄必须在16岁以上去网吧,否则为是教唆未原创 2021-05-12 22:59:12 · 1959 阅读 · 2 评论 -
javascript的代码顺序(了解性知识)
提示:本章技术分享为javascript的流程控制文章目录前言1.顺序执行2. 条件控制总结前言这里我会主要分享程序默认的执行方式,能够根据逻辑需要影响或改变程序的执行方式。提示:以下是本篇文章正文内容,下面案例可供参考1.顺序执行一般情况下程序是按自上而下的顺序依次执行或者在不考虑优先级的前提下从左向右依次执行,我们称之为顺序执行。<script> // 1. 自上而下 let x = 10; let y = 2; console.log(a + b);原创 2021-05-12 22:45:33 · 152 阅读 · 0 评论 -
js运算符-比较运算符-逻辑运算符-短路运算(详解)
本技术分享为js运算符详解,如果你对这段知识并不是很清楚,那么请仔细阅读下面的内容,本章代码可以直接使用,愿你也能成为前端工程师之一!文章目录前言一、运算符1.比较运算符2. 类型比较二、逻辑运算符1.逻辑且2.逻辑或3.逻辑非三.短路运算总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例可供参考一、运算符主要分享内容为比较运算符和逻原创 2021-05-12 22:37:45 · 710 阅读 · 0 评论 -
js内置对象-Math
文章目录前言一、内置对象1. Math-属性2.方法总结前言回想一下我们曾经使用过的 console.log,console其实就是 JavaScript 中内置的对象,该对象中存在一个方法叫 log,然后调用 log 这个方法,即 console.log()。除了 console 对象外,JavaScritp 还有其它的内置的对象一、内置对象1. Math-属性Math.PI,获取圆周率// 圆周率console.log(Math.PI);2.方法Math.random,生成 .原创 2021-05-10 23:10:59 · 102 阅读 · 0 评论 -
js的对象以及属性和方法(详解)
文章目录前言一、关于对象1. 语法2.属性和访问3.方法和调用总结前言对象是 JavaScript 数据类型的一种,我之前分享了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。提示:以下是本篇文章正文内容,下面案例可供参考一、关于对象1. 语法声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别。<!DOCTYPE html><html lang="en"><hea原创 2021-05-10 23:02:55 · 3570 阅读 · 1 评论