前端学习之Web API
crystal_iwwish
多读书 多看日出
展开
-
Web API-本地存储
localStorage1、生命周期永久生效,除非手动删除 否则关闭页面也会存在2、可以多窗口(页面)共享(同一浏览器可以共享)3. 以键值对的形式存储使用功能语句存储localStorage.setItem(key, value)获取localStorage.getItem(key)|删除localStorage.removeItem(key)注意: 本地只能存储字符串,无法存储复杂数据类型.需要将复杂数据类型转换成JSON字符串,在存储到本地原创 2021-10-13 19:28:26 · 168 阅读 · 0 评论 -
Web API-BOM- 操作浏览器
Window对象BOM(Browser Object Model ) 是浏览器对象模型window 对象下包含了 navigator、location、document、history、screen 5个属性,即所谓的 BOM (浏览器对象模型)location对象常用属性和方法:➢ href 属性获取完整的 URL 地址,对其赋值时用于地址的跳转△ location.href='http://ntlias-stu.boxuegu.com/login'➢ search 属性获取地址中携带原创 2021-10-13 19:22:41 · 223 阅读 · 0 评论 -
Web API-DOM-滚动事件、加载事件和元素大小和位置
滚动事件滚动触发元素:元素.addEventListener("scroll", function () { });加载事件加载元素:window.addEventListener('load', function () { })元素大小和位置offset家族➢ 获取元素自身大小:包括自身设置的宽高、padding、border(内容+padding+border)➢ 获取元素距离定位父级的左和上距离 只读属性client家族(不常用)➢ 获取元素可见区域的大小➢ 获取元素左、上原创 2021-10-13 08:41:46 · 121 阅读 · 0 评论 -
Web API-DOM事件高级
什么是事件对象事件触发时的相关信息获取事件对象btn.addEventListener("click", function (e) {});//e是事件对象常见的事件对象属性属性作用type获取当前的事件类型clientX/clientY获取光标相对于浏览器可见窗口左上角位置offsetX/offsetY获取光标相对于当前DOM元素左上角的位置key用户按下的键盘键的值(现在不提倡使用keycode)pagex/y相当于网页左上角计算的原创 2021-10-10 15:25:26 · 73 阅读 · 0 评论 -
Web API-时间对象和戳
时间对象创建对象的过程就是实例化//获得当前时间(小括号为空是系统当时的时间)(Date()D必须大写)let date=new Date()let date = new Date("2018-02-23 22:22:22");自定义时间▲时间对象的常用方法//创建对象 let date = new Date(); //获取四位年份 console.log(date.getFullYear()); //获得月份(取值为0-11) conso原创 2021-10-09 18:42:40 · 192 阅读 · 0 评论 -
Web API-DOM节点操作
什么是节点DOM树里每一个内容都称之为节点节点的类型元素节点,属性节点,文本节点,其他查找节点父节点查找:子元素.parentNode(返回的就是最近一级的父节点,找不到返回为null)子节点查找:父元素.children 仅获得所有元素节点 返回的还是一个伪数组兄弟关系查找:(下一个兄弟节点)nextElementSibling属性(上一个兄弟节点) previousElementSibling属性增加节点步骤:1.创建节点 document.createElement(原创 2021-10-09 18:39:59 · 80 阅读 · 0 评论 -
Web API-定时器
间歇函数//开启定时器,时间单位为毫秒,函数可以为匿名函数,也可以是有名字的函数setInterval(函数, 时间)//关闭定时器let 变量名 = setInterval(函数, 时间)clearInterval(变量名)注意: 1. 函数名字不需要加括号2. 定时器返回的是一个id数字...原创 2021-10-06 20:25:28 · 285 阅读 · 0 评论 -
Web API-排他思想及其案例
通过循环将其他元素调整为B状态,通过this或者下标将当前元素调整为A状态案例-按钮切换(只允许一个按钮有背景颜色)<style> .pink { background: orangered; } </style><body> <button>第1个</button> <button>第2个</button> .原创 2021-10-07 18:01:29 · 123 阅读 · 0 评论 -
Web API-事件
什么是事件 事件是在编程系统内发生的动作或者发生的事情什么是事件监听 就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件 <script> //语法 元素.addEventListener("事件",要执行的函数) </script>原创 2021-10-07 17:45:06 · 86 阅读 · 0 评论 -
Web API-随机性案例步骤
随机性案例,例如:随机点名,随机更换背景图片及其文字步骤:查找标签计算数组长度内的随机数修改值随机点名案例<script> let names = ['小明', '小红', '小绿', '小王', '大王', '老王'] // 1. 查找标签 let box = document.querySelector('div') // 2. 计算数组长度内的随机数 let num = Math.floor(M原创 2021-10-06 20:39:32 · 112 阅读 · 0 评论 -
Web API-document
什么是document是 DOM 里提供的一个对象所以它提供的属性和方法都是用来访问和操作网页内容的网页所有内容都在document里面查找/获取DOM对象 <script> let box=document.querySelector("css选择器");//选择第一个选择器 let box1=document.querySelectorAll("css选择器");//选择相对应的所有选择器 console.log(box) console原创 2021-10-06 20:18:29 · 148 阅读 · 0 评论 -
Web API-基本认知
基本认知⚫ 作用: 就是使用 JS 去操作 html 和浏览器⚫ 分类:DOM (文档对象模型)、BOM(浏览器对象模型)什么是DOM(Document Object Model)DOM是W3C(万维网联盟)的标准DOM是定义了访问HTML 和 XML文档的标准什么是W3CW3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容,结构和样式W3C DOM标准被分为三个不同的部分1)核心DOM-针对任何结构化文档的标准模型2)XML DOM-原创 2021-10-06 19:33:30 · 67 阅读 · 0 评论