初識js（第一篇）

標籤：開頭   完整   產生頁面   類型   href   大小   user   margin   boolean   

初識javascript

js是前端中作互動控制的語言，有了它，我們的前端頁面才能“活”起來。學好這麼語言顯得非常重要，但是存在一定難度，所以一定要認真學習，充滿耐心。

js書寫規範

1.嚴格區分大小寫
2.每一行完整的語句要用 ;
3.代碼要縮排
4.js必須用半形符號

註冊事件

document.getElementById擷取div的id，點擊發生事件

document.getElementById(‘box‘).onclick = function(){    this.innerHTML = "<h1>this is innerhtml<h1>"}

onmouseenter  onmouseover 滑鼠劃入
onmouseleave  onmouseout 滑鼠划出（配對使用）

document.getElementById(‘box‘).onmouseover = function(){            this.innerHTML = "hello!world"        }document.getElementById(‘box‘).onmouseout = function(){            this.innerHTML = " "        }

定義變數

var v_name = document.getElementById(‘id_name‘);

註：不能使用js關鍵字或保留字，可以使用字母、底線、字元、數字，但不能用數字開頭。

資料類型

1. number js的不區分整數和浮點數
2. string 字串
3. boolean true / false 布爾
4. object null 數組
5. function 函數
6. undefined 未定義

例：var a = 123;alert(typeof a)

寫入函數

document.write("hello,world!");可解析html標籤windows.onload =  function(){    document.write("寫入最後，重建頁面")；}註：window.onload作用是放在文檔流最後解析

擷取對象

擷取idvar obox = document.getElementById(‘box‘);        obox.onclick = function(){            alert(‘123‘)        }擷取classvar obox = document.getElementsByClassName(‘box‘)[2];        obox.onclick = function(){            alert(‘456‘)        }擷取標籤var obox = document.getElementsByTagName(‘div‘)[0];        obox.onmouseover = function(){            this.innerHTML = "<h1>test<h1>";        }   先擷取父級ID，然後擷取子級標籤        var obox = document.getElementById(‘box‘);        var opx = obox.getElementsByClassName(‘op‘);擷取name,在input標籤裡使用var names = document.getElementsById("user")[0];        names.value = "hello";更改id名稱        obox.id = "qwe";

js更改樣式

<style type="text/css">            *{margin:0;padding:0;}            #box{                width: 100px;                height: 100px;                background: green;                          }            .op{                border:2px solid blue;            }</style>        <div id="box"></div>    <button id="bn1">變換</button>    <button id="bn2">還原</button>    <script>        var obox = document.getElementById(‘box‘);        var onx1 = document.getElementById(‘bn1‘);        var onx2 = document.getElementsById(‘bn2‘);        onx1.onclick = function(){            obox.className = "op";        }        onx2.onclick = function(){            obox.className = "";        }    </script>

for迴圈

        for(var i=0;i<4;i++){            alert(i)        }//迴圈        for(var i=0;i<5;i++){            if(i == 2){                continue;//跳過繼續下一個            }            alert(i);        }

附：

sublime快捷文法：#box>.op*3
效果：

<div id="box">        <div class="op"></div>        <div class="op"></div>        <div class="op"></div></div>

ul>li*5>a[herf="#"]{$}

<ul>    <li><a href="#">1</a></li>    <li><a href="#">2</a></li>    <li><a href="#">3</a></li>    <li><a href="#">4</a></li>    <li><a href="#">5</a></li></ul>

初識js（第一篇）