不爱吃菜的菜菜的博客

todolist文本框里面输入内容，按下回车，就可以生成待办事项。点击待办事项复选框，就可以把当前数据添加到已完成事项里面。点击已完成事项复选框，就可以把当前数据添加到待办事项里面。但是本页面内容刷新页面不会丢失。

本地存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案。本地存储特性1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage约5M、localStorage约20M4、只能存储字符串，可以将对象JSON.stringify() 编码后存储window.sessionStorage1、生命周期为关闭浏览器窗口2、

目录触屏事件触屏事件概述触摸事件对象（TouchEvent）移动端拖动元素classList 属性click 延时解决方案移动端常见特效案例：移动端轮播图案例：返回顶部全部代码触屏事件触屏事件概述移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android 和 IOS 都有。touch 对象代表一个触摸点。触摸点可能是一根手

目录案例：网页轮播图轮播图JS全部代码节流阀案例：返回顶部JS代码为案例：筋头云案例案例：网页轮播图轮播图也称为焦点图，是网页中比较常见的网页特效。功能需求：鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。 点击右侧按钮一次，图片往左播放一张，以此类推， 左侧按钮同理。 图片播放的同时，下面小圆圈模块跟随一起变化。 点击小圆圈，可以播放相应图片。 鼠标不经过轮播图， 轮播图也会自动播放图片。 鼠标经过，轮播图模块， 自动播放停止。首先要有两.

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client 系列的相关属性可以动态的得到该元素的边框大小、元素大小等。 <script> // client 宽度 和我们offsetWdith 最大的区别就是不包含 边框 var div = document.querySelector('div'); console.log(div.clientWidth); .

元素偏移量 offset 系列offset 概述offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素 距离带有定位父元素 的位置 获得元素自身的大小（宽度高度） 注意： 返回的数值都不带单位element.offsetTop 和 element.offsetLeft 返回的是元素距离 带有定位的父元素 之间的偏移返回的不带单位的数值 // 1....

BOM 概述BOM（Browser Object Model）即浏览器对象模型，它提供了 独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。兼容性较差...

注册事件（绑定事件）注册事件概述给元素添加事件，称为注册事件或者绑定事件。注册事件有两种方式：传统方式和方法监听注册方式传统注册方式利用 on 开头的事件 onclick <button onclick=“alert('hi~')”></button> btn.onclick = function() {} 特点： 注册事件的唯一性 同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数 写两个btn.onclick事件，

目录为什么学节点操作节点概述节点层级1. 父级节点2. 子节点parentNode.childNodes（标准） parentNode.children（非标准） parentNode.firstChild parentNode.lastChild parentNode.firstElementChild parentNode.lastElementChi...

目录1. 世纪佳缘 用户名 显示隐藏内容2. 京东关闭广告（直接隐藏即可）3. 新浪下拉菜单（微博即可）4. 开关灯案例（见素材）1. 世纪佳缘 用户名 显示隐藏内容这里和京东密码框有些不同的是京东密码框，当你点击焦点进行输入的时候，里面的文字颜色是黑色的世纪家园点击输入的时候里面的文字颜色是灰色的当失去焦点的时候，京东密码框则显示灰色而世纪佳缘失去焦点的时候，密码框里面的文字显示黑色世纪佳缘网站里面的input边框颜色是粉色 ...

操作元素JavaScript 的 DOM 操作可以改变网页内容、结构和样式，我们可以利用 DOM 操作元素来改变元素里面的内容 、属性等。注意以下都是属性改变元素内容element.innerText从起始位置到终止位置的内容, 但它不识别html 标签， 同时空格和换行也会去掉 // div.innerText = '2022-4-20'; //获取指定时间 div.innerText = getDate...

​DOM简介什么是DOM文档对象模型（document object model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或者XML）的标准编程接口。W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。DOM树文档：一个页面就是一个文档，DOM 中使用 document 表示 元素：页面中的所有标签都是元素，DOM 中使用 element 表示 节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使

JS的组成什么是API？API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。API 是给程序员提供的一种工具，以便能更轻松的实现想要完成的功能。什么是Web API？Web API 是浏览器提供的一套操作浏览器功能和页面元素的 API ( BOM 和 DOM )。...