2018年前端年末小結

阿新 • • 發佈：2018-12-25

前言：2018年即將接近尾聲，現對前端基礎做一個小結與鞏固。

【一、HTML+CSS】：

<!DOCTYPE html>

<html>
<head>

<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="#"/>

</head>
<body>

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

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

2018年前端年末小結

2018年前端年末小結

兩年前端問題小結

2018年前端面試總結

2018年前端筆試高頻題精選（二）

2018年前端筆試高頻題精選（一）

2018年前端技術總結

2018年前端開發回顧

2018年前端開發校招面試總結

我的2018年【年末總結】

年薪30W，2018年前端發展趨勢分析

2018年前端流行哪些技術？

在2018年，我要24歲了，在最好的年華，我遇到最棒的前端

2018年一名合格的web前端程序員應該會哪些技術

【異周話題第 16 期】2018年，你最期待的前端開發技術有哪些？

2018年web前端學習路線圖

2018年尚矽谷《全套Java、Android、HTML5前端視頻》

最適合2018年自學的web前端零基礎系統學習視頻＋資料

ACM訓練小結-柳誌軒-2018年6月16日

2018年上半年軟件測試助教小結

2018年8月中級前端開發推薦書籍

2018年前端年末小結

相關推薦