js加載事件和js函數定義

時間 2019-11-08

原文原文鏈接

一 dom文檔樹加載完以後執行一個函數

在Dom加載完成後執行函數，下面這三個的做用是同樣的，
window.onload 是JavaScript的，window.onload是在dom文檔樹加載完和全部文件加載完以後執行一個函數html

$(document).ready(function (){}) 是Jquery的，dom文檔樹加載完以後執行一個函數，這個函數比 window.onload 執行的要早
而$(function(){}) 是 $(document).ready 的簡便寫法；jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>靜態網址測試首頁</title>
    <script src="resources/jquery-1.9.1.min.js" ></script>
</head>
<body>
<script>

    window.onload = function () {
        alert("Window onload");
    }


    $(document).ready( function (x){
      alert("標準方式");
    })


    $(function() {
        alert(" 沒有document的方法");
    })

</script>
</body>
</html>

View Code

二 js 函數定義的三種方式

函數表達式方式的不一樣點，必須在函數定義完成後才能夠調用，詳細例子看下面的代碼執行結果dom

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 函數定義測試</title>
</head>
<body>

<script>


    //一  經典的 函數聲明方式
    console.log(standardfun());//能夠正常打印結果  aaa
    function standardfun() {
        alert("這是一種經典寫法");
        return "aaa";
    }

    console.log(standardfun()); //能夠正常打印結果  aaa


    //二  函數表達式
    // console.log(ff()); //  打印提示錯誤 ff is not a function
    console.log(ff); //打印 undefined
    var ff = function ffs() {
        alert("函數直接量表達式");
        return "bbb";
    }
    console.log(ff())//能夠正常打印結果 bbb

    //函數表達式 ----匿名函數
    var ff1 = function () {
        alert("如今流行的寫法")
    }

    //三 使用Function的構造函數  最後一個實參所表示的文本是函數體
    console.log(sum3); //undefined
    var sum3 = new Function("num1", "num2", "return num1+num2");
    console.log(sum3(2, 3));//5
</script>
</body>
</html>