从零玩转jQuery-入口函数

简介: jQuery入口函数jQuery与JavaScript加载模式对比多个window.onload只会执行一次, 后面的会覆盖前面的 window.

jQuery入口函数

jQuery与JavaScript加载模式对比

  • 多个window.onload只会执行一次, 后面的会覆盖前面的
<script>
        window.onload = function () {
            alert("hello lnj1"); // 不会显示
        }
        window.onload = function () {
            alert("hello lnj2"); // 会显示
        }
</script>
  • 多个$(document).ready()会执行多次,后面的不会覆盖前面的
<script>
        $(document).ready(function () {
            alert("hello lnj1"); //会显示
        });
        $(document).ready(function () {
            alert("hello lnj2"); // 会显示
        });
</script>
  • 不会覆盖的本质(了解,后面jQuery原理会详细讲解)
    • jQuery框架本质是一个闭包,每次执行我们都会给ready函数传递一个新的函数,不同函数内部的数据不会相互干扰
<script>
        // 相当于这样写
        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";
//            因为在同一个函数中,所以456覆盖123
//            var abc = "456"; 
            alert(abc);
        }
        test3();
        var test4 = function () {
            // 因为在不同函数中,所以不会影响
            var abc = "456"; 
            alert(abc);
        }
        test4();
</script>
window.onload $(document).ready()
执行时机 必须等待网页全部加载完毕(包括 图片等),然后再执行包裹代码 只需要等待网页中的DOM结构 加载完毕,就能执行包裹的代码
执行次数 只能执行一次,如果第二次,那么 第一次的执行会被覆盖 可以执行多次,第N次都不会被上 一次覆盖
简写方案 $(function () { });

  • 为什么我们能访问$符号?

    • 因为$符号jQuery框架对外暴露的一个全局变量
  • JavaScript中如何定义一个全局变量?

  • 所有全局变量是 window 对象的属性

        function test () {
            var customValue = 998;
            alert(customValue);
//            1.没有如下代码customValue就不是一个全局变量,函数执行完毕之后
//            customValue会被自动释放,test函数以外的地方访问不到customValue
//            2.加上如下代码之后customValue就会变成一个全局变量,函数执行完毕也不
//            会被释放,test函数以外的地方可以访问customValue
//            window.customValue = customValue;
        }
        test();
        alert(customValue);
  • 所以jQuery框架源码实现
window.jQuery = window.$ = jQuery;
  • 所以想要使用jQuery框架只有两种方式,一种是通过$,一种是通过jQuery

  • jQuery入口函数的其它编写方式如下
<script>
        // 方式一
        $(document).ready(function () {
            alert("hello lnj");
        });
        // 方式二
        $(function () {
            alert("hello lnj");
        });
        // 方式三
        jQuery(document).ready(function () {
            alert("hello lnj");
        });
        // 方式四
        jQuery(function () {
            alert("hello lnj");
        });
</script>

解决$符号冲突问题

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

    • jQuery框架之所以提供了jQuery访问还提供$访问,就是为了提升开发者的编码效率
  • $符号冲突怎么办?

    • 很多js的框架都提供了类似jQuery这样的便捷访问方式,所以很有可能某一天我们在使用多个框架的时,多个框架作者提供的便捷访问方式冲突(A框架通过$访问,B框架也通过$访问)
  • ***释放$使用权

    • 当便捷访问符号发生冲突时,我们可以释放$使用权, 释放之后只能使用jQuery
<script>
        // 在使用jQuery之前指定自定义符号
        jQuery.noConflict();
        // 使用 jQuery
        jQuery("div p").hide();
        // 使用其他库的 $()
        $("content").style.display = 'none';
</script>
  • 自定义便捷访问符号
    • 当便捷访问符号发生冲突时,我们可以自定义便捷访问符号
<script>
        // 在使用jQuery之前指定自定义符号
        var nj = jQuery.noConflict();
        // 和使用$一样通过自定义符号调用jQuery
        nj(function () {
            alert("hello lnj");
        });
</script>
相关文章
|
6月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
4月前
|
JavaScript 前端开发
jQuery的作用及入口函数
jQuery的作用及入口函数
27 1
|
6月前
|
JavaScript 前端开发
jQuery 常用函数解析
jQuery 常用函数解析
|
6月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
130 0
|
7月前
|
JavaScript 前端开发 索引
【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
【5月更文挑战第2天】【Web 前端】jQuery 里的 each() 是什么函数?你是如何使用它的?
|
7月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
7月前
|
JavaScript
jQuery自定义动画-第8次课-animate-stop函数-附案例
jQuery自定义动画-第8次课-animate-stop函数-附案例
47 0
|
7月前
|
JavaScript 前端开发
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
jQuery特效函数-第7次课-show、hide等方法有动画效果的显示和隐藏一个元素-附案例-任务
57 0
|
7月前
|
JavaScript 前端开发
jQuery的入口函数
jQuery的入口函数
42 0
|
JavaScript 数据安全/隐私保护