jQuery的入口函數

原生的JS的入口函數指的是：window.onload = function(){}: 如下所示：

//原生js的入口函數。頁面上所有內容加載完畢， 才執行。
//不僅要等文本加載完畢， 而且要等圖片也加載完畢， 才執行函數。
<script type="text/javascript">
        window.onload = function () {
            alert("hello");
        }
</script>

 

而jQuery的入口函數， 有以下幾種寫法：

寫法一：

//文檔加載完畢， 圖片不加載的時候， 就可以執行這個函數。
<script type="text/javascript">
        $(document).ready(function () {
            alert("hello");
        })
</script>

寫法二：(寫法一的簡潔版)

//文檔加載完畢， 圖片不加載的時候， 就可以執行這個函數。
<script type="text/javascript">
        $(function () {
            alert("hello");
        })
</script>

寫法三：

//文檔加載完畢， 圖片也加載完畢的時候， 再執行這個函數。
<script type="text/javascript">
        $(window).ready(function () {
            alert("hello");
        })
</script>

 

jQuery入口函數和js入口函數的區別：

區別一： 書寫個數不同：

　　（1）JS的入口函數只能出現一次， 出現多次會存在事件覆蓋的問題。

　　（2）jQuery的入口函數， 可以出現任意多次， 並不存在事件覆蓋問題。 

區別二：執行時機不同：

　　（1）JS的入口函數是在所有的文件資源加載完成后， 才執行。這些文件資源包括：頁面文檔、外部的JS文件、外部的CSS文件、圖片等。 

　　（2）jQuery的入口函數， 是在文檔加載完成后就執行。 文檔加載指的是：DOM樹加載完成后， 就可以操作DOM了， 不用等到所有的外部資源都加載成功。

 

Ps： 文檔加載的順序為：從上往下， 邊解析邊執行。