![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
javascript学习笔记
杨蛋蛋~R
花自向阳开放 我自向前成长
展开
-
本地存储 sessionStorage / localStorage 使用及区别
本地存储特性:1.数据存储在用户浏览器中2.设置、读取方便,甚至页面刷新不丢失数据2.容量较大,sessionStorage 约5M,localStorage约20M3.只能存储字符串,可以将对象JSON.stringify()编码后存储window.sessionStorage:1.生命周期为关闭浏览器窗口2.在同一个窗口(页面)下数据可以共享3.以键值对的形式存储使用存储数据:sessionStorage.setItem(key,value);获得数据:sessionStorage原创 2020-10-10 12:23:58 · 286 阅读 · 0 评论 -
案例:筋斗云动画效果(导航栏动画)
筋斗云动画效果利用动画函数做动画效果原先筋斗云起始位置为0鼠标经过某个li 把当前 li 的 offsetLeft 位置作为目标值即可鼠标离开某个li ,就把目标值设为0如果点击了某个li ,就把 li 当前的位置存储起来,作为筋斗云的起始位置 <style> * { padding: 0; margin: 0; } li, a { text-decoration: none;原创 2020-10-08 17:58:01 · 316 阅读 · 0 评论 -
案例:带有动画效果的返回顶部
案例:返回顶部把窗口滚动到文档中的某个位置window.scroll(x,y) // x y 不写单位 直接写数字即可带有动画的返回顶部:此时可以使用动画封装函数只需要把所有的left 的值改为 跟页面垂直滚动距离相关就可以了页面滚动了多少,可以通过 window.pageOffset 得到<style> * { margin: 0; padding: 0; } div { width: 12原创 2020-10-08 16:53:38 · 497 阅读 · 0 评论 -
案例:网页轮播图
案例:网页轮播图也称为焦点图功能需求:鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮点击右侧按钮一次,图片往左播放一次,依此类推,左按钮同理图片播放的同时,下面小圆圈模块跟随一起变化点击小圆圈,可以播放相应图片鼠标不经过轮播图,轮播图也会自动播放鼠标经过轮播图模块,自动播放停止其中模块:动态生成小圆圈:核心思路:小圆圈的个数要和图片张数一致首先得到ul里面图片的数量,(图片放入li里面,所以是li的个数)利用循环动态生成小圆圈(这个小圆圈要放入ol里面)创建节点原创 2020-10-08 15:00:13 · 392 阅读 · 0 评论 -
动画案例:滑动块
动画案例:滑动块案例效果:鼠标经过就将盒子滑动到右侧,同时外盒子内容箭头指向变化鼠标离开就将盒子滑动到左侧,同时外盒子内容箭头指向变化回来思路:动画封装函数,回调函数代码: <style> .sliderbar { position: relative; float: right; margin-top: 100px; height: 40px; width: 60px; ba原创 2020-10-08 09:59:26 · 261 阅读 · 0 评论 -
动画函数的实现、封装、回调函数
动画函数封装动画实现原理:核心原理:通过定时器 setInterval()不断移动盒子实现步骤:获得盒子的当前位置让盒子在当前位置加上一个移动距离利用定时器不断重复这个操作加一个结束定时的条件注意此元素需要添加定位,才可以使用element.style.left <style> div { position: absolute; width: 100px; height: 100px; backgr原创 2020-10-07 11:45:25 · 290 阅读 · 0 评论 -
元素可视区 client 系列 / 元素scroll系列 /案例:仿淘宝固定右侧侧边栏
元素可视区 client 系列client翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息,通过client的相关属性可以动态获得该元素的边框、大小等。client 系列属性作用element.clientTop返回元素上边框的大小element.clientLeft返回元素左边框的大小element.clientWidth返回自身包括padding、内容区的宽度、不含边框,返回数值不带单位。element.clientHeig原创 2020-10-06 11:40:46 · 153 阅读 · 0 评论 -
立即执行函数 / pageshow事件
立即执行函数立即执行函数:不许要调用,立马能够自己执行的函数写法:第一种:(function(){})()第二种:(function(){}() ) //第一种,较为常用 //(function () {})() (function () { console.log(2); //不需要调用,立马打印2 第二个函数可以看作是调用函数 })(); (function (a,b) { console.l原创 2020-10-06 10:39:26 · 1180 阅读 · 2 评论 -
案例:仿京东放大镜效果
案例:仿京东放大镜效果功能需求:分为三个模块鼠标经过小图片盒子,黄色的遮挡层和大图片盒子显示,离开隐藏两个盒子功能黄色的遮挡层跟随着鼠标移动移动黄色遮挡层,大图片跟随着移动大图片移动距离=(遮挡层移动距离*大图片最大移动距离)/ 遮挡层最大移动距离 <style> body, div { margin: 0; padding: 0; } .product { position: r原创 2020-10-05 23:14:31 · 642 阅读 · 0 评论 -
案例:模态框拖拽
案例:模态框拖拽功能需求:点出弹出层,会弹出模块框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层,可以按住鼠标拖拽模块框在页面中移动鼠标松开,可以停止拖动模态框移动思路:点击弹出层,模态框和遮挡层就会显示出来 display : block点击关闭按钮,模态框和遮挡层就会隐藏起来 display : none在页面中拖拽的原理:鼠标按下并移动,之后松开鼠标触发事件是鼠标按下mousedown 鼠标移动mouseover原创 2020-10-05 11:09:07 · 343 阅读 · 0 评论 -
元素偏移量offset系列/案例:获取鼠标在盒子内的坐标
PC端网页特效-offset系列offset 即偏移量,使用offset 系列相关属性可以动态地得到该元素的位置(偏移)、大小等获得元素距离带有定位父元素的位置获得元素自身的大小(宽度高度)注意:返回时都不带数值offset系列:offset系列属性作用element.offsetParent返回作为该元素带有定位的父级元素 如果父级都没有定位则返回bodyelement.offsetTop返回元素相对带有定位父元素上方的偏移element.offsetL原创 2020-10-05 10:50:03 · 462 阅读 · 0 评论 -
location 对象的方法 / navigator 对象 / history 对象
location 对象的方法location 对象的方法返回值location.assign()跟herf一样,可以跳转页面(也称为重定向页面),记录历史,所以可以后退页面location.replace()替换当前页面,因为不记录历史,所以不能后退页面location.reload()重新加载页面,相当于刷新页面,如果参数为true,强制刷新 ctrl+f5使用方法:<body> <button>点击</button&g原创 2020-10-04 22:06:31 · 119 阅读 · 0 评论 -
Location对象 / 案例:5秒后自动跳转页面/ 案例:获取URL参数数据
Location对象location用于获取或设置窗体的URL,并且可以用于解析URL。因为location返回的是一个对象,因此这个属性也称为location对象URL:统一资源定位符,是互联网上标准资源的地址URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。也可认为由4部分组成:协议、主机、端口、路径URL的一般语法格式为:protocol :// hostname[:port] / path / [;parameters][?query]#fragment组成说明原创 2020-10-04 21:37:56 · 3972 阅读 · 0 评论 -
JS执行队列
JS执行队列JS 一大特点就是 单线程,即同一时间只能做一件事单线程就意味着所有的任务需要排队,前一个任务结束后才会执行下一个任务。这样可能造成的结果是:如果JS执行的时间过长,会导致页面的渲染不连贯,导致页面渲染加载阻塞的感觉为了解决这个问题,JS出现了同步和异步同步:前一个任务结束后才会执行下一个任务异步:在处理一个任务的同时还可以执行其他任务区别:在流水线上各个流程的执行顺序不同console.log(1);window.setTimeout(function () { con原创 2020-10-04 20:45:22 · 625 阅读 · 0 评论 -
有关this的指向问题
this指向问题this指向问题 this 一般情况下this指向的是那个调用它的对象全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window)// 1. 全局作用域或者普通函数中this指向全局对象window (注意定时器里面的this指向window) console.log(this); //指向window function fn() { console.log(this); }原创 2020-10-04 18:50:47 · 47 阅读 · 0 评论 -
案例:防止重复发送短信
案例:防止重复发送短信点击按钮后,60秒内不能重复点击,防止重复发送短信思路:按钮点击后,会禁用disabled为true同时按钮里面的内容会有变化,注意button 里面的内容通过innerHTML 修改里面秒数是由变化的,需要用到定时器定义一个变量,在定时器里面,不断递减如果变量为0,说明时间到了,此时停止定时器,并且复原按钮初始状态 <body> <div> <input type="text" alt="" placeholde原创 2020-10-04 18:31:57 · 889 阅读 · 0 评论 -
BOM--window对象 / 定时器 / 案例:5s后自动关闭广告 / 案例:定时器实现倒计时
BOM概述BOM:Browser Object Model,浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是windowBOM 由一系列相关的对象构成,并且每个对象都提供了很多方法和属性BOM缺乏标准BOM比DOM更大,它包含DOMwindow对象是浏览器的顶级对象,它具有双重角色它是JS访问浏览器窗口的一个接口它是一个全局对象,定义在全局作用域中的变量函数,函数都会变成window 对象的属性和方法。在调用的时候可以省略window,前面学习的对话框都属于win原创 2020-10-04 18:13:54 · 585 阅读 · 0 评论 -
案例:模拟京东快递单号的查询效果
案例:模拟京东快递单号的查询效果要求:当我们在文本框中输入内容时,文本框上面自动显示大字号的内容分析:输入内容时,上面的大盒子会自动显示出来(这里字号更大)表单检测用户输入,给表单添加键盘事件同时把快递单号里面的值(value)获取过来复制给大盒子作为内容如果快递单号里面内容为空,就隐藏大盒子当失去焦点,大盒子也隐藏注意:keydown 和 keypress 在文本框里面的特点 : 他们两个事件触发的时候,文字还没有落入文本框中,keyup 事件触发的时候,文本已经落入文本框里了 &原创 2020-10-04 15:50:27 · 444 阅读 · 0 评论 -
事件委托(代理)/ 鼠标事件对象/ 键盘事件 /案例: 跟随鼠标移动的图片/案例:模拟京东按键输入内容
事件委托也称为事件代理,在jQuery里称为事件委派是事件冒泡带来的好处原理:不是给每个子节点单独设置事件监听器,二十事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点提高了程序的性能...原创 2020-10-04 12:07:15 · 200 阅读 · 0 评论 -
事件对象/事件对象兼容性处理/事件对象常用属性和方法
事件对象event 就是一个事件对象 写到我们侦听函数的小括号里 当作形参事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数事件对象 是 我们事件的一系列相关数据的集合 跟事件相关的比如鼠标点击里面就包含了鼠标的相关信息,比如鼠标坐标等,如果是键盘事件里面就包含的键盘事件的信息,比如:用户按下了哪个键事件对象可以自己命名,一般用event存在兼容性问题, ie678 可以通过 window.event 兼容性的写法;<script> var原创 2020-10-03 23:16:34 · 321 阅读 · 0 评论 -
DOM事件流-冒泡阶段/捕获阶段
DOM事件流事件流描述的是从页面中接受事件的顺序事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流DOM事件分为三个阶段:捕获阶段当前目标阶段冒泡阶段注意:JS代码中只能执行捕获或者冒泡其中的一个阶段onclick 和 attachEvent(ie) 只能得到冒泡阶段捕获阶段:如果addEventListener 的第三个参数为true 则为捕获阶段,参数为false或者省略 则为冒泡阶段实际开发中很少使用事件捕获,我们更关注事件冒泡有些事件是没有冒泡的,原创 2020-10-03 22:26:57 · 225 阅读 · 0 评论 -
删除事件(解绑事件)/ 删除事件兼容性解决方案
删除事件(解绑事件)传统注册方式:element.onclick = 'null'removeEventListener删除事件attachEvent删除事件<body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll("div");原创 2020-10-03 21:59:22 · 1779 阅读 · 0 评论 -
注册事件/注册事件兼容性解决方案
注册事件给元素添加事件,称为注册事件或者绑定事件注册事件有两种方式:传统方式、方法监听注册方式传统注册方式利用on开头的事件 onclick<button onclick = "alert('hi~')" ></button>btn.onclick = function () { }特点:注册事件的唯一性:同一个元素同一个事件只能设置一个函数,最后注册的处理函数会覆盖前面的处理函数方法监听注册事件W3C标准 推荐方式addEventListener()它是一原创 2020-10-03 21:35:29 · 354 阅读 · 0 评论 -
节点操作:三种动态创建元素的区别
三种动态创建元素的区别document.write() (不常用)直接将内容写入页面的内容流,但如果文档流加载完毕,再调用这句话,会导致整个页面全部重绘(即以前所写内容消失)element.innerHtml将内容写入某个DOM节点,不会导致页面重绘此方法创建多个元素的效率会更高一些(不要拼接字符串,采取数组形式拼接),结构稍微复杂document.creatElement()此方法创建多个元素效率稍微低一些,但结构清晰 <body> <div class原创 2020-10-03 18:59:19 · 123 阅读 · 0 评论 -
节点操作(删除,复制)/案例1:删除留言板的留言 /案例2:动态生成表格
节点删除node.removeChild(child) 从DOM中删除一个子节点,返回删除的节点 <body> <button>删除</button> <ul> <li>熊大</li> <li>熊二</li> <li>光头强</li> </ul> <script> var btn =原创 2020-10-03 18:32:43 · 265 阅读 · 0 评论 -
节点操作(增加) /案例:下拉菜单/案例:简单版发布留言
节点操作因为利用DOM提供的方法获取元素逻辑性不强且非常繁琐因此学习利用节点层级关系获取元素:利用父子兄的关系获取元素逻辑性强,但兼容性差节点:页面中所有的内容都是节点(标签,属性,文本,注释等),在DOM中,节点使用node来获取HTML DOM树中的所有节点都可以通过JS来访问,所有HTML元素都可以被修改,也可以创建或者删除节点至少有:nodeType(节点类型)、nodeName(节点名称)、nodeValue(节点值)这三个基本属性元素节点 nodeType 为 1属性节点原创 2020-10-03 15:59:07 · 513 阅读 · 0 评论 -
自定义属性操作/案例:自定义tab栏切换/H5自定义属性
自定义属性操作 <div id = 'demo'> </div> <script> var div = document.querySelector("div"); //1.获取元素的属性值 //(1)element.属性 console.log(div.id); //(2)element.getAttribute('属性') console.log(div.getAttribute(原创 2020-10-02 21:24:47 · 254 阅读 · 0 评论 -
案例:表格鼠标经过变色 / 全选反选
案例一:表格鼠标经过变色案例:用到鼠标事件:鼠标经过 onmouseover 鼠标离开 onmouseout思路:鼠标经过tr行,当前行变换背景颜色,鼠标离开去掉当前背景颜色//注意:第一行(thead里面的行)不需要变换颜色,因此我们获取的是tbody里面的行<style> table { width: 800px; margin: 100px auto; text-align: center; border-原创 2020-10-02 18:40:17 · 343 阅读 · 0 评论 -
操作元素(排他思想)-算法
排他思想如果由同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想:所有元素全部清除样式(干掉其他人)给当前元素设置样式(留下自己)顺序不能颠倒(先干掉其他人,再设置自己)例:点击哪个按钮,哪个就变成粉红色<body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button原创 2020-10-02 17:36:06 · 238 阅读 · 0 评论 -
案例:1.利用循环实现精灵图布局 2.显示隐藏文本框内容
分析:首先精灵图图片排列是由规律的核心思路:利用for循环,修改精灵图的背景位置 background-position然后用软件测量,得到规律:让for循环里面的i的索引号*44就是每个图片的y坐标<style> * { padding: 0px; margin: 0px; } li { list-style-type: none; } .box { ..原创 2020-10-02 11:22:12 · 348 阅读 · 0 评论 -
Web APIs /APIs --DOM简述/DOM中获取元素方法/事件(含鼠标事件)/操作(含案例)
Web APIsWeb APIs 和 JS 的关联性:Web APIs是 W3C 组织的标准,主要学习DOM 和 BOMWeb APIs是 JS 所独有的部分主要学习页面交互功能Web APIs 是 JS 的应用总结:API 是一种接口工具,以实现某些功能,只要会使用就可以了Web APIs是浏览器提供的一套操作浏览器功能(BOM) 和 页面元素(DOM)的APIWeb APIs 一般都有输入和输出,Web APIs很多都是方法(函数)可以结合前面学习内置对象方法的思路学习D原创 2020-10-02 16:44:00 · 448 阅读 · 0 评论 -
简单数据类型和复杂数据类型--堆、栈/传参
简单数据类型和复杂数据类型简单数据类型:即基本数据类型或值类型值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型(null除外)string number,bollen,undefined,null //简单数据类型null 返回的是一个空的对象 object var timer = null; console.log(typeof timer); //object //如果有个变量以后打算用来储存为对象,暂时不知道放什么,就给n原创 2020-10-01 11:18:03 · 506 阅读 · 0 评论 -
JavaScript学习笔记五--内置对象(math / Date / 数组 / 字符串 ) /案例:倒计时效果
对象对象分为三大类:自定义对象内置对象浏览器对向内置对象内置对象就是JS语言自带的一些对象,供开发者使用,并提供了一些常用的或是最基本而必要的功能(属性和方法)帮助我们快速开发内置对象很多,可以查阅文档MDN文档:http://developer.mozilla.org/zh-CN/常用内置对象Math...原创 2020-09-30 23:22:21 · 245 阅读 · 0 评论 -
JavaScript学习笔记四--预解析/对象
预解析js引擎运行js 分为两步:预解析 代码执行预解析:js 引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面代码执行:按照代码书写顺序从上往下执行预解析分为:变量预解析(变量提升)和函数预解析(函数提升)变量预解析就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作函数预解析就是把所有的函数声明提升到当前作用域的最前面 不调用函数function f1() { var a = b = c = 9; //相当于 var a = 9原创 2020-09-29 11:12:50 · 201 阅读 · 0 评论 -
JavaScript学习笔记三--语句/数组/函数/作用域
if语句语法结构if (条件表达式) { //条件成立执行语句}三元表达式(简化的if语句)条件表达式 ? 表达式1 : 表达式2//如果表达式为真返回1的值,为假返回2var num = prompt("请输入数据");var result = num < 10 ? "0" + num : num; //小于10在数字前加0,否则原数字输出alert("返回数字为" + result);//switch()内的值与case内的值是全等(===),必须是值和数据类型一致原创 2020-09-28 20:51:41 · 141 阅读 · 0 评论 -
JavaScript学习笔记 --2(运算符)
算术运算符算术运算符遵循先乘除后加减的原则浮点数 算数运算里面会有问题,要尽力避免不能直接判断两个浮点数相等,因为精度会有问题表达式由数字,运算符,变量等组成的狮子,称为表达式任何一个表达式都会有一个返回值...原创 2020-09-25 15:59:12 · 147 阅读 · 0 评论 -
JavaScript学习笔记一(输入输出,转换)
JavaScript学习笔记 一JS是一种运行在客户端的脚本语言不需要编译,运行过程由JS解释器(JS引擎)逐行解释并执行选择也可基于Node.js技术进行服务器端编程浏览器分为两部分:渲染引擎和JS引擎渲染引擎:俗称内核JS引擎:也称JS解释器,用于读取网页中的JS代码,对其处理后运行JS的组成1.javascript语法(ECMAScript)2.页面文档对象模型(Dom)3.浏览器对象模型(Bom)1.JS有三种书写位置:行内式,内嵌式,外部式//JS中更多的使用单引号行内原创 2020-09-23 09:51:38 · 241 阅读 · 0 评论