Web 前端 注意知識點
阿新 • • 發佈：2018-12-30
一. 前端使用技巧：
1. button的用法。在使用按鈕時可以自由在內設定style屬性，來改變形態。可以給予type=sbumit提交屬性。
2. 各種使用符號：
1 # <!--小於 大於 & 版權所有標誌 註冊商標 TM--> 2 <div><</div> 3 <div>></div> 4 <div>&</div> 5 <div>©</div> 6 <div>®</div> 7<div>™</div>
3. <img>標籤：
1 # <!--本地引入 相對路徑 alt影象的替代文字--> 2 <img src="img/a.jpg" alt="小男孩的圖片">
4. <a>標籤：
1 # <!--超連結--> 2 <a href="http://www.baidu.com">百度</a> 3 <a href="http://www.baidu.com" target="_blank">新的開啟</a> 4 <a href="#">返回頂部</a> 5 <!--用於重新整理或點選--> 6 <a href="javascript:void (0)">死連結</a>
5. input標籤的型別與屬性：
1 # <!--submit 把表單資料提交到 web伺服器 reset重置--> 2 <input type="submit" value="提交"> <input type="reset"value="重置">
6. 在select 下拉框中：
* option： 表示下拉選項的數量。
* selected： 表示下拉框的選中。
7. <a>標籤的四種狀態：
* link : 未訪問過的樣式。
* visited：訪問過後的樣式。
* hover：劃過的樣式。
* active：啟用的樣式。
8. align標籤的使用：
在表格或佈局中，可以給予align標籤為左或者右的屬性，會自由想左或者右浮動。
9. outline:none; 用來清除背景與邊框之間細微的顏色。
10。 四大定位屬性：
* static：預設屬性
* relative：相對定位
* absdute：絕對定位
* fixed：固定定位
11. javaScript的兩種列印：
* console.log(str)：控制檯列印
* alert( " 陌影 " )：彈窗列印
12. js修改文字的兩種方式：
1 # // 獲取元素賦值給變數 2 # // 宣告符 變數 訪問作用 獲取ID名為text的元素 3 var Text = document.getElementById('text'); 4 # // 列印純文字資訊，會把標籤過濾掉 復給str 5 var str = Text.innerText; 6 # // 列印資訊 7 console.log(str) 8 #// 更改文字資訊 9 Text.innerText='哈哈' 10 11 # // innerHTML 列印，包括標籤和文字資訊a 12 var str1 = Text.innerHTML; 13 # // 列印資訊 14 console.log(str1) 15 # // 更改資訊 16 Text.innerHTML = '軒轅'
13. js的六大事件：
* onclick：單擊事件
* ondblclick：雙擊事件
* onmouseenter：滑鼠劃入事件
* onmouseleave：滑鼠劃出事件
* onresize：視窗變化
* onchange：改變下拉框
1 <a href="javascript:void(0)" class="btn">按鈕</a> 2 <label for="add">請選擇地區</label> 3 <select name="add" id="add"> 4 <option value="1">軒轅</option> 5 <option value="1">慕容</option> 6 <option value="1">歐陽</option> 7 <option value="1">上官</option> 8 </select> 9 <!--獲取按鈕--> 10 <script> 11 var btn = document.querySelector('.btn') 12 btn.onclick = function () { 13 console.log('單擊'); 14 }; 15 btn.onbdlclick = function () { 16 console.log('雙擊666'); 17 }; 18 btn.onmouseenter = function () { 19 console.log('移入'); 20 }; 21 btn.onmouseleave = function () { 22 console.log('移出'); 23 }; 24 var add = document.getElementById('add'); 25 add.onchange = function () { 26 console.log('下拉變化'); 27 }; 28 window.onresize = function () { 29 console.log('視窗變化'); 30 }; 31 </script>
14. this 表示當前的元素或標籤。
15. 標籤分兩種，一種是合法標籤，一種是自定義標籤。示例：
1 <button class="btn btn-primary" id="submit" data-user-id="{{ user.id }}">修改</button> 2 # jQ 獲取標籤內的自定義資料 3 var user_id = $(this).attr("data-user-id");
16. 在js中檢視元素的型別：typeof( );
js中返回元素的長度用：length( );
17. 利用js進行css的屬性樣式修改：
1 <div id="box"></div> 2 <script> 3 var box = document.getElementById('box'); 4 box.style.width = "200px"; 5 box.style.height = "120px"; 6 box.style.marginTop = "20px"; 7 box.style.marginLeft = "auto"; 8 </script>
18. 利用js進行屬性操作：
1 <div id="box" class="box1" name="軒轅"></div> 2 3 <script> 4 # // 操作標籤屬性 5 var box = document.getElementById('box'); 6 alert(box.id); 7 # // 修改ID 8 box.id = "add"; 9 alert(box.className); 10 # // 修改class 11 box.className = 'a'; 12 # // setAttribute在這裡是設定的意思 13 box.setAttribute('hello','晚上好'); 14 # // 修改標籤屬性值 15 16 </script>
19. js中簡單的資料型別：
1 <script> 2 # <!--基本的資料型別--> 3 # // string 4 var name = 'hallo'; 5 alert (typeof name) 6 7 # // 數字 8 var age = 18; 9 alert(typeof age); 10 11 # // 布林 12 var a = false; 13 alert(typeof a); 14 15 # // undefined 未定義 16 var b; 17 alert(typeof b); 18 19 # // 空資料 20 var c = null; 21 alert(typeof c); 22 23 # // 物件資料 24 var arr= [1,2,3,4,5]; 25 alert(typeof arr); 26 27 var arr1 ={gander:"nan","age":18}; 28 alert(typeof arr1); 29 30 # // 在這裡加括號的作用是呼叫，函式不算資料型別 31 var box = function () { 32 alert("gander"+"的"); 33 }(); 34 alert(typeof box); 35 </script>
20. js配合button修改標籤內容：
1 <h1>我的第一段 JavaScript</h1> 2 <p id="demo"> 3 JavaScript 能改變 HTML 元素的內容。 4 </p> 5 <script> 6 function myFunction() 7 { 8 x=document.getElementById("demo"); // 找到元素 9 x.innerHTML="Hello JavaScript!"; // 改變內容 10 } 11 </script> 12 <button type="button" onclick="myFunction()">點選這裡</button>\
21. js配合button修改元素：
1 <p id="demo"> 2 JavaScript 能改變 HTML 元素的樣式。 3 </p> 4 <script> 5 function myFunction() 6 { 7 x=document.getElementById("demo") // 找到元素 8 x.style.color="#ff0000"; // 改變樣式 9 } 10 </script> 11 <button type="button" onclick="myFunction()">點選這裡</button>
22. js語法：
1 <p id="demo"></p> 2 <script> 3 var x, y, z; 4 x = 5 5 y = 6; 6 z = (x + y) * 10; 7 document.getElementById("demo").innerHTML = z; 8 9 --------------------------------------------------------------------------------------------------------------------- 10 11 <h1>我的 Web 頁面</h1> 12 <p id="demo">一個段落。</p> 13 <div id="myDIV">一個 DIV。</div> 14 <script> 15 document.getElementById("demo").innerHTML="你好 Dolly"; 16 document.getElementById("myDIV").innerHTML="你最近怎麼樣?"; 17 </script> 18 19 # 函式可傳參，呼叫 20 <p id="demo"></p> 21 <script> 22 var x = function (a, b) {return a * b}; 23 document.getElementById("demo").innerHTML = x(4, 3); 24 25 #函式的呼叫 26 <p id="demo"></p> 27 <script> 28 function myFunction(a, b) { 29 return a * b; 30 } 31 document.getElementById("demo").innerHTML = myFunction(10, 2); 32 </script> 33 34 # 函式可作為值呼叫但需要有retuen鍵 35 <script> 36 function myFunction(a, b) { 37 return a * b; 38 } 39 var x = myFunction(4, 3); 40 document.getElementById("demo").innerHTML = x; 41 </script>
23. <s> 標籤可作為刪除鍵用：
1 <p><s>我的車是藍色的。</s></p> 2 <p>我的新車是銀色的。</p>
【js語法修改內容】：
1.修改元素內容
1 <h1 id="header">Old Header</h1> 2 3 <script> 4 var element=document.getElementById("header"); 5 element.innerHTML="New Header"; 6 </script> 7 2.修改圖片內容 8 <img id="image" src="smiley.gif"> 9 10 <script> 11 document.getElementById("image").src="landscape.jpg"; 12 </script>
【js語法】：
1 1.修改元素的變數 2 <button onclick="getElementById('demo').innerHTML=Date()">現在的時間是?</button> 3 <p id="demo"></p> 4 5 2.修改自身的變數(this自身元素的作用就是利用) 6 <body> 7 <button onclick="this.innerHTML=Date()">現在的時間是?</button> 8 </body>
【javascript:void(0) 含義】：
1 1.超連結 2 <body> 3 <a href="javascript:void(0)">單此處什麼也不會發生</a> 4 </body> 5 6 2.用於警告，彈窗 7 <body> 8 <a href="javascript:void(alert('Warning!!!'))">點我!</a> 9 </body>
【事件】：
1 1.從事件處理器呼叫一個函式 2 <script> 3 function changetext(id){ 4 id.innerHTML="Ooops!"; 5 } 6 </script> 7 </head> 8 <body> 9 10 <h1 onclick="changetext(this)">點選文字!</h1> 11 12 </body> 13 14 2.移入移出時觸發 15 <body> 16 <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="width:120px;height:20px;padding:40px;">Mouse Over Me</div> 17 <script> 18 function mOver(obj){ 19 obj.innerHTML="Thank You" 20 } 21 function mOut(obj){ 22 obj.innerHTML="Mouse Over Me" 23 } 24 </script> 25 26 3.點選觸發事件 27 <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="width:90px;height:20px;padding:40px;">Click Me</div> 28 <script> 29 30 function mDown(obj) 31 { 32 obj.style.backgroundColor="#1ec5e5"; 33 obj.innerHTML="Release Me" 34 } 35 36 function mUp(obj) 37 { 38 obj.style.backgroundColor="#D94A38"; 39 obj.innerHTML="Thank You" 40 } 41 </script>
【計時事件】：
1 1.定時器 2 <p>單擊按鈕每3秒出現一個“Hello”警告框。</p> 3 <p>再次點選警告框，經過3秒出現新的警告框，這將一直執行 ...</p> 4 <button onclick="myFunction()">點我</button> 5 <script> 6 function myFunction(){ 7 setInterval(function(){alert("Hello")},3000); 8 } 9 </script> 10 11 2.顯示一個時鐘 12 <p>在頁面顯示一個時鐘</p> 13 <p id="demo"></p> 14 <script> 15 setInterval(function(){myTimer()},1000); 16 function myTimer(){ 17 var d=new Date(); 18 var t=d.toLocaleTimeString(); 19 document.getElementById("demo").innerHTML=d; 20 } 21 myTimer(); 22 </script>
【date時間物件】：
1.時間物件的命令
1 toDateString() 把 Date 物件的日期部分轉換為字串。 2 toISOString() 使用 ISO 標準返回字串的日期格式。 3 toJSON() 以 JSON 資料格式返回日期字串。 4 toLocaleDateString() 根據本地時間格式，把 Date 物件的日期部分轉換為字串。 5 toLocaleTimeString() 根據本地時間格式，把 Date 物件的時間部分轉換為字串。 6 toLocaleString() 據本地時間格式，把 Date 物件轉換為字串。 7 toString() 把 Date 物件轉換為字串。 8 toTimeString() 把 Date 物件的時間部分轉換為字串。 9 toUTCString() 根據世界時，把 Date 物件轉換為字串。 10 UTC() 根據世界時返回 1970 年 1 月 1 日 到指定日期的毫秒數。
36. 在checkbox複選框中checked用來表示選中與不選中。