1. 程式人生 > >Web 前端 注意知識點

Web 前端 注意知識點

一.  前端使用技巧:

  1. button的用法。在使用按鈕時可以自由在內設定style屬性,來改變形態。可以給予type=sbumit提交屬性。

  2. 各種使用符號:

1 # <!--小於  大於  &  版權所有標誌   註冊商標   TM-->
2   <div>&lt;</div>
3   <div>&gt;</div>
4   <div>&amp;</div>
5   <div>&copy;</div>
6   <div>&reg;</div>
7
  <div>&trade;</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用來表示選中與不選中。