当前位置: 首页>开发笔记>正文

前端學習從入門到高級全程記錄之25(webapi)

前端學習從入門到高級全程記錄之25(webapi)

學習目標

本期繼續學習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>

總結

本期學習到此結束

https://www.zydui.com/af7c0V28CDQ9VAl8G.html
>

相关文章:

  • IQVIA醫藥咨詢隨筆雜談
  • 爬取英雄聯盟英雄皮膚數據
  • 英雄聯盟 連接服務器失敗 請檢查您的網絡 是否啟用修復程序進行修復,英雄聯盟玩不了,提示未知的directx錯誤...
  • 三位千萬富翁告訴你:錢是怎么賺來的
  • 芳香之城傳奇的美麗神話故事
  • Solid Converter PDF注冊碼
  • 修改linux下面的字符集
  • 30個不可思議的好玩又實用的HTML5移動應用
  • 安卓新出病毒幽靈推,回顧android歷史上的那些吸費病毒
  • 游戲編程技術貼:AI設計的若干規則闡述
  • mac啟動自動運行程序_什么啟動了,為什么在我的Mac上運行?
  • 什么是UserEventAgent,它為什么在Mac上運行?
  • 蔚來汽車新財報超預期,短期或難盈利互聯網造車行不通嗎?
  • 車行的進貨問題
  • spring BeanFactory 家族介紹
  • 地址家族/名字解析
  • VS中怎么調出資源方案管理器
  • 告別低效工作,幫你重新找回工作的掌控感
  • 從Mac連接Windows共享打印機(1)
  • c4d流體插件_Cinema 4D 流體模擬插件 TurbulenceFD C4D v1.0 Build 1425 Win64
  • 經典生活總結語錄(搞笑欣賞)
  • 項目打包打的是什么包_早安打工人是什么梗,朋友圈打工人文案語錄表情包!...
  • 前端學習從入門到高級全程記錄之25(webapi)
  • 中職計算機應用普測考試試題及答案,2017職稱計算機考試WPS_Office檢測練習及答案9...
  • 微型計算機的主板又稱為,供電設計比7999元的主板還猛,ROG M11A主板首次亮相
  • webStorm使用斷點
  • 逆風翻盤?順豐大股東聯手本來集團上演O2O+B2C生鮮大戲
  • 三國志戰略版:Daniel_“坦克兵種”象兵分析
  • RISK-V品牌的中國化歷程(下)
  • 網游找call通殺方法之另辟蹊徑