jQuery入口函數(shù)

jQuery與JavaScript加載模式對(duì)比

• 多個(gè)window.onload只會(huì)執(zhí)行一次, 后面的會(huì)覆蓋前面的

<script>
        window.onload = function () {
            alert("hello lnj1"); // 不會(huì)顯示
        }
        window.onload = function () {
            alert("hello lnj2"); // 會(huì)顯示
        }
</script>

• 多個(gè)$(document).ready()會(huì)執(zhí)行多次,后面的不會(huì)覆蓋前面的

<script>
        $(document).ready(function () {
            alert("hello lnj1"); //會(huì)顯示
        });
        $(document).ready(function () {
            alert("hello lnj2"); // 會(huì)顯示
        });
</script>

• 不會(huì)覆蓋的本質(zhì)(了解,后面jQuery原理會(huì)詳細(xì)講解)
  • jQuery框架本質(zhì)是一個(gè)閉包,每次執(zhí)行我們都會(huì)給ready函數(shù)傳遞一個(gè)新的函數(shù),不同函數(shù)內(nèi)部的數(shù)據(jù)不會(huì)相互干擾

<script>
        // 相當(dāng)于這樣寫
        var test1 = function () {
            alert("hello lnj1");
        }
        var test2 = function () {
            alert("hello lnj2");
        }
        $(document).ready(test1);
        $(document).ready(test2);
</script>

<script>
        var test3 = function () {
            var abc = "123";
//            因?yàn)樵谕粋€(gè)函數(shù)中,所以456覆蓋123
//            var abc = "456"; 
            alert(abc);
        }
        test3();
        var test4 = function () {
            // 因?yàn)樵诓煌瘮?shù)中,所以不會(huì)影響
            var abc = "456"; 
            alert(abc);
        }
        test4();
</script>

• 為什么我們能訪問(wèn)$符號(hào)?

  • 因?yàn)?符號(hào)jQuery框架對(duì)外暴露的一個(gè)全局變量

• JavaScript中如何定義一個(gè)全局變量?

• 所有全局變量是 window 對(duì)象的屬性

        function test () {
            var customValue = 998;
            alert(customValue);
//            1.沒(méi)有如下代碼customValue就不是一個(gè)全局變量,函數(shù)執(zhí)行完畢之后
//            customValue會(huì)被自動(dòng)釋放,test函數(shù)以外的地方訪問(wèn)不到customValue
//            2.加上如下代碼之后customValue就會(huì)變成一個(gè)全局變量,函數(shù)執(zhí)行完畢也不
//            會(huì)被釋放,test函數(shù)以外的地方可以訪問(wèn)customValue
//            window.customValue = customValue;
        }
        test();
        alert(customValue);

• 所以jQuery框架源碼實(shí)現(xiàn)

window.jQuery = window.$ = jQuery;

• 所以想要使用jQuery框架只有兩種方式,一種是通過(guò)$,一種是通過(guò)jQuery

• jQuery入口函數(shù)的其它編寫方式如下

<script>
        // 方式一
        $(document).ready(function () {
            alert("hello lnj");
        });
        // 方式二
        $(function () {
            alert("hello lnj");
        });
        // 方式三
        jQuery(document).ready(function () {
            alert("hello lnj");
        });
        // 方式四
        jQuery(function () {
            alert("hello lnj");
        });
</script>

解決$符號(hào)沖突問(wèn)題

• 為什么是window.jQuery = window.$ = jQuery;,而不是window.jQuery = jQuery;

  • jQuery框架之所以提供了jQuery訪問(wèn)還提供$訪問(wèn),就是為了提升開發(fā)者的編碼效率

• $符號(hào)沖突怎么辦?

  • 很多js的框架都提供了類似jQuery這樣的便捷訪問(wèn)方式,所以很有可能某一天我們?cè)谑褂枚鄠€(gè)框架的時(shí),多個(gè)框架作者提供的便捷訪問(wèn)方式?jīng)_突(A框架通過(guò)$訪問(wèn),B框架也通過(guò)$訪問(wèn))

• ***釋放$使用權(quán)

  • 當(dāng)便捷訪問(wèn)符號(hào)發(fā)生沖突時(shí),我們可以釋放$使用權(quán), 釋放之后只能使用jQuery

<script>
        // 在使用jQuery之前指定自定義符號(hào)
        jQuery.noConflict();
        // 使用 jQuery
        jQuery("div p").hide();
        // 使用其他庫(kù)的 $()
        $("content").style.display = 'none';
</script>

• 自定義便捷訪問(wèn)符號(hào)
  • 當(dāng)便捷訪問(wèn)符號(hào)發(fā)生沖突時(shí),我們可以自定義便捷訪問(wèn)符號(hào)

<script>
        // 在使用jQuery之前指定自定義符號(hào)
        var nj = jQuery.noConflict();
        // 和使用$一樣通過(guò)自定義符號(hào)調(diào)用jQuery
        nj(function () {
            alert("hello lnj");
        });
</script>