学习目标

本期继续学习webapi，做一些项目、案例。

1.百度大项目

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#box {width: 450px;margin: 200px auto;}#txt {width: 350px;}#pop {width: 350px;border: 1px solid red;}#pop ul {margin: 10px;padding: 0px;width: 200px;list-style-type: none;}#pop ul li {}</style>
</head>
<body>
<div id="box"><input type="text" id="txt" value=""><input type="button" value="搜索" id="btn"></div><script src="js/common.js"></script>
<script>var keyWords=["王者荣耀","荣耀王者","李白","李太白","王者之击","QQ","QQ飞车","QQ飞车端游","QQ飞车手游"];//获取文本框注册键盘抬起事件my$("txt").onkeyup=function  () {//每一次的键盘抬起都判断页面中有没有这个divif(my$("dv")){//删除一次my$("box").removeChild(my$("dv"));}//获取文本框内容var text=this.value;var tempArr=[];//临时数组，存放匹配的数据//把文本框输入的内容和数组中的每个数据对比for(var i=0;i<keyWords.length;i++){//是否是最开始出现的if(keyWords[i].indexOf(text)==0){tempArr.push(keyWords[i]);//追加}}//如果文本框是空的，临时数组是空的，不用创建divif(this.value.length==0||tempArr.length==0){//如果页面中有这个div,删除这个divif(my$("dv")){my$("box").removeChild(my$("dv"));}return;//函数中遇到return后面的代码不再执行}//遍历临时数组，创建div,把div加入到id为box的div中var dvObj=document.createElement("div");my$("box").appendChild(dvObj);dvObj.id="dv";dvObj.style.width="350px";//dvObj.style.height="100px";dvObj.style.border="1px solid green";//循环遍历临时数组，创建对应的p标签for(var i=0;i<tempArr.length;i++){//创建p标签var pObj=document.createElement("p");//把p加到div中dvObj.appendChild(pObj);setInnnerText(pObj,tempArr[i]);pObj.style.margin=0;pObj.style.padding=0;pObj.style.cursor="pointer";pObj.style.marginTop="5px";pObj.style.marginLeft="5px";//鼠标进入pObj.onmouseover=function  () {this.style.backgroundColor="red";}pObj.onmouseout=function  () {this.style.backgroundColor="";};}};
</script></body>
</html>

js文件还是用上一期的。

2.BOM的介绍

更新一下common.js文件代码：

/*** Created by Administrator on 2017-08-18.*/
//格式化日期的代码//根据id获取元素的代码//innerText和textContent的兼容//获取第一个子元素的兼容//获取最后一个子元素的兼容/*** Created by Administrator on 2017/3/24.*//*** 格式化日期* @param dt 日期对象* @returns {string} 返回值是格式化的字符串日期*/
function getDates(dt) {var str = "";//存储时间的字符串//获取年var year = dt.getFullYear();//获取月var month = dt.getMonth() + 1;//获取日var day = dt.getDate();//获取小时var hour = dt.getHours();//获取分钟var min = dt.getMinutes();//获取秒var sec = dt.getSeconds();month = month < 10 ? "0" + month : month;day = day < 10 ? "0" + day : day;hour = hour < 10 ? "0" + hour : hour;min = min < 10 ? "0" + min : min;sec = sec < 10 ? "0" + sec : sec;str = year + "年" + month + "月" + day + "日 " + hour + ":" + min + ":" + sec;return str;
}
/*** 获取指定标签对象* @param id 标签的id属性值* @returns {Element}根据id属性值返回指定标签对象*/
function my$(id) {return document.getElementById(id);
}function setInnerText(element, text) {if (typeof element.textContent == "undefined") {element.innerText = text;} else {element.textContent = text;}
}
/*** 获取元素的文本内容* @param element 任意元素* @returns {*} 任意元素中的文本内容*/
function getInnerText(element) {if (typeof(element.textContent) == "undefined") {return element.innerText;} else {return element.textContent;}
}
/*** 获取父级元素中的第一个子元素* @param element 父级元素* @returns {*} 父级元素中的子级元素*/
function getFirstElement(element) {if (element.firstElementChild) {return element.firstElementChild;} else {var node = element.firstChild;while (node && node.nodeType != 1) {node = node.nextSibling;}return node;}
}
/*** 获取父级元素中的最后一个子元素* @param element 父级元素* @returns {*} 最后一个子元素*/
function getLastElement(element) {if (element.lastElementChild) {return element.lastElementChild;} else {var node = element.lastChild;while (node && node.nodeType != 1) {node = node.previousSibling;}return node;}
}
/*** 获取某个元素的前一个兄弟元素* @param element 某个元素* @returns {*} 前一个兄弟元素*/
function getPreviousElement(element) {if (element.previousElementSibling) {return element.previousElementSibling} else {var node = element.previousSibling;while (node && node.nodeType != 1) {node = node.previousSibling;}return node;}
}
/*** 获取某个元素的后一个兄弟元素* @param element 某个元素* @returns {*} 后一个兄弟元素*/
function getNextElement(element) {if (element.nextElementSibling) {return element.nextElementSibling} else {var node = element.nextSibling;while (node && node.nodeType != 1) {node = node.nextSibling;}return node;}
}
/*** 获取某个元素的所有兄弟元素* @param element 某个元素* @returns {Array} 兄弟元素*/
function getSiblings(element) {if (!element)return;var elements = [];var ele = element.previousSibling;while (ele) {if (ele.nodeType === 1) {elements.push(ele);}ele = ele.previousSibling;}ele = element.nextSibling;while (ele) {if (ele.nodeType === 1) {elements.push(ele);}ele = ele.nextSibling;}return elements;
}
/*** 返回当前浏览器是什么类型的浏览器*/
function userBrowser(){var browserName=navigator.userAgent.toLowerCase();if(/msie/i.test(browserName) && !/opera/.test(browserName)){console.log("IE");}else if(/firefox/i.test(browserName)){console.log("Firefox");}else if(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)){console.log("Chrome");}else if(/opera/i.test(browserName)){console.log("Opera");}else if(/webkit/i.test(browserName) &&!(/chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName))){console.log("Safari");}else{console.log("不知道什么鬼!");}
}//为任意一个元素绑定事件:元素,事件类型,事件处理函数
function addEventListener(element,type,fn) {if(element.addEventListener){//支持element.addEventListener(type,fn,false);}else if(element.attachEvent){element.attachEvent("on"+type,fn);}else{element["on"+type]=fn;}
}
//为任意的一个元素解绑某个事件:元素,事件类型,事件处理函数
function removeEventListener(element,type,fn) {if(element.removeEventListener){element.removeEventListener(type,fn,false);}else if(element.detachEvent){element.detachEvent("on"+type,fn);}else{element["on"+type]=null;}
}

BOM回顾

之前我们稍微了解了一下，这次将详细讲解。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><style>body{height: 2000px;}</style><script>/** JavaScript分三个部分:* 1. ECMAScript标准---基本语法* 2. DOM--->Document Object Model 文档对象模型,操作页面元素的* 3. BOM--->Browser Object Model 浏览器对象模型,操作浏览器的** 浏览器中有个顶级对象:window* 页面中顶级对象:document* 页面中所有的内容都是属于浏览器的,页面中的内容也都是window的** 变量是window的*** *///    var num=100;//    console.log(window.num);//因为页面中的所有内容都是window的,window是可以省略的.//window.document.write("哈哈");//    var name="您好";//    console.log(window.name);//    console.log(top); console.log(window);这两个是一样的，window的另外一个名字。</script>
</head>
<body></body>
</html>

案例

页面加载的事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//页面加载的时候,按钮还没出现,页面没有加载完毕,按F12,会发现报错document.getElementById("btn").onclick=function () {alert("您好");};</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>

解决：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//页面加载的时候,按钮还没出现,页面没有加载完毕//页面加载完毕了,再获取按钮//只要页面加载完毕,这个事件就会触发-----页面中所有的内容,标签,属性,文本,包括外部引入js文件window.onload=function () {document.getElementById("btn").onclick=function () {alert("您好");};};</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>

拓展：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//很重要onload=function () {document.getElementById("btn").onclick=function () {alert("您好");};};//扩展的事件---页面关闭后才触发的事件，IE专属//    window.onunload=function () {////    };//扩展事件---页面关闭之前触发的，IE专属//    window.onbeforeunload=function () {//      alert("哈哈");//    };</script>
</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="common.js"></script>
</body>
</html>

强化BOM的概念

BOM(Browser Object Model) 是指浏览器对象模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。

我们在浏览器中的一些操作都可以使用BOM的方式进行编程处理，

比如：刷新浏览器、后退、前进、在浏览器中输入URL等

BOM的顶级对象window

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);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//BOM中有两个定时器---计时器</script>
</head>
<body>
<input type="button" value="停止" id="btn"/>
<script>//定时器//参数1:函数//参数2:时间---毫秒---1000毫秒--1秒//执行过程:页面加载完毕后,过了1秒,执行一次函数的代码,又过了1秒再执行函数.....//返回值就是定时器的id值var timeId = setInterval(function () {alert("hello");//断言----->弹出窗口如果不点确定，不会再继续执行。}, 1000);document.getElementById("btn").onclick = function () {//点击按钮,停止定时器//参数:要清理的定时的id的值window.clearInterval(timeId);};
</script></body>
</html>

location对象

location对象是window对象下的一个属性，时候的时候可以省略window对象

location可以获取或者设置浏览器地址栏的URL

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官网
成员
- assign()/reload()/replace()
- hash/host/hostname/search/href……

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>//对象中的属性和方法//location对象//console.log(window.location);//    //地址栏上#及后面的内容//    console.log(window.location.hash);//    //主机名及端口号//    console.log(window.location.host);//    //主机名//    console.log(window.location.hostname);//    //文件的路径---相对路径//    console.log(window.location.pathname);//    //端口号//    console.log(window.location.port);//    //协议//    console.log(window.location.protocol);//    //搜索的内容//    console.log(window.location.search);onload=function () {document.getElementById("btn").onclick=function () {//设置跳转的页面的地址//location.href="http://www.jd.com";//属性----------------->必须记住//location.assign("http://www.jd.com");//方法//location.reload();//重新加载--刷新//location.replace("http://www.jd.com");//没有历史记录};};</script>
</head>
<body>
<input type="button" value="显示效果" id="btn"/></body>
</html>

history对象

back()
forward()
go()

history.html:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<input type="button" value="跳转" id="btn1">
<input type="button" value="前进" id="btn2">
<script src="common.js"></script>
<script>//跳转my$("btn1").onclick=function () {window.location.href="test.html";};//前进my$("btn2").onclick=function () {
window.history.forward();};
</script>
</body>
</html>

test.html:

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body>
<input type="button" value="后退" id="btn">
<script src="common.js"></script><!--注意你的js文件在哪？找对它的路径-->
<script>my$("btn").onclick=function () {window.history.back();};
</script>
</body>
</html>

这个方法用的不多，因为浏览器上有。

navigator对象

userAgent

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

platform

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

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>title</title><script>通过userAgent可以判断用户浏览器的类型console.log(window.navigator.userAgent);//通过platform可以判断浏览器所在的系统平台类型.//console.log(window.navigator.platform);</script>
</head>
<body></body>
</html>

案例：

摇起来：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>img{width: 200px;height: 200px;}div{position: absolute;}</style>
</head>
<body>
<input type="button" value="摇起来" id="btn1">
<input type="button" value="停止" id="btn2">
<div id="dv"><img src="img/heihei.jpg" alt=""><img src="img/lyml.jpg" alt="">
</div>
<script src="common.js"></script>
<script>//点击按钮摇起来my$("btn1").onclick=function () {//定时器setInterval(function () {//随机数var x=parseInt(Math.random()*100+1);var y=parseInt(Math.random()*100+1);//抖动位移量my$("dv").style.left=x+"px";my$("dv").style.top=y+"px";},10);};
</script>
</body>
</html>

亮晶晶

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>div{width: 600px;height: 600px;background-color: black;border: 2px solid yellow;position: relative;}span{font-size: 30px;color: yellow;position: absolute;}</style>
</head>
<body>
<input type="button" value="亮起来" id="btn">
<div id="dv"></div>
<script src="common.js"></script>
<script>my$("btn").onclick=function () {setInterval(function () {my$("dv").innerHTML="<span>★</span>"//随机数var x=parseInt(Math.random()*600+1);var y=parseInt(Math.random()*600+1);my$("dv").firstElementChild.style.left=x+"px";my$("dv").firstElementChild.style.top=y+"px";},10);};
</script>
</body>
</html>

总结

本期学习到此结束

前端学习从入门到高级全程记录之25（webapi）相关推荐

前端学习从入门到高级全程记录之1 （HTML基础知识）
本次学习目标掌握HTML的基本知识,能够写出简单的页面. 1. 开发工具 1.浏览器(chrome(谷歌浏览器),IE浏览器,火狐浏览器,QQ浏览器等等). 2.代码编辑器(sublime,HBui ...
前端学习从入门到高级全程记录之41 （PHP基础Ⅳ）
学习目标本期接上期内容继续学习php基础知识. HTTP 1. 概要 1.1. 定义 HTTP(HyperText Transfer Protocol,超文本传输协议)最早就是计算机与计算机之间沟通 ...
前端学习从入门到高级全程记录之16（CSS高级技巧）
本期目标本期我们继续学习一些CSS的高级技巧. 1.CSS W3C 统一验证工具 CssStats 是一个在线的 CSS 代码分析工具,可以分析你写的代码到底好不好,哪里出错. 网址是: http: ...
前端学习从入门到高级全程记录之8 （PS基本使用综合案例）
本期学习目标本期我们将学习PS的基本使用并且运用以前所学的CSS和HTML的技术来完成一个综合案例. 1.Photoshop基本使用早在第一期我就让大家去安装PS,不知道安装了没有,没有安装的尽快 ...
前端学习从入门到高级全程记录之12 （CSS高级技巧）
学习目标本期主要学习字体,内容较少.下一期我们将做一个京东的项目,用到的知识将会非常多,非常的有综合性. 1.Web字体字体格式不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格 ...
前端学习从入门到高级全程记录之11 （云道页面例子后续）
本期目标本期学习的主要目标是:1.前几期"云道页面例子"的完善.2.CSS高级技巧的学习 1.云道页面完善在前2期的云道案例中,我们完成了一半的布局,后面的内容需要用到定位等知 ...
前端学习从入门到高级全程记录之35（jQuery②）
学习目标本期继续学习jQuery,引入的jQuery文件用的还是上一期的. 1.jQuery操作样式 1.1 css操作功能:设置或者修改样式,操作的是style属性  设置单个样式 //nam ...
前端学习从入门到高级全程记录之13 （京东项目一）
学习目的本期将会学习一个京东项目,综合知识非常多.首先我们要先了解一下这个项目的知识. 1.京东项目(一) 项目名称:京东网项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 项目背景 ...
前端学习从入门到高级全程记录之39 （PHP基础Ⅱ）
学习目标本期我们将继续学习php的相关知识,在了解了上一期的PHP的一些基本语法和方法,接下来就是实战做做小例子.如果还不会配置php的运行环境的,可以参考我的上一期内容.如果上一期内容看不懂的,可 ...

前端学习从入门到高级全程记录之25（webapi）