前端进阶(一)掌握Web API,开发常见的页面交互功能

原创 高志飞 教程 前端 126阅读 2019-05-22 14:46:55 举报

目标

  • 掌握API和Web API的概念
  • 掌握常见的浏览器提供的API的调用方式
  • 能通过API开发常见的页面交互功能
  • 能够利用搜索引擎解决问题
    • *

      自己是个做了几年开发的老码农,希望本文对你有用! 这里推荐一下我的前端学习交流圈:767273102 ,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。2019最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

Web API

API的概念
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。

  • 任何开发语言都有自己的API
  • API的特征输入和输出(I/O)
  • API的使用方法(console.log())

Web API的概念

浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法),Web API在后面的课程中有其它含义

掌握常见的浏览器提供的API的调用方式

MDN-Web API

JavaScript的组成


ECMAScript - JavaScript的核心

定义了javascript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关

BOM - 浏览器对象模型

一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作

BOM

BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
注意:window下一个特殊的属性 window.name

对话框

  • alert()
  • prompt()
  • confirm()

页面加载事件

onload

onunload

定时器

setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数,只执行一次

setInterval()和clearInterval()

定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数

location对象

location对象是window对象下的一个属性,时候的时候可以省略window对象
location可以获取或者设置浏览器地址栏的URL

URL

统一资源定位符 (Uniform Resource Locator, URL)

  • URL的组成

    scheme://host:port/path?query#fragment
    scheme:通信协议

    host:主机

    port:端口号

    path:路径

    query:查询

    fragment:信息片断

location有哪些成员?

  • 使用chrome的控制台查看
  • 查MDN
    MDN
  • 成员
    • assign()/reload()/replace()
    • hash/host/hostname/search/href……

history对象

  • back()
  • forward()
  • go()

navigator对象

  • userAgent

通过userAgent可以判断用户浏览器的类型

  • platform

通过platform可以判断浏览器所在的系统平台类型.


DOM

文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”,双方为了在JavaScript与JScript一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有VBScript、ActiveX、以及微软自家的DHTML格式等,使不少网页使用非微软平台及浏览器无法正常显示。DOM即是当时蕴酿出来的杰作。

DOM又称为文档树模型

  • 文档:一个网页可以称为文档
  • 节点:网页中的所有内容都是节点(标签、属性、文本、注释等)
  • 元素:网页中的标签
  • 属性:标签的属性
    • *

DOM经常进行的操作

  • 获取元素
  • 动态创建元素
  • 对元素进行操作(设置其属性或调用其方法)
  • 事件(什么时机做相应的操作)
    • *

获取页面元素

根据id获取元素

根据标签名获取元素

根据name获取元素*

根据类名获取元素

根据选择器获取元素

  • 总结

    掌握

    了解

事件

事件:触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。

事件三要素

  • 事件源:触发(被)事件的元素
  • 事件类型:事件的触发方式(例如鼠标点击或键盘点击)
  • 事件处理程序:事件触发后要执行的代码(函数形式)

事件的基本使用


属性操作

非表单元素的属性

href、title、id、src、className

innerHTML和innerText

HTML转义符
" "
‘ '
& &
< < //less than 小于

空格  
© ©


表单元素属性

  • value 用于大部分表单元素的内容获取(option除外)
  • type 可以获取input标签的类型(输入框或复选框等)
  • disabled 禁用属性
  • checked 复选框选中属性
  • selected 下拉菜单选中属性

自定义属性操作

  • getAttribute() 获取标签行内属性
  • setAttribute() 设置标签行内属性
  • removeAttribute() 移除标签行内属性
  • 与element.属性的区别: 上述三个方法用于获取任意的行内属性。

样式操作

类名操作


创建元素的三种方式

document.write()

innerHTML

document.createElement()

性能问题

  • innerHTML方法由于会对字符串进行解析,需要避免在循环内多次使用。
  • 可以借助字符串或数组的方式进行替换,再设置给innerHTML
  • 优化后与document.createElement性能相近

节点操作

节点层级

重点讲父子属性,兄弟属性画图讲解

  • 注意
    childNodes和children的区别,childNodes获取的是子节点,children获取的是子元素
    nextSibling和previousSibling获取的是节点,获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
  • 总结

    节点操作,方法

    节点层次,属性

    • *

事件详解

注册/移除事件的三种方式

事件的三个阶段

  1. 捕获阶段
  2. 当前目标阶段
  3. 冒泡阶段
    事件对象.eventPhase属性可以查看事件触发时所处的阶段

事件对象的属性和方法

  • event.type 获取事件类型
  • clientX/clientY 所有浏览器都支持,窗口位置
  • pageX/pageY IE8以前不支持,页面位置
  • event.target || event.srcElement 用于获取触发事件的元素
  • event.preventDefault() 取消默认行为

阻止事件传播的方式

  • 标准方式 event.stopPropagation();
  • IE低版本 event.cancelBubble = true; 标准中已废弃
    • *

常用的鼠标和键盘事件

  • onmouseup 鼠标按键放开时触发
  • onmousedown 鼠标按键按下触发
  • onmousemove 鼠标移动触发
  • onkeyup 键盘按键按下触发
  • onkeydown 键盘按键抬起触发

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复