2018年前端年末小結
前言:2018年即將接近尾聲,現對前端基礎做一個小結與鞏固。
【一、HTML+CSS】:
<!-- 宣告為 HTML5 文件,不區分大小寫:<!doctype html> -->
<!DOCTYPE html>
<!-- HTML文件的字尾名可以是:.htm -->
<html>
<head>
<!-- 中文網頁需要使用 <meta charset="utf-8"> 宣告編碼 -->
<meta charset="utf-8">
<title>網頁標題</title>
<!-- 內部樣式(單一頁面對應) -->
<style type="text/css">
#div1, #div2{
width:150px; height:50px; margin:10px 0;padding:10px;border:1px solid #aaaaaa;
}
p:first-child{
background:yellow;
}
a:hover{
/* text-decoration:none; */
border: 1px solid;
padding: 5px;
border-radius: 50%;
}
</style>
<!-- 外部樣式(推薦:切換主題) -->
<link rel="stylesheet" type="text/css" href="#"/>
<!-- <script src="#" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<!-- 多數標籤是成對的:均具有四個通用屬性:id+ -->
<h1 id="abc">我的第一個標題</h1>
<p class="className" style="-moz-animation: .25s, 100ms;" title="我的第一個段落">
翻譯: <q>My first paragraph.</q><br/>
<b>粗體文字</b><br/>
<code>計算機程式碼</code><br/>
<em>強調文字</em><br<br/>/>
<i>斜體文字</i><br/>
<kbd>鍵盤輸入</kbd> <br/>
<pre>預格式化文字</pre><br/>
<small>更小的文字</small><br/>
<strong>重要的文字</strong><br/>
<abbr> (縮寫)</abbr><br/>
<address> (聯絡資訊)</address><br/>
<!-- (文字方向) -->
<p><bdo dir="rtl">該段落文字從右到左顯示。</bdo></p>
<blockquote> (從另一個源引用的部分)</blockquote><br/>
<cite> (工作的名稱)</cite><br/>
<del> (刪除的文字)</del><br/>
<ins> (插入的文字)</ins><br/>
<sub> (下標文字)</sub><br/>
<sup> (上標文字)</sup><br/>
</p>
<!-- 單標籤、塊標籤佔少數,塊標籤不會自動換行,行標籤佔一行可以轉換為塊標籤 -->
<br/>
<span>塊標籤</span>
<br/>
<!-- 對比路徑引用+去除下劃線 -->
<a href="#abc" target="_blank" style="text-decoration:none;">回到頂欄並跳轉新頁面</a>
<br/>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="#" alt="可拖拽的圖片" width="120" height="30" draggable="true" ondragstart="drag(event)"/>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<hr/>
<h6>最小的標題:<del>javascript</b></h6>
<!-- 文字框 -->
<textarea rows="10" cols="30" id="demo">我是一個文字框</textarea>
<br/>
<!-- 表單 -->
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
<button type="button" onclick="myFunction()" style="color: red;">點選按鈕</button>
<!-- 指令碼 -->
<script type="text/javascript">
//img:drag阻止預設事件+draggable允許拖拽
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);
}
//***********************************************
//div
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
function allowDrop(ev){
ev.preventDefault();
}
//點選
function myFunction(){
document.getElementById("demo").style.color="greenyellow";
alert("點選改變demo樣式")
}
</script>
<!-- 選單列表:去除點 -->
<ul style="list-style-type:none">
<li>1.專案</li>
<li>2.專案</li>
</ul>
<!-- 表格 -->
<table border="1" style="tr:nth-child(2n){background:orange;}">
<tr>
<th>表格標題</th>
<th>表格標題</th>
</tr>
<tr>
<td>表格資料</td>
<td>表格資料</td>
</tr>
</table>
<!-- 框架:如獲取某網頁資料 -->
<iframe src="demo_iframe.htm" frameborder="0" name="iframe_a"></iframe><br/>
<a href="#" target="iframe_a">點選切換框架內容</a>
<!-- 佈局:使用h5新標籤(語義元素)footer,文字© -->
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版權 © xxx.com
</div>
</body>
</html>
【2.JavaScript】:
1.HTML5新特性:web儲存
- 儲存資料:localStorage.setItem(key,value);
- 讀取資料:localStorage.getItem(key);
- 刪除單個數據:localStorage.removeItem(key);
- 刪除所有資料:localStorage.clear();
- 得到某個索引的key:localStorage.key(index);
//儲存資料 function save(){ var site = new Object; site.keyname = document.getElementById("keyname").value;//獲取表單輸入的keyname或userName site.sitename = document.getElementById("sitename").value; site.siteurl = document.getElementById("siteurl").value; var str = JSON.stringify(site); // 將物件轉換為字串,即{xxx}=>‘{xxx}’ localStorage.setItem(site.keyname,str); //【長期儲存本地資料到瀏覽器】 alert("儲存成功"); } //查詢資料 function find(){ var search_site = document.getElementById("search_site").value; var str = localStorage.getItem(search_site); //獲【取本地資料,免登陸】 var find_result = document.getElementById("find_result"); var site = JSON.parse(str); find_result.innerHTML = search_site + "的網站名是:" + site.sitename + ",網址是:" + site.siteurl; } //刪除資料 function del(name) { localStorage.removeItem(name);//【登出登陸】 alert("刪除成功!"); loadAll(); }
2.JavaScript:cookie儲存
- 設定(建立/覆蓋)cookie 值的函式,如:document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";//key:value+過期時間+cookie路徑(當前url)
- 獲取 cookie 值的函式,如:var x = document.cookie;//返回所有
- 刪除 cookie 值的函式,如:document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";//value設為空
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <head> <script> function setCookie(cname,cvalue,exdays){ var d = new Date(); d.setTime(d.getTime()+(exdays*24*60*60*1000)); var expires = "expires="+d.toGMTString(); document.cookie = cname+"="+cvalue+"; "+expires; } function getCookie(cname){ var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i].trim(); if (c.indexOf(name)==0) { return c.substring(name.length,c.length); } } return ""; } function checkCookie(){ var user=getCookie("username"); if (user!=""){ alert("歡迎 " + user + " 再次訪問"); } else { user = prompt("請輸入你的名字:",""); if (user!="" && user!=null){ setCookie("username",user,30); } } } </script> </head> <body onload="checkCookie()"></body> </html>
3.事件:常用的6個dom事件
事件 | 描述 |
---|---|
onchange | HTML 元素改變 |
onclick | 使用者點選 HTML 元素 |
onmouseover | 使用者在一個HTML元素上移動滑鼠 |
onmouseout | 使用者從一個HTML元素上移開滑鼠 |
onkeydown | 使用者按下鍵盤按鍵 |
onload | 瀏覽器已完成頁面的載入 |
【補充】:
(1-UI(使用者介面事件):當用戶與頁面的上的元素互動時發生,但不一定與使用者操作有關的事件。
load事件:當頁面載入完畢時在qindow上觸發,當影象載入完畢時在ing元素上觸發,等等,頁面完全載入完畢(包括所有影象,js檔案,css等外部檔案資源)時觸發,img只要設定了src就會下載;
unload事件:當頁面完全解除安裝時在window上觸發,當一個頁面切換到另一個頁面時就會觸發,經常利用這個事件來清除引用,減少記憶體的洩露
error:當發生js錯誤時在window上觸發,當影象無法載入時在img上觸發
abort事件:當用戶停止下載過程時,如果嵌入的內容沒有載入完成,則在object元素上觸發
select:當用戶選擇文字框(input或textarea)中的一或多個字元時觸發
resize:當視窗或框架的大小發生改變時在window上觸發
scroll:當用戶滾動帶滾動條的元素中的內容時,在該元素上觸發
(2-焦點事件:當元素獲得焦點或失去焦點時觸發
blur:失去焦點時觸發,這個事件不會冒泡
focus:獲得焦點時觸發,不冒泡
focusin:在獲得焦點時觸發,冒泡,DOM3新增
focusout:在失去焦點時觸發,冒泡
(3-滑鼠事件:當用戶通過滑鼠在頁面上執行操作時觸發
click:單擊事件,使用者單機滑鼠按鈕(一般是左鍵)或按下回車鍵時觸發
dbclick:雙擊事件,當雙擊滑鼠時觸發(一般是左鍵)
mousedown:當用戶在按下任意滑鼠按鈕時觸發
mouseup:當用戶釋放滑鼠按鈕時觸發
mouseenter:在滑鼠游標從外部首次(是指每次進入元素,並不是只執行一次)時觸發,而且這個事件不冒泡,而且在游標移到到後代元素上不會觸發(從父區域進入子區域,再從子區域進入父區域是不會觸發的,因為他認為子區域也是他的一部分),DOM3定義的
mouseleave:和mouseenter是一對,剛好相反
mousemove:當滑鼠指標在元素內部移時重複的觸發
mouseout:當滑鼠指標位於一個元素上方,然後移到到另一個元素上方時觸發,另一個元素可能是外部元素也可能是他的後代元素,因為他不認為後代元素所在的區域是他的一部分
mouseover:和mouseout是一對,恰好相反
除了mouseleave和mouseenter之外都會冒泡
click事件只有觸發了mousedown和mouseup之後才會觸發,代表click只有觸發兩次clic才會觸發,如果取消了之前的事件將會不觸發
滑鼠事件都是在瀏覽器視口中的特定位置發生的,可以通過事件的屬性獲取到。
視口區(客戶區)座標位置:clientX和clientY可以獲取到位置資訊。所有瀏覽器都支援這兩個屬性,是相對於瀏覽器的視口而不是頁面而言的,不包括位址列等
頁面座標位置:pageX和pageY,相對於頁面而言,ie8及更早版本不支援這兩個屬性,不過我們可以計算出來
event.clientX + (document.body.scrollLeft + document.documentElement.scrollLeft)
event.clientY + (document.body.scrollTop + document.documentElement.scrollTop)
螢幕座標位置:相對於整個電腦螢幕,screenX和screenY
(4-滾輪事件:當使用滑鼠滾輪(或類似事件)時觸發
mousewheel:跟蹤滑鼠滾輪或筆記本觸控板
(5-文字事件:當在文件中輸入時觸發
textinput:在文字顯示給使用者之前更容易攔截文字,是對keypress的補充
可編輯區輸入字元鍵才可以出發
ie9才支援,firefox不支援
(6-鍵盤事件:當用戶通過鍵盤在頁面上執行操作時觸發
keydown:使用者按下鍵盤上的任意鍵時觸發,而且按住不放的話,會重複觸發此事件
keypress:使用者按下鍵盤上的字元鍵時觸發,而且按住不放的話,會重複觸發此事件,按下esc也會觸發
keyup:使用者釋放鍵盤上的鍵時觸發
所有元素都支援這三個事件
keydown-》keypress-》textinput-》keyup
keyup和keydown的event有個keycoe屬性,代表鍵盤碼,與ASCII相對應
(7-合成事件:當為IME(input method editor,輸入法編輯器)輸入字元觸發
同時按下幾個鍵才能輸入一個字元
(8-變動事件:當底層DOM結構發生變化時觸發
DOM結構發生變化時觸發
(9.事件委託:本來該自己做的事情,委託給別人做。
利用的是事件冒泡原理,使用event.target獲取觸發事件的目標元素。
優點:
1- 提高效能,只需要註冊一次事件,也方便移除事件。解決事件處理程式過多的問題,在DOM樹中儘量最高的層次上新增一個事件處理程式,只指定一個事件處理程式,就可以管理某一型別的所有事件。
2- 給動態生成的元素新增事件。可以解決動態生成的子元素繫結不上事件的問題。
<button id="test">點我呀</button>
<div id="f" class="f"></div>
var test =document.getElementById('test');
var f =document.getElementById('f');
var i =0;
test.onclick=function() {
varp =document.createElement('p');
p.innerHTML= i++;
f.appendChild(p);
}
f.onclick=function(e) {
console.log(e.target.innerHTML);
}
(10.模擬事件
var e = document.createEvent(自定義事件名稱)
node.dispatchEvent(e);
new CustomEvent(事件名,資料):相容性不好
(11.其他:
form有submit事件,表單的提交最好使用submit事件,不使用onclick事件,因為不同的瀏覽器之間可能存在不同的時差,submit事件和click之間的順序不同的瀏覽器之間是不同的表單還有focus事件,blur事件,change事件select的change事件是隻有改變了選擇項就會發生,而其他表單是在值被修改且失去焦點的時候才會發生:
序列化表單:formData
var data = new formData();
data.append(名,值)
3.Windows方法:
- window.open() - 開啟新視窗
- window.document.getElementById("header");//document 也是 window 物件的屬性之一:
- window.close() - 關閉當前視窗
- window.moveTo() - 移動當前視窗
- window.resizeTo() - 調整當前視窗的尺寸
- window.innerHeight - 瀏覽器視窗的內部高度(包括滾動條)
- window.innerWidth - 瀏覽器視窗的內部寬度(包括滾動條)
- location.hostname 返回 web 主機的域名(如:kp);//可不使用 window 這個字首
- location.pathname 返回當前頁面的路徑和檔名(home/path);
- location.port 返回 web 主機的埠 (80 或 443);
- location.protocol 返回所使用的 web 協議(http:// 或 https://);
- location.href 屬性返回當前頁面的 URL。
- location.assign(url) 方法載入新的文件//替換當前原有頁面
- history.back() - 與在瀏覽器點選後退按鈕相同
- history.forward() - 與在瀏覽器中點擊向前按鈕相同
- alert("sometext");//提示
- confirm(true);//確認
- prompt("sometext","defaultvalue");//輸入確認
- setInterval("javascript function",milliseconds);//迴圈
- clearInterval(intervalVariable)
- setTimeout("javascript function", milliseconds);
- clearTimeout(timeoutVariable)
- navigator//瀏覽器資訊可被瀏覽器使用者更改
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鳥教程(runoob.com)</title> </head> <body> <div id="example"></div> <script> txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>"; txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>"; txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>"; txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>"; txt+= "<p>硬體平臺: " + navigator.platform + "</p>"; txt+= "<p>使用者代理: " + navigator.userAgent + "</p>"; txt+= "<p>使用者代理語言: " + navigator.systemLanguage + "</p>"; document.getElementById("example").innerHTML=txt; </script> </body> </html>