摘要:的历史可以追溯至年代后期微软与的浏览器大战,双方为了在与一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有以及微软自家的格式等,使不少网页使用非微软平台及浏览器无法正常显示。
学习目标:
掌握API和Web API的概念
掌握常见的浏览器提供的API的调用方式
能通过API开发常见的页面交互功能
能够利用搜索引擎解决问题
Web APIAPI的概念
API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。
任何开发语言都有自己的API
API的特征输入和输出(I/O)
API的使用方法(console.log())
Web API的概念浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)
此处的Web API特指浏览器提供的API(一组方法),Web API在后面的课程中有其它含义
MDN-Web API
JavaScript的组成
ECMAScript - JavaScript的核心定义了javascript的语法规范
JavaScript的核心,描述了语言的基本语法和数据类型,ECMAScript是一套标准,定义了一种语言的标准与具体实现无关
一套操作浏览器功能的API
通过BOM可以操作浏览器窗口,比如:弹出框、控制浏览器跳转、获取分辨率等
一套操作页面元素的API
DOM可以把HTML看做是文档树,通过DOM提供的API可以对树上的节点进行操作
BOM的概念
BOM(Browser Object Model) 是指浏览器对象模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理,
比如:刷新浏览器、后退、前进、在浏览器中输入URL等
window是浏览器的顶级对象,当调用window下的属性和方法时,可以省略window
注意:window下一个特殊的属性 window.name
alert()
prompt()
confirm()
页面加载事件onload
window.onload = function () { // 当页面加载完成执行 // 当页面完全加载所有内容(包括图像、脚本文件、CSS 文件等)执行 }
onunload
window.onunload = function () { // 当用户退出页面时执行 }定时器
setTimeout()和clearTimeout()
在指定的毫秒数到达之后执行指定的函数,只执行一次
// 创建一个定时器,1000毫秒后执行,返回定时器的标示 var timerId = setTimeout(function () { console.log("Hello World"); }, 1000); // 取消定时器的执行 clearTimeout(timerId);setInterval()和clearInterval()
定时调用的函数,可以按照给定的时间(单位毫秒)周期调用函数
// 创建一个定时器,每隔1秒调用一次 var timerId = setInterval(function () { var date = new Date(); console.log(date.toLocaleTimeString()); }, 1000); // 取消定时器的执行 clearInterval(timerId);location对象
location对象是window对象下的一个属性,时候的时候可以省略window对象
location可以获取或者设置浏览器地址栏的URL
统一资源定位符 (Uniform Resource Locator, URL)
URL的组成
scheme://host:port/path?query#fragment
scheme:通信协议
常用的http,ftp,maito等
host:主机
服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。
port:端口号
整数,可选,省略时使用方案的默认端口,如http的默认端口为80。
path:路径
由零或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址。
query:查询
可选,用于给动态网页传递参数,可有多个参数,用"&"符号隔开,每个参数的名和值用"="符号隔开。例如:name=zs
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获取元素var div = document.getElementById("main"); console.log(div); // 获取到的数据类型 HTMLDivElement,对象都是有类型的 // HTMLDivElement <-- HTMLElement <-- Element <-- Node <-- EventTarget根据标签名获取元素
var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { var div = divs[i]; console.log(div); }根据name获取元素*
var inputs = document.getElementsByName("hobby"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; console.log(input); }根据类名获取元素
var mains = document.getElementsByClassName("main"); for (var i = 0; i < mains.length; i++) { var main = mains[i]; console.log(main); }根据选择器获取元素
var text = document.querySelector("#text"); console.log(text); var boxes = document.querySelectorAll(".box"); for (var i = 0; i < boxes.length; i++) { var box = boxes[i]; console.log(box); }
总结
掌握
getElementById() getElementsByTagName()
了解
getElementsByName() getElementsByClassName() querySelector() querySelectorAll()事件
事件:触发-响应机制
Event接口表示在DOM中发生的任何事件,一些是用户生成的(例如鼠标或键盘事件),而其他由API生成。
事件源:触发(被)事件的元素
事件类型:事件的触发方式(例如鼠标点击或键盘点击)
事件处理程序:事件触发后要执行的代码(函数形式)
事件的基本使用var box = document.getElementById("box"); box.onclick = function() { console.log("代码会在box被点击后执行"); };属性操作 非表单元素的属性
href、title、id、src、className
var link = document.getElementById("link"); console.log(link.href); console.log(link.title); var pic = document.getElementById("pic"); console.log(pic.src);
innerHTML和innerText
var box = document.getElementById("box"); box.innerHTML = "我是文本我会生成为标签
"; console.log(box.innerHTML); box.innerText = "我是文本我不会生成为标签
"; console.log(box.innerText);
HTML转义符
" "
‘ "
& &
< < //less than 小于
表单元素属性> // greater than 大于空格
© ©
value 用于大部分表单元素的内容获取(option除外)
type 可以获取input标签的类型(输入框或复选框等)
disabled 禁用属性
checked 复选框选中属性
selected 下拉菜单选中属性
自定义属性操作getAttribute() 获取标签行内属性
setAttribute() 设置标签行内属性
removeAttribute() 移除标签行内属性
与element.属性的区别: 上述三个方法用于获取任意的行内属性。
样式操作var box = document.getElementById("box"); box.style.width = "100px"; box.style.height = "100px"; box.style.backgroundColor = "red";类名操作
var box = document.getElementById("box"); box.className = "clearfix";创建元素的三种方式
document.write()
document.write("新设置的内容标签也可以生成
");
innerHTML
var box = document.getElementById("box"); box.innerHTML = "新内容新标签
";
document.createElement()
var div = document.createElement("div"); document.body.appendChild(div);性能问题
innerHTML方法由于会对字符串进行解析,需要避免在循环内多次使用。
可以借助字符串或数组的方式进行替换,再设置给innerHTML
优化后与document.createElement性能相近
节点操作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, div);节点层级
重点讲父子属性,兄弟属性画图讲解
var box = document.getElementById("box"); console.log(box.parentNode); console.log(box.childNodes); console.log(box.children); console.log(box.nextSibling); console.log(box.previousSibling); console.log(box.firstChild); console.log(box.lastChild);
注意
childNodes和children的区别,childNodes获取的是子节点,children获取的是子元素
nextSibling和previousSibling获取的是节点,获取元素对应的属性是nextElementSibling和previousElementSibling获取的是元素
nextElementSibling和previousElementSibling有兼容性问题,IE9以后才支持
总结
节点操作,方法
appendChild() insertBefore() removeChild() replaceChild()
节点层次,属性
parentNode childNodes children nextSibling/previousSibling firstChild/lastChild事件详解 注册/移除事件的三种方式
var box = document.getElementById("box"); box.onclick = function () { console.log("点击后执行"); }; box.onclick = null; box.addEventListener("click", eventCode, false); box.removeEventListener("click", eventCode, false); box.attachEvent("onclick", eventCode); box.detachEvent("onclick", eventCode); function eventCode() { console.log("点击后执行"); }事件的三个阶段
捕获阶段
当前目标阶段
冒泡阶段
事件对象.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 键盘按键抬起触发
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/101336.html
摘要:的历史可以追溯至年代后期微软与的浏览器大战,双方为了在与一决生死,于是大规模的赋予浏览器强大的功能。微软在网页技术上加入了不少专属事物,既有以及微软自家的格式等,使不少网页使用非微软平台及浏览器无法正常显示。 学习目标: 掌握API和Web API的概念 掌握常见的浏览器提供的API的调用方式 能通过API开发常见的页面交互功能 能够利用搜索引擎解决问题 Web API API的...
摘要:在他的重学前端课程中提到到现在为止,前端工程师已经成为研发体系中的重要岗位之一。大部分前端工程师的知识,其实都是来自于实践和工作中零散的学习。一基础前端工程师吃饭的家伙,深度广度一样都不能差。 开篇 前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的。 winter在他的《重学前端》课程中提到: 到现在为止,前端工程师已经成为研...
阅读 3130·2021-11-24 09:39
阅读 2863·2021-11-23 09:51
阅读 846·2021-11-18 10:07
阅读 3525·2021-10-11 10:57
阅读 2706·2021-10-08 10:04
阅读 2979·2021-09-26 10:11
阅读 1009·2021-09-23 11:21
阅读 2719·2019-08-29 17:28