![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
WebAPI
文章平均质量分 85
蓬莱老仙
这个作者很懒,什么都没留下…
展开
-
排他思想详解
核心思路一1. 获取目标元素,得到一个存储元素对象数的组; 2. 我们先把所有目标元素的指定样式初始化 (干掉所有人);3. 再重新给指定的元素对象添加自己想要的样式(留下我自己);原创 2022-05-31 20:47:18 · 947 阅读 · 0 评论 -
WebAPI-修改元素样式的方法汇总
设置/修改元素样式 1方式一通过元素的 style 属性来设置样式;元素对象的 style 属性也是一个对象,可以通过 . 的方式来设置或修改样式。语法:元素对象.style.样式属性 = 属性值注意:通过该方式操作样式时,样式属性要使用驼峰命名法。通过该方式产生的样式是行内样式,权重比较高。<div>div标签</div>// 获取元素let el = document.querySelector('div');// 设置样式el.style原创 2022-05-29 20:43:34 · 662 阅读 · 0 评论 -
WebAPI-通过window对象的属性获取页面滚动的距离
pageXOffset 与 pageYOffset 用于获取页面的水平和垂直的滚动距离,通过这两种属性获取的值均为数字类型没有单位。pageXOffsetwindow.pageXOffset 设置或获取当前页面相对于窗口显示区左上角的 X 位置(页面向左滚动的距离)。pageYOffsetwindow.pageYOffset 设置或获取当前页面相对于窗口显示区左上角的 Y 位置(页面向上滚...原创 2019-12-08 14:35:49 · 366 阅读 · 0 评论 -
WebAPI-scroll系列属性
scroll 就是滚动的意思,使用 scroll 系列的相关属性可以动态的得到元素的内容大小、滚动距离等。scrollWidthelement.scrollWidth 获取元素元素内容的宽度,是个只读属性,包括 overflow 溢出而在屏幕上不可见的内容。scrollHeightelement.scrollHeight 获取元素元素内容的高度,是个只读属性,包括溢出的内容 overflo...原创 2019-12-08 13:36:36 · 795 阅读 · 0 评论 -
WebAPI-client系列属性
client 翻译过来就是“客户端”的意思,通过 client 系列的相关属性可以动态的获取元素可视区的相关信息比如:元素的边框大小、元素大小等。clientWidthelement.clientWidth 该属性用于获取元素的内部宽度;该属性包括内边距,不包含垂直滚动条(如果有)、边框和外边距。clientWidthelement.clicentHeight 获取元素内部的高度(单位像素...原创 2019-12-07 08:50:29 · 216 阅读 · 0 评论 -
WebAPI-offset系列属性
offset 翻译过来就是 “偏移量” 的意思,通过 offset 系列的属性可以动态的获取元素的宽、高、top值、left值等;offset 系列获取的值均没有单位都是数字类型。offsetParentelement.offsetParent 该属性会返回当前元素最近的带有定位的父级元素,如果父级元素都没有设置定位则返回 body 标签element 需要获取对应值的 DOM 元素&...原创 2019-12-05 11:01:49 · 359 阅读 · 0 评论 -
WebAPI-History对象
history 对象是 window 对象的一个属性,该对象包含了用户在浏览器窗口中访问过的 URL。属性lengthhistory.length 用于获取浏览器历史 URL 列表中的数量方法back()forward()go()...原创 2019-12-04 20:23:34 · 173 阅读 · 0 评论 -
WebAPI-Navigator对象
navigator 对象包含了浏览器相关的信息,通过相关的属性即可获取对应的浏览器信息appNamenavigator.appName 获取浏览器 的名称appVersionnavigator.appVersion 获取浏览器的平台和版本信息platformnavigator.platform 获取运行浏览器的操作系统或硬件平台userAgentnavigator.userA...原创 2019-12-04 19:07:11 · 256 阅读 · 0 评论 -
WebAPI-Location对象
location 对象是 window 的一个属性,该对象包含了当前 URL 的相关信息。URLURL 统一资源定位符( Uniform Resource Locator 的缩写),是互联网上标准资源的地址;互联网上的每一个资源文件都有属于自己的唯一的 URL。url 的基本格式:Protocol://hostName[:port]/Path[?query]#fragmentPro...原创 2019-12-04 10:29:49 · 186 阅读 · 0 评论 -
WebAPI-window对象的两个定时器
window 对象的两个定时器setTimeout()setTimeout(function|code, milliseconds, param1, param2, ...) 在指定的毫秒数后会调用函数或计算表达式,只会调用一次;返回值为定时器 ID(数字类型)。参数:function|code 定时器调用的回调函数(可以是匿名函数也可以是命名函数的函数名)或JS代码串(如果JS代码串...原创 2019-12-03 11:32:44 · 362 阅读 · 0 评论 -
WebAPI-window对象的常见事件
概述BOM 是 Browser Object Model 的缩写,就是浏览器对象模型;BOM 提供了与浏览器窗口进行交互的对象;BOM 就是由一系列相关的对象构成,并且每个对象都用于许多的方法和属性,其核心对象是 window与 DOM 和 JavaScript 不同,DOM 拥有标准化组织 W3C, JavaScript 的语法标准化组织是 ECMA,而 BOM 没有官方标准,BOM 最初是...原创 2019-12-03 10:42:03 · 233 阅读 · 0 评论 -
WebAPI-DOMContentLoaded事件
概述当初始的 HTML 文档被完全加载和解析完成之后,DOMContentLoaded 事件就会被触发,与 load 事件不同,该事件无需等待样式表、图像、flash和子框架的完成加载;需要注意的是该事件只有 IE9 以上支持。...原创 2019-11-24 13:34:56 · 154 阅读 · 0 评论 -
WebAPI-键盘事件
概述所谓键盘事件就是在按键被敲击时触发的一些事件,常见的键盘事件有:keyup(键盘抬起事件)、keydown(键盘按下事件)、keypress(键盘按下并抬起触发事件)keydownkeydown 事件会在按键按下时触发keypresskeypress 在按键按下并抬起时触发事件;但是一些特殊功能的按键不会触发该事件,例如:ALT, CTRL, SHIFT, ESCkeyupkey...原创 2019-11-23 15:04:01 · 146 阅读 · 0 评论 -
WebAPI-鼠标事件对象中与坐标相关的属性
e.clientXe.clientX 获取鼠标相对于浏览器可视窗口区域的 X 坐标(横坐标)e.clientYe.clientY 获取鼠标相对于浏览器可视区域的 Y 坐标(纵坐标);鼠标位置未变时坐标不会随页面的滚动而改变示例:<div></div><script type="text/javascript"> function $(select...原创 2019-11-23 13:51:31 · 264 阅读 · 0 评论 -
WebAPI-禁止鼠标右键和鼠标选中
鼠标右键菜单contextmenu 当点击鼠标右键或按下键盘上的菜单键时会触发该事件,该事件会打开上下文菜单在有些情况下需要禁用鼠标右键菜单,这时就可以使用事件对象的 preventDefault() 方法禁用右键菜单未禁用时:<p>这是一段文字,测试是否能使用右键菜单</p><script> function $(selector) { re...原创 2019-11-23 08:43:57 · 197 阅读 · 0 评论 -
WebAPI-事件委托
概述事件委托(也叫事件代理)主要是用来解决后生成元素(动态添加的元素)的事件绑定问题实现原理:将事件绑定在已存在的父级元素上,当触发子元素时,会通过事件冒泡,事件会冒泡到父元素身上。举个例子:到了中午,一个宿舍的哥们都要去买午饭,要么每个人都去买,要么把这件事情委托给宿舍中的某个人(叫“爸爸”),要么让这个人一次性去买,然后再根据床位将其一 一分发给指定的同学;在这里,买午饭就是一个事件...原创 2019-11-22 17:01:50 · 326 阅读 · 0 评论 -
WebAPI-事件对象参数
概述事件触发后就会产生事件对象,与事件相关的信息都会存储在一个对象中;这个对象会以参数的形式传给事件处理函数,所以事件处理函数默认会有一个事件对象参数...原创 2019-11-21 21:13:24 · 223 阅读 · 0 评论 -
WebAPI-DOM事件流
概述js事件在触发时会在元素节点之间按照特定的顺序进行传播,这个传播的过程就是 DOM 事件流。例如:给页面中的一个 button 按钮注册了点击事件并进行了点击,因为 button 在 body 标签内部所以当点击了 button 时也就点击了 body;body 又在 html 内部,所以就点击了html;html 在 doucment 文档中也就点击了document。两种事件流...原创 2019-11-20 20:50:14 · 129 阅读 · 0 评论 -
WebAPI-注册事件的两种方式,删除事件的方式详解
注册事件传统注册方式通过 on 开头进行注册事件的方式特点通过这种方式注册的事件具有唯一性,同一个元素注册多个相同的事件最后注册的事件会覆盖之前注册的事件(后者覆盖前者)示例:<input type="button" id="btn" value="按钮"><script>function $(id){ return document.getEleme...原创 2019-11-19 18:02:30 · 201 阅读 · 0 评论 -
WebAPI-创建、添加节点方法汇总
document.createElement(nodeName) 通过指定的元素名称创建对应的元素并返回,该方法只是创建了元素并未将元素添加到页面中;document.createTextNode(text) 该方法用于创建一个文本节点并返回;node.cloneNode(deep) 该方法用于克隆指定的节点;parentNode.appendChild(node) 用于向指定节点的子节点列表末尾添加新的子节点(追加节点,就像数组方法中的 push() 方法);返回值为添加的节点原创 2019-11-18 19:29:08 · 297 阅读 · 0 评论 -
WebAPI-获取兄弟节点的方法汇总
nextSiblingnode.nextSibling 获取指定节点的下一个兄弟节点,如果当前节点的后面没有节点则返回 nullnode 当前节点对象<div class="box"> <p id="p">p标签</p> 文本节点 <div>div标签</div></div><script ty...原创 2019-11-18 17:37:19 · 229 阅读 · 0 评论 -
WebAPI-js常用鼠标事件汇总
onclick点击事件,onmouseover鼠标移入事件,onmouseout鼠标离开事件,onmouseenter鼠标进入事件,onmouseleave 鼠标离开事件,onmouseup鼠标按键弹起事件,onmouseove 鼠标移动事件,onmouseup 鼠标按键抬起事件,onmousedown 鼠标按键按下时会触发该事件,`onbulr` 元素失去焦点时触发的事件,,onfocus 在元素对象获得焦点时会触发该事件原创 2019-11-12 21:51:01 · 391 阅读 · 0 评论 -
WebAPI-DOM树,获取父节点、获取子节点的方法汇总
DOM树DOM树 又称为 文档树模型,就是把文档映射成树形结构,通过节点对象对其处理,处理的结果可以加载到当前的页面中。DOM树 就像人类家族的族谱,族谱可以很容易的表明家族成员之间的关系,将复杂的关系简明地表示出来。节点操作获取父节点通过 parentNode 属性可以获取指定节点的父节点;如果指定的节点没有父节点就会返回 null,如果存在则返回父节点对象语法:node.pa...原创 2019-11-15 20:10:24 · 1235 阅读 · 0 评论 -
WebAPI-获取DOM节点的节点名称、节点类型值、节点值
DOMDOM 就是 文档对象模型,是 Document Object Model 的简称;是 W3C 国际标准化组织 制定的一套处理 HTML 和 XML 文档的规范,所有的浏览器都遵循了这套标准W3C 组织定义了一系列的 DOM 接口,通过这些 DOM 接口就可以修改网页的内容、结构和样式。DOM 节点根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:整个...原创 2019-11-15 15:53:41 · 674 阅读 · 0 评论 -
WebAPI-js设置或删除元素属性的方法
HTML属性分类HTML 元素的属性分为两种:标准(内置)属性和自定义属性标准属性:官方定义的属性自定义属性:HTML规范允许开发人员为元素设置非官方定义的属性;在最新的规范中推荐使用 data- 作为前缀来自定义属性获取属性值的方式通过点 . 的方式想要获取指定元素对象的某个属性值直接通过 . 加属性名即可获取属性值语法:elementObject.attributeNam...原创 2019-11-14 18:58:34 · 328 阅读 · 0 评论 -
WebAPI-如何向标签中插入内容,innerHTML与innerText的区别
js中可以通过 innerHTML 和 innerText 获取或修改双标签中的内容innerTextelement.innerText 可获取或设置指定元素内的文本内容,从该指定标签的起始位置到终止位置的全部文本内容,但是不包括元素内原本的 html 标签、空格和换行符。element 需要获取或修改文本内容的元素对象注意:当获取文本内容时遇到行内标签且标签单行书写,会用空格隔开...原创 2019-11-13 11:02:05 · 628 阅读 · 0 评论 -
WebAPI-js事件三要素,事件执行的步骤
事件概述所谓事件就是可以被 JavaScript 侦测到的行为; 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。简单理解就是:在什么时候做什么事情(触发-响应)事件的三要素事件源触发事件的元素(可以是个 button 按钮,a 标签等)事件类型事件的触发方式(例如:鼠标点击,键盘抬起,鼠标移动等)事件处理程序(函数)事件触发后要执行的代...原创 2019-11-12 14:10:29 · 454 阅读 · 0 评论 -
WebAPI-获取页面元素(标签)的常用方法汇总
通过 ID 获取语法:document.getElementById(id)说明:document 表示当前文档对象,就是当前页面;每个载入浏览器的 HTML 文档都是 Document 对象getElementById() Document 对象的一个方法,用于获取指定 id 的元素id 该参数为 id 字符串;就是通过标签的 id 属性为标签设置的具有唯一性的标识(该属性值必...原创 2019-11-11 16:59:22 · 1442 阅读 · 0 评论 -
WebAPI-表格相关的常见方法汇总
createCaption()tableObject.createCaption 在表格对象中创建或者获取 caption 标签;表格中存在 caption 标签则会获取,不存在时会创建,不会进行覆盖。返回值为获取或创建的 caption 标签。// 创建表格标签var tab = document.createElement('table')// 创建表格标题并追加到 table;并获取...原创 2019-11-11 11:43:03 · 261 阅读 · 0 评论