JavaScript笔记
文章平均质量分 85
JavaScript笔记
JHY97
这个作者很懒,什么都没留下…
展开
-
JavaScript知识点整理(十七)- 本地存储
目录一、本地存储1.1 本地存储特性1.2 window.sessionStorage1.3 window.localStorage1.4 案例练习 - 记住用户名一、本地存储1.1 本地存储特性数据存储在用户浏览器中 设置、读取方便、甚至页面刷新不丢失数据 容量大,sessionStorage约5M、localStorage约20M 只能存储字符串,可以将对象JSON.stringify()编码后存储1.2 window.sessionStorage生命周期原创 2022-03-24 07:30:00 · 666 阅读 · 0 评论 -
JavaScript知识点整理(十六)- PC端网页特效 - 案例练习
一、带动画返回顶部案例分析:可采用之前封装的函数动画animate.js 需将animate.js内left相关的值修改为和垂直滚动距离相关就可以 页面滚动多少,可以通过window.pageYOffset得到.slider_bar { position: absolute; left: 50%; top: 300px; margin-left: 600px; width:原创 2022-03-23 15:48:02 · 1683 阅读 · 0 评论 -
JavaScript知识点整理(十六)- PC端网页特效 - 页面轮播图
目录一、案例练习 - 页面轮播图1.1 首先构建轮播图基本框架1.2 左右按钮的显示和隐藏1.3 下方小圆点 - 动态生成和点击事件1.4 点击按钮滚动图片1.5 节流阀1.6整体代码1.6.1 HTML1.6.2 CSS1.6.3 JS一、案例练习 - 页面轮播图功能需求:鼠标经过轮播图模块,左右按钮显示,离开时隐藏左右按钮 点击右侧按钮,图片往左播放一张 图片播放的同时,下方的小圆点跟随变化 点击小圆点可以播放相应的图片 鼠标没有经过轮播.原创 2022-03-21 23:18:39 · 1600 阅读 · 0 评论 -
JavaScript知识点整理(十六)- PC端网页特效 - 动画
目录一、动画函数封装1.1 动画实现原理1.2 动画函数简单封装1.3 动画函数给不同元素记录不同定时器1.4 缓动画原理1.5 案例练习 - 让动画函数可以在两个位置之间来回移动1.6 动画函数添加回调函数1.7 案例练习 - 侧边栏划出动画效果一、动画函数封装1.1 动画实现原理核心原理:通过定时器setInterval()不断移动盒子位置实现步骤:获取盒子当前位置 让盒子在当前位置上加1个移动距离 利用定时器不断重复这个操作 最后加个结束定原创 2022-03-19 07:30:00 · 517 阅读 · 1 评论 -
JavaScript知识点整理(十六)- PC端网页特效 - 元素可视区client系列和元素滚动scroll系列
目录一、client系列二、立即执行函数三、scroll系列3.1scroll系列属性3.2 页面被卷去的头部3.3 案例练习 - 仿淘宝固定侧边栏四、三大系列总结一、client系列client系列相关属性可以用来获取元素可视区的相关信息。通过client系列相关属性可以动态的得到元素的边框大小、元素大小等client系列属性 作用 element.clientTop 返回元素上边框的大小 element.clientLeft 返回元.原创 2022-03-18 15:42:17 · 772 阅读 · 0 评论 -
JavaScript知识点整理(十六)- PC端网页特效 - 元素偏移量offset系列
一、元素偏移量offset系列1.1 offset概述offset即偏移量,使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等获得元素距离带有定位父元素的位置 获得元素滋生大小(宽度高度) 注意:返回值都不带单位offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素,如果父级元素没有定位则返回body element.offsetTop 返回元素相对带有定位父级元素上方的偏移 element.原创 2022-03-17 18:18:26 · 378 阅读 · 0 评论 -
JavaScript知识点整理(十五)- BOM
一、BOM概述1.1 什么是BOMBOM 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法和属性DOM:文档对象模型 DOM就是把 文档 当作一个 对象 来看代 DOM的顶级兑现格式document DOM主要学习的是操作页面元素 DOM是W3C标准规范BOM:浏览器对象模型 把浏览器 当作一个 对象来看待 BOM的顶级对象是window BOM学习的是浏览器窗口交互的原创 2022-03-15 23:11:43 · 1149 阅读 · 0 评论 -
JavaScript知识点整理(十四)- 事件
一、注册事件1.1 注册事件概述给元素添加事件,称为注册事件或者绑定事件注册事件有两种反射光hi:传统方式和方法监听注册方式传统注册方式利用on 开头的事件,例如:onclick btn.onclick = function(){} <button onclick ="alter(...)"></button> 特点:注册事件的唯一性 同一个元素同一个事件只能设置同一个处理函数,最后注册的处理函数会覆盖前面注册的处理函数 <button&g原创 2022-03-14 23:01:04 · 382 阅读 · 0 评论 -
JavaScript知识点整理(十三)- DOM -(3)节点操作
一、为什么学习节点操作获取元素通常使用的两种方式:1. 利用DOM提供的方法获取元素document.getElementById() document.getElementsByTagName() document.quertSelector 等 逻辑性不强、繁琐2. 利用节点层级关系获取元素利用父子兄节点关系获取元素 逻辑性强,但兼容性稍差二、节点概述页面中的所有内容都是节点(标签、属性、文本、注释等),在DOM中,节点使用node来表示。HTML DOM树中的所有节原创 2022-03-03 07:30:00 · 759 阅读 · 0 评论 -
JavaScript知识点整理(十三)- DOM -(2)操作元素 - 案例练习
一、百度换肤效果案例分析给一组元素注册事件 给4个小图片利用循环注册点击事件 点击图片,把背景改为当前的图片 核心算法:把当前图片的src路径获取过来,给body作为背景即可 <style> *{ margin: 0; padding: 0; } body{ background: url(img/mao1.png) no-repeat center t原创 2022-02-26 07:30:00 · 408 阅读 · 0 评论 -
JavaScript知识点整理(十三)- DOM -(2)操作元素
JavaScript的DOM操作可以改变页面内容、结构和样式,我们可以利用DOM操作元素来改变元素里面的内容、属性等。一、改变元素内容 element.innerText从其实位置到终止位置的内容,但它去除html标签,同时空格和换行也会去掉 element.innerHTML起始位置到终止位置的全部内容,包括html标签,同时保留空格和换行案例练习 - innerText - 点击按钮获取当前时间 <button>显示当前系统时间</bu.原创 2022-02-22 22:36:16 · 790 阅读 · 0 评论 -
JavaScript知识点整理(十三)- DOM -(1)简介、获取元素、事件基础
目录一、DOM简介1.1 什么是DOM1.2 DOM树二、获取元素2.1 如何获取页面元素2.2 根据ID获取2.3 根据标签名获取2.4 通过HTML5新增的方法获取2.5 获取特数元素(body,html)三、事件基础3.1 事件概述3.2 执行事件的步骤3.3 常见的鼠标事件一、DOM简介1.1 什么是DOM文档类型对象,是W3C组织推荐的处理可扩展标记语言(HTML或XML)的标准编程接口W3C已经定义了一系列的DOM接口,通过这些原创 2022-02-17 07:30:00 · 235 阅读 · 0 评论 -
JavaScript知识点总结(十二)- 简单数据类型和复杂数据类型
一、简单数据类型与复杂数据类型简单数据类型又叫做基本数据类型或值数据类型,复杂数据类型又叫做引用类型值类型 :简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型,string,number,boolean,undefined,null 引用类型:复杂数据类型,在存储变量中存储的仅仅是地址(引用),因此叫做引用数据类型,通过new关键字创建的对象(系统对象、自定义对象),如Object、Arry、Date等二、堆和栈堆栈空间分配区别:栈(操作系统):有操作系统自动分配原创 2022-02-16 08:00:00 · 663 阅读 · 0 评论 -
JavaScript知识点总结(十一)- 内置对象
JavaScript中对象分为3种:自定义对象、内置对象、浏览器对象一、什么是内置对象内置对象:指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或者是最基本而必要的功能(属性和方法)内置对象最大的有点就是帮助我们快速开发 JavaScript提供了多个内置对象:Math、Date、Array、String等二、查询文档2.1 MDN学习一个内置对象的使用,只要学会其常用的使用即可,可以通过查文档学习,可通过MDN / W3C 来查询Mozilla开发者网络(MD原创 2022-02-15 08:00:00 · 6223 阅读 · 8 评论 -
JavaScript知识点整理(十)- 对象
一、对象概念1.1 什么是对象在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等对象是由属性和方法组成的属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词)1.2 为什么需要对象JS中的对象表达结构更清晰,更强大。二、创建对象的三种方式在JavaScript中,现阶段我们可以采用三种方式创建对象(object):利用字面量创建对象 利用new Object创原创 2022-02-14 08:00:00 · 456 阅读 · 0 评论 -
JavaScript知识点整理(九)- 预解析
JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行一、预解析预解析:JS引擎会把JS里面所有的var还有function提升到当前作用域最前面代码执行:按照代码书写顺序从上往下执行预解析分为变量解析(变量提升)和函数解析(函数提升)1.1 变量提升变量提升:就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作1.2 函数提升就是把所有的函数声明提升到当前作用原创 2022-02-13 18:00:00 · 301 阅读 · 0 评论 -
JavaScript知识点整理(八)- 作用域
一、作用域1.1 作用域概述JavaScript作用域:代码名字(变量)在某个范围内起作用和效果目的:为了提高程序的可靠性,减少命名冲突JS的作用域(es6)之前:全局作用域 局部作用域全局作用域:整个script标签或者是一个单独的js文件局部作用域(函数作用域):在函数内部就是局部作用域,这个代码的名字只在函数内部起效果和运用二、变量的作用域2.1 变量作用域的分类在JavaScript中根据作用域的不同,变量可以分为两种:全局变量 局部变量 注意:函数的原创 2022-02-13 08:00:00 · 145 阅读 · 0 评论 -
JavaScript知识点整理(五)- 流程控制
一、流程控制在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们需要通过控制代码来执行顺序来实现我们要完成的功能流程控制的主要三种结构顺序结构 分支结构 循环结构图p56二、顺序流程控制按照代码的先后顺序,依次执行三、分支结构由上到下执行代码过程中,根据不同的条件,执行不同的路径代码(执行代码多选一的过程),从而得到不同的结果JS语言提供了两种分支结构语句:if语句 switch语句3.1 if语句3.1.1 if语法结构代原创 2022-02-11 18:00:00 · 544 阅读 · 0 评论 -
JavaScript知识点整理(七)- 函数
一、函数的概念函数:封装了一段可能被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用原创 2022-02-12 18:00:00 · 145 阅读 · 0 评论 -
JavaScript知识点整理(六)- 数组
一、数组的概念数组是指一组数据得集合。其中每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下二、数组创建JS中创建数组有两种方式:利用new创建数组 利用数组字面量创建数组2.1 利用new创建数组代码p97 3:382.2 利用数组字面量创建数组代码p97 6:25数组的字面量是方括号[] 声明数组并赋值称为数组的初始化三、获取数组元素3.1 数组的索引索引(下标):用来访问数组元素的序号(数组下标从0开始)数组可原创 2022-02-12 18:00:00 · 385 阅读 · 0 评论 -
JavaScript知识点整理(四)- 运算符
一、运算符运算符也被称为操作符,用于实现复制、比较和执行算数运算等功能的符号JavaScript中常用的运算符有:算数运算符 递增和递减运算符 比较运算符 逻辑运算符 赋值运算符二、算数运算符算数运算使用的符号,用于执行两个变量或者值的算数运算表p42 0:522.1 浮点数的精度问题浮点数值的最高精度是17位小数,但在进行算数计算时其精确度远远不如整数代码段p42 6:57不要直接判断两个浮点数是否相等 注意算数运算符优先级的,先乘除,后加减,有小括号先算小原创 2022-02-10 18:30:00 · 387 阅读 · 0 评论 -
JavaScript知识点整理(三)- 数据类型
一、数据类型简介1.1 变量的数据类型JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在运行过程中,类型会被自动确定。js的变量数据类型是只有在运行过程中,根据等号右边的值来确定的。JavaScript拥有动态类型,同时也意味着相同的变量可作用不同的类型。1.2 数据类型的分类JS把数据类型分为两类:简单数据类型 复杂数据类型二、简单数据类型(基本数据类型)表p22 0:562.1 数字型Number -数字型进制JS中八进制前面.原创 2022-02-10 18:00:00 · 527 阅读 · 0 评论 -
JavaScript知识点整理(二)- 变量
一、变量概述1. 1 什么是变量变量是用于存放数据得容器。通过变量获取数据。1.2 变量在内存中的存储本质:变量是程序在内存中申请的一块用来存放数据得空间。二、变量的使用变量在使用时分为两步:声明变量 赋值2.1 声明变量代码段 var agep13 1:03var 是一个JS关键字,用来声明变量。使用该关键字声明变量后,计算机会自动为变量分配内存空间。 age是程序员定义的变量名,我们需要通过变量名来访问内存中分配的空间2.2 赋值代码段 age =...原创 2022-02-09 21:54:33 · 314 阅读 · 0 评论 -
JavaScript知识点整理(一)- 初识JavaScript
一、JavaScript是什么1.1 初识JavaScriptJavaScript是一种运行在客户端的脚本语言 脚本语言:不需要编译,运行过程中由js引擎逐行进行解释并执行 目前也可基于Node.js技术进行服务器端编程1.2 JavaScript的作用表单动态检验 网页特效 服务端开发(Node.js) 桌面程序(Electron) App(Cordova) 控制硬件-物联网(Ruff) 游戏开发(coxos2d-js)1.3 HTML/CSS/JS的关系HTML/C.原创 2022-02-09 21:21:32 · 391 阅读 · 0 评论