![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习-JavaScript DOM BOM
学习过程主要根据黑马Pink老师视频学习,若有侵权,请联系删除。老师视频地址:https://space.bilibili.com/415434293?spm_id_from=333.338.b_765f7570696e666f.2
Nanami Touko
这个作者很懒,什么都没留下…
展开
-
前端学习笔记-JS-Web API基础
JS组成:API应用程序编程接口,是一些预先定义的函数,就是给程序员提供的一个工具,以便于能轻松实现想要完成的功能Web APIWeb APIWeb API是浏览器提供的一套操作浏览器功能和页面元素的API(DOM和BOM)...原创 2019-09-14 11:08:45 · 250 阅读 · 0 评论 -
前端学习笔记-JS-BOM-轮播图案例/节流阀
网页轮播图轮播图也称为焦点图,是网页中比较常见的网页特效功能需求:1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧同理3.图片播放的同时,下面的小圆圈模块跟随一起变化4.点击小圆圈,可以播放相应的图片5.鼠标不经过轮播图,轮播图也会自动播放图片6.鼠标经过,轮播图模块,自动停止播放HTML主要布局...原创 2019-09-20 21:25:42 · 803 阅读 · 1 评论 -
前端学习笔记-JS-BOM-动画函数封装
动画实现原理核心原理:通过定时器setInterval()不断移动盒子位置实现步骤:1. 获得盒子当前位置 2. 让盒子在当前位置加上1个移动距离3. 利用定时器不断重复这个操作4. 加一个结束定时器的条件5. 注意此元素需要添加定位, 才能使用element.style.left <script> var div = document....原创 2019-09-20 15:17:44 · 189 阅读 · 0 评论 -
前端学习笔记-JS-BOM-元素可视区client系列/立即执行函数/元素滚动scroll系列
clientclient翻译过来就是客户端,我们使用client系列的相关属性来获取元素可视区的相关信息。通过client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。立即执行函数不需要调用,立马能够自己执行的函数主要作用:创建一个独立的作用域。避免了命名冲突问题写法一:(function(){})()写法二:(function(){}())...原创 2019-09-19 21:53:33 · 179 阅读 · 0 评论 -
前端学习笔记-JS-BOM-元素偏移量offset系列
offset概述offset翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移)、大小等获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位HTMLElement<script> // offset 系列 var father = document.querySelecto...原创 2019-09-19 19:30:23 · 278 阅读 · 0 评论 -
前端学习笔记-JS-BOM-location对象/navigator 对象/history对象
location对象Locationwindow对象给我们提供了一个location属性用于获取或设置窗口URL,并且可以用于解析URL.因为这个属性返回的是一个对象,所有我们将这个属性也称为location对象。URL统一资源定位系统(uniform resource locator;URL)是因特网的万维网服务程序上用于指定信息位置的表示方法,是互联网上标准资源的地址。互...原创 2019-09-18 22:00:17 · 139 阅读 · 0 评论 -
前端学习笔记-JS-BOM-窗口加载事件/定时器/同步&异步
BOMBOM(Brower Object Model) 即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是window。BOM 是由一系列相关的对象构成,并且每个对象都提供了很多方法和属性。BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是 Netscape 浏览器标准的一部分。每个浏览器都有...原创 2019-09-18 20:07:27 · 251 阅读 · 0 评论 -
前端学习笔记-JS-DOM-常用鼠标/键盘事件
常用的鼠标事件鼠标事件 触发条件 onclick 鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup 鼠标弹起触发 onmousedown ...原创 2019-09-18 11:40:54 · 188 阅读 · 0 评论 -
前端学习笔记-JS-DOM-高级事件/事件流/事件委托
高级事件注册事件(绑定事件)注册事件概述给元素添加事件,成为注册事件或者绑定事件注册事件有两种方式:传统方式和方法监听注册方式addEventListener() 方法EventTarget.addEventListener()(type, listener[, useCapture]) 方法将指定的监听器注册到EventTarget 上,当该对象触发...原创 2019-09-17 19:58:29 · 160 阅读 · 0 评论 -
前端学习笔记-JS-DOM-DOM重点核心
DOM重点核心Document Object Model(文档对象模型),是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口。可以改变网页的内容、结构和样式增document.write 不推荐使用如果页面文档流加载完毕 再调用这句话会导致页面重绘 appendChild insertBefore删removeChild改修改DOM元...原创 2019-09-17 14:28:04 · 201 阅读 · 0 评论 -
前端学习笔记-JS-DOM-节点操作
节点操作节点概述一般的,节点至少由nodeType(节点类型)、 nodeName(节点名称)、 nodeValue(节点值)这三个基本属性。元素节点 nodeType 为1 属性节点 nodeType 为2 文本节点 nodeType 为3 (文本节点包括文字、空格、换行等等)在实际开发中,节点操作主要操作的是元素节点。节点层级1.父级节点...原创 2019-09-16 21:52:34 · 163 阅读 · 0 评论 -
前端学习笔记-JS-DOM-动态生成表格案例
动态生成表格案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> table { width: 500...原创 2019-09-17 14:00:20 · 306 阅读 · 0 评论 -
前端学习笔记-JS-DOM-事件基础
事件基础JavaScript使我们有能力创建动态页面,而事件是可以被JavaScript侦测到的行为。 网页中的每个元素都可以产生某些触发JavaScript的事件。事件由三部分组成:事件源 事件被触发的对象 比如按钮 事件类型 如何触发 比如鼠标点击、鼠标经过、键盘按下、滚动滚轮 事件处理程序 通过函数赋值的方式完成<button id="btn">按钮</...原创 2019-09-14 15:46:32 · 124 阅读 · 0 评论 -
前端学习笔记-JS-DOM-获取元素
DOMDocument Object Model(文档对象模型),是W3C组织推荐的处理可拓展标记语言(HTML或者XML)的标准编程接口。可以改变网页的内容、结构和样式DOM树文档:一个页面就是一个文档 document元素:页面中的所有标签都是元素,element节点:网页中的所有内容都是节点(标签、属性、文本、注释等),nodeDOM把以上内容都看...原创 2019-09-14 15:18:06 · 143 阅读 · 0 评论 -
前端学习笔记-JS-BOM-页面滚动/筋斗云跟随鼠标移动案例
滚动窗口至文档中的特定位置window.scroll(x,y)筋斗云跟随鼠标移动案例分析:1.利用动画函数做动画效果2.原先筋斗云的起始位置是03.鼠标经过某个小li,把当前小li的offsetLeft位置 作为目标值即可4.鼠标离开某个小li,就把目标值设为05.如果点击了某个小li,就把li当前的位置存储起来,作为筋斗云的起始位置HTML:<...原创 2019-09-21 16:42:09 · 238 阅读 · 0 评论