![](https://img-blog.csdnimg.cn/20210306093710801.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web API
文章平均质量分 81
Web API的概念
浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法)
呆萌宝儿姐
CSDN专家博主、阿里云开发者社区专家博主、51CTO社区专家博主、360书馆认证博主、知乎掘金B站等平台受邀作者。
如遇开发、程序等需求,博客首页下拉加入公众号,私信博主
展开
-
BOM+DOM案例——阻止链接跳转,div滚动条,元素的隐藏方式,字符串拼接
文章目录阻止超链接跳转div的滚动条案例元素隐藏的几种方式table隔行变色字符串拼接阻止超链接跳转<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title></head><body><a href="http://www.baidu.com" id="ak">百度</原创 2020-08-22 10:57:21 · 3861 阅读 · 0 评论 -
JavaScript制作可拖拽的弹出对话框
示例代码<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <met原创 2020-08-22 10:33:23 · 4187 阅读 · 0 评论 -
JavaScript动画案例——筋斗云,手风琴,固定导航栏
文章目录手风琴固定导航栏筋斗云手风琴<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div {原创 2020-08-21 21:44:18 · 4126 阅读 · 0 评论 -
JavaScript动画函数增加属性,函数,层级,透明度的封装
文章目录获取元素计算后的属性元素增加任一属性增加多个属性增加多个属性和回调函数增加多个属性,回调函数,层级,透明度获取元素计算后的属性元素 function getStyle(element,attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; }增加任一属性<!DOCTY原创 2020-08-21 20:26:27 · 4053 阅读 · 0 评论 -
JavaScript动画函数封装
文章目录动画函数封装:每0.02s移动10px案例:匀速运动案例:变速运动动画动画函数封装:每0.02s移动10px<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,原创 2020-08-21 20:09:32 · 3840 阅读 · 0 评论 -
js中offset、scroll、client三大系列
文章目录offset系列:元素scroll系列:获取元素的样式属性client系列:可视区域案例:图片跟着鼠标飞简单版(有bug,一滚动就不行了)终极版:可以在任何的浏览器中实现offset系列:元素获取元素的宽和高,left,top, offsetParent,应该使用offset系列来获取offsetWidth:获取元素的宽offsetHeight:获取元素的高offsetLeft:获取元素距离左边位置的值offsetTop:获取元素距离上面位置的值scroll系列:获取元素的样式属性元原创 2020-08-21 19:14:26 · 3944 阅读 · 0 评论 -
BOM 定时器:setTimeout和setInterval
定时器setTimeout和setInterval的区别setInterval()和clearInterval()二者区别案例协议按钮渐变的divsetTimeout和setInterval的区别在指定的毫秒数到达之后执行指定的函数,只执行一次// 创建一个定时器,1000毫秒后执行,返回定时器的标示var timerId = setTimeout(function () { console.log('Hello World');}, 1000);// 取消定时器的执行clearTime原创 2020-08-21 13:18:13 · 3930 阅读 · 0 评论 -
JavaScript元素事件的绑定与解绑
为元素绑定事件(DOM):一种,但是不兼容,有两种1 对象.addEventListener(“事件类型”,事件处理函数,false);–谷歌和火狐支持,IE8不支持2 对象.attachEvent(“有on的事件类型”,事件处理函数)–谷歌不支持,火狐不支持,IE8支持为按钮绑定点击事件参数1:事件的类型—事件的名字,没有on参数2:事件处理函数—函数(命名函数,匿名函数)参数3:布尔类型,目前就写false-----没有为什么,不解释,明天说参数1:事件类型—事件名字,有on参数2:事件原创 2020-08-21 10:38:54 · 4121 阅读 · 0 评论 -
addEventListener 第三个参数的问题
文章目录事件的捕获与冒泡addEventListener的第三个参数第三个参数事件的捕获与冒泡https://blog.csdn.net/weixin_45525272/article/details/108140676addEventListener的第三个参数DOM方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数,分别为:事件名称(String)、要触发的事件处理函数(Function)、指定原创 2020-08-21 10:36:56 · 3979 阅读 · 0 评论 -
JavaScript事件捕获与冒泡+案例分析
文章目录事件的三个阶段测试阻止事件冒泡的方式冒泡显示测试事件的三个阶段事件对象.eventPhase属性可以查看事件触发时所处的阶段事件捕获阶段 : 从外向内事件目标阶段 : 最开始选择的那个事件冒泡阶段 : 从里向外为元素绑定事件addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的)addEventListener中第三个参数是控制事件阶段的事件的阶段有三个:通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的如果这个属原创 2020-08-21 10:30:38 · 3890 阅读 · 0 评论 -
BOM location对象详解
文章目录事件详解注册/移除事件的三种方式兼容代码事件的三个阶段事件对象的属性和方法案例阻止事件传播的方式常用的鼠标和键盘事件事件详解注册/移除事件的三种方式var box = document.getElementById('box');box.onclick = function () { console.log('点击后执行');};box.onclick = null;box.addEventListener('click', eventCode, false);box.remo原创 2020-08-19 17:54:32 · 3847 阅读 · 0 评论 -
JavaScript 制作百度输入预测功能
示例代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> #box { width: 450px; margin: 200px auto; } #txt {原创 2020-08-19 16:44:03 · 3854 阅读 · 0 评论 -
JavaScript 节点及层级操作
节点操作var body = document.body;var div = document.createElement('div');body.appendChild(div);var firstEle = body.children[0];body.insertBefore(div,firstEle);body.removeChild(firstEle);var text = document.createElement('p');body.replaceChild(text,原创 2020-08-19 15:12:00 · 4128 阅读 · 0 评论 -
JavaScript 创建元素的三种方式
文章目录创建元素的三种方式document.write()innerHTMLdocument.createElement()性能问题案例动态创建列表,高亮显示根据数据动态创建表格创建元素的三种方式document.write()document.write('新设置的内容<p>标签也可以生成</p>');document.write()创建元素,缺陷:如果是在页面加载完毕后,此时通过这种方式创建元素,那么页面上存在的所有的内容全部被干掉=<!DOCTYPE htm原创 2020-08-19 14:56:05 · 4249 阅读 · 0 评论 -
JavaScript 节点介绍及其应用
文章目录节点节点的属性:获取方式属性包括节点理解探究实例探究1:节点探究2:节点属性探究3:亲戚节点应用案例:节点操作隔行变色节点的兼容代码节点元素:页面中所有的标签,元素—element, 标签----元素—对象节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node根元素:html标签节点的属性:获取方式可以使用标签——通过 元素+“.” 出来,可以使用属性节点.——通过 文本节点+“.” 出来)属性包括nodeType:节点的类型:1——原创 2020-08-19 14:26:40 · 4254 阅读 · 0 评论 -
JavaScript属性操作
属性操作非表单元素的属性案例:表单元素属性案例自定义属性操作样式操作类名操作案例非表单元素的属性href、title、id、src、classNamevar link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.log(pic.src);案例: 点击按钮,切换img标签里原创 2020-08-19 13:32:32 · 3881 阅读 · 0 评论 -
textContent、innerText、innerHTML属性
文章目录innerText与textContent兼容判断代码应用代码innerText与innerHTML获取的时候:innerText与textContent他们都是设置标签中的文本内容,使用textContent属性,谷歌,火狐支持,IE8不支持使用innerText属性,谷歌,火狐,IE8都支持如果这个属性在浏览器中不支持,那么这个属性的类型是undefined判断这个属性的类型 是不是undefined,就知道浏览器是否支持兼容判断代码 //获取任意标签中间的文本内容 fun原创 2020-08-19 13:10:16 · 3967 阅读 · 0 评论 -
JavaScript事件与属性综合案例
文章目录案例:图册案例:二维码的指针悬浮显示与隐藏案例:搜索框模拟案例:获取与设置元素文本值案例:图册<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximu原创 2020-08-19 12:11:12 · 4003 阅读 · 0 评论 -
DOM 修改属性简单操作
文章目录属性操作非表单元素的属性表单元素属性案例自定义属性操作样式操作类名操作案例属性操作非表单元素的属性href、title、id、src、classNamevar link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.log(pic.src);案例: 点击按钮,切换原创 2020-08-06 11:21:03 · 4394 阅读 · 0 评论 -
DOM——事件介绍与简单应用
文章目录事件事件三要素事件的基本使用案例1.点击按钮修改多个标签2.排他功能3.点击按钮改变div的属性设置4.隐藏于显示的另一种方法(改变类名)事件事件:触发-响应机制Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。事件三要素事件源:触发(被)事件的元素事件类型:事件的触发方式(例如鼠标点击或键盘点击)事件处理程序:事件触发后要执行的代码(函数形式)事件的基本使用var box = document.getElementById原创 2020-07-29 18:32:09 · 3769 阅读 · 0 评论 -
DOM 获取页面元素的方法
文章目录获取页面元素为什么要获取页面元素根据id获取元素根据标签名获取元素根据name获取元素*根据类名获取元素根据选择器获取元素总结案例获取页面元素为什么要获取页面元素例如:我们想要操作页面上的某部分(显示/隐藏,动画),需要先获取到该部分对应的元素,才进行后续操作根据id获取元素var div = document.getElementById('main');console.log(div);// 获取到的数据类型 HTMLDivElement,对象都是有类型的// HTMLDivE原创 2020-07-29 18:16:23 · 3715 阅读 · 0 评论 -
Web API——DOM介绍
文章目录DOMDOM的概念模拟文档树结构基本用法(后面会详细介绍)DOM经常进行的操作DOMDOM的概念文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规原创 2020-07-29 17:15:09 · 3674 阅读 · 0 评论 -
BOM 总结介绍
文章目录BOMBOM的概念BOM的顶级对象window对话框页面加载事件定时器setTimeout()和clearTimeout()setInterval()和clearInterval()location对象URLlocation有哪些成员?案例history对象navigator对象BOMBOM的概念BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象原创 2020-07-29 17:11:37 · 3654 阅读 · 0 评论 -
Web API——Web API介绍
Web API介绍API的概念API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)API的使用方法(console.log())Web API的概念浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)此处的Web API特指浏览器提供的API原创 2020-07-29 17:09:00 · 4638 阅读 · 0 评论