pink-常用Web APIs

最新推荐文章于 2020-12-14 16:11:42 发布

快乐的小马龙123

最新推荐文章于 2020-12-14 16:11:42 发布

阅读量498

点赞数 1

分类专栏：学习前端视频的笔记文章标签：前端 js web dom

本文链接：https://blog.csdn.net/xieanna123/article/details/103000367

版权

学习前端视频的笔记专栏收录该内容

9 篇文章 9 订阅

订阅专栏

pink-常用Web APIs

视频链接：常用Web APIs

pink-常用Web APIs

pink-常用Web APIs

一、Web APIs 简介

1. Web APIs 和JS 基础关联性

在这里插入图片描述

2.API 和 Web API

在这里插入图片描述

二、DOM

1.DOM 简介

在这里插入图片描述

2.获取元素

在这里插入图片描述

3.事件基础

在这里插入图片描述

4.操作元素

在这里插入图片描述

5.节点操作

在这里插入图片描述

 实际开发的写法  既没有兼容性问题又返回第一个子元素
    console.log(ol.children[0]);
    console.log(ol.children[ol.children.length - 1]);

在这里插入图片描述

删除节点

6.DOM重点核心

在这里插入图片描述

三、事件高级

1.注册事件（绑定事件）

在这里插入图片描述

2.删除事件（解绑事件）

在这里插入图片描述

3.DOM事件流

在这里插入图片描述

4.事件对象

在这里插入图片描述

5.阻止冒泡事件

在这里插入图片描述

6.事件委托（代理、委派）

在这里插入图片描述

7.常用的额鼠标事件

在这里插入图片描述

8.常用的键盘事件

在这里插入图片描述

四、BOM浏览器对象模型

1.BOM概述

在这里插入图片描述

2.window对象的常见时间

在这里插入图片描述

3.定时器

在这里插入图片描述

4.JS执行机制

在这里插入图片描述

5.location对象

在这里插入图片描述

6.navigator对象

在这里插入图片描述

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

7.history对象

在这里插入图片描述

五、PC端网页特效

1.元素偏移量offset系列

在这里插入图片描述

2.元素可视区client系列

在这里插入图片描述

3.元素滚动scroll系列

在这里插入图片描述

javascript
function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left