控制css

控制語句寫在js檔案入口函式中，每條語句結束後加;號

改變盒子內的標籤內容：.innerHTML=“可以寫標籤內容了”

<script>
        window.onload=function () {
            document.getElementById("d1").style.color="red";
            document.getElementById("d1").style.fontSize="20px";
           document.getElementById("d1").style.
 
textDecoration="overline underline";

        }
    </script>

變數的定義與使用

變數的命名規範符合識別符號，在js中喜歡大駝峰命名規範，公司則使用gongsiming_jyp_bianliang

變數定義 var 變數名 = 值

<script>
        window.onload = function () {
            var oD1 = document.getElementById("d1");
            oD1.style.fontSize="100px";
 

            oD1.style.fontStyle="italic";
            oD1.style.fontWeight="bold";
        }

    </script>

檢查變數型別

<script>
        window.onload=function () {
          var jin = 123;
          var yi = "123";
          var ping = null;
          var shi = true;
          var shazi;
 

          alert(typeof(jin));
          alert(typeof(yi));
          alert(typeof(ping));
          alert(typeof(shi));
          alert(typeof(shazi));
        }

    </script>

函式的定義與使用

定義：function 函式名(引數){

執行語句1;

執行語句2;

}

呼叫：函式名(引數)

<script>
        function add(num1,num2) {
            var result = num1 + num2
            alert(result)
        }
        add(18,12)
    </script>

條件判斷

定義：if(條件1){

執行語句1;

}

if else(條件2){

執行語句2;

}

if else(條件3){

執行語句3;

}

else{

執行語句4;

}

與=

== 只判斷數值大小 ===不僅判斷數值大小還判斷資料型別

選擇元素

document.getElementById(“id名”)

document.getElementByClassName(“class名”)

使用類名確定選取物件一定在變數後面加[0]確定位置

document.getElementByTagName(“標籤名”)

常見事件

onclick 滑鼠點選 onmouseover滑鼠暫停 onmouseout 滑鼠滑過

1.定義變數獲取物件

2.繫結事件=匿名匿名函式

3.匿名函式中寫執行語句，注意;號

<script>
        window.onload=function () {
            var oBtn1 = document.getElementById("btn1");
            var oBtn2 = document.getElementById("btn2");
            var oBtn3 = document.getElementById("btn3");
            oBtn1.onclick = function () {
                alert("ok")
            };
            oBtn2.onmouseover = function () {
                alert("ok")
            };
            oBtn3.onmouseout = function () {
                alert("ok")
            };
        }
    </script>

網頁換膚

1.確定變數對應按鈕物件

2.變數選定link—css的檔案物件

3.繫結事件，更換css檔案的路徑，

列印名片

1.定義多個變數拿到多個input位置

2.拿到input的value的值

3.繫結單擊事件的按鈕

4.替換html的內容，拼接字串

5.判斷是否輸入 return

6.更換風格，路徑不同