jQuery扩展插件、自调用函数、多库共存、onload和ready的区别

本文详细介绍了如何扩展jQuery库，包括使用$.extend()和$.fn.extend()创建自定义插件。此外，讨论了自调用函数的应用，并解释了在多库共存情况下如何利用jQuery.noConflict()避免$符号冲突。最后，对比了window.onload与$(document).ready()的区别，强调了它们在页面加载时机和回调处理上的差异。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、jQuery扩展插件
- 1.扩展jQuery库
二、自调用函数
三、多库共存
四、onload和ready的区别

一、jQuery扩展插件

jquery满足不了项目需求但是我又想用jquery,可以依托于jquery 自己扩展插件。
1 扩展jQuery的工具方法
$.extend(object)
2 扩展jQuery对象的方法
$.fn.extend(object)

1.扩展jQuery库

创建一个my-jQuery-plugins.js文件，代码如下：

/*
扩展jQuery的工具方法: $.extend(object)
    * min(a,b) 返回较小的值
    * max(a,b) 返回较大的值
    * leftTrim() 去除字符串左边的空格
    * rightTrim() 去除字符串右边的空格
*/ 

// 扩展$
$.extend({
    min:function(a,b){
        return a>b?b:a
    },
    max:function(a,b){
        return a>b?a:b
    },
    // ^ 表示以什么打头
    // $ 表示以什么结尾
    // \n表示空格
    // + 表示多个
    leftTrim:function(str){
        return str.replace(/^\s+/,"")//将以空格开头的多个空格换成""(空)
    },
    rightTrim:function(str){
        return str.replace(/\s+$/,"")//将以空格结尾的多个空格换成""(空)
    }
})
// 扩展方法 $("#id").xxx
$.fn.extend({
    checkAll:function(){
        this.prop("checked",true)
    },
    unCheckAll:function(){
        this.prop("checked",false)
    },
    reverseChecked:function(){
        this.each(function(){
            this.checked=!this.checked
        })
    },
})

在html文件中引入后就可以使用，代码如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <!-- jquery满足不了项目需求 但是我又想用jquery,依托于jquery 自己造轮子  -->
    <!-- 
      1 扩展jQuery的工具方法
        $.extend(object)
      2 扩展jQuery对象的方法
        $.fn.extend(object)
     -->

     <input type="checkbox" name="items" value="足球">足球
     <input type="checkbox" name="items" value="乒乓球">乒乓球
     <input type="checkbox" name="items" value="篮球">篮球
     <input type="checkbox" name="items"  value="羽毛球" >羽毛球
     <br/>
     <input type="button" id="checkAllBtn" value="全选">
     <input type="button" id="unCheckAllBtn" value="全不选">
     <input type="button" id="reverseCheckedBtn" value="反选">
     <script src="./js/jquery-1.11.3.js"></script>
     <script src="./js/my-jQuery-plugins.js"></script>
    <script>
        // 1 给$添加四个工具方法
        //     * min(a,b) 返回较小的值
        //     * max(a,b) 返回较大的值
        //     * leftTrim() 去除字符串左边的空格
        //     * rightTrim() 去除字符串右边的空格

        console.log($.min(2,34));
        console.log($.max(2,34));
        console.log("----------------"+$.leftTrim("              xxxxxxx")+"----------------");
        console.log("----------------"+$.rightTrim("yyyyyyy              ")+"----------------");

        // 2 给jQuery对象 添加3个功能方法
        //     * checkAll()  全选
        //     * unCheckAll() 全不选
        //     * reverseCheck() 反选
        $("#checkAllBtn").click(function(){
            $(":checkbox").checkAll()
        })
        $("#unCheckAllBtn").click(function(){
            $(":checkbox").unCheckAll()
        })
        $("#reverseCheckedBtn").click(function(){
            $(":checkbox").reverseChecked()
        })
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

二、自调用函数

代码示例如下：

	<script>
        // 01 命名函数
        function add(a,b){
            return a+b;
        }
        console.log(add(5,9));
        // 02 匿名函数赋值给一个变量
        let j=function(a,b){
            return a+b
        }
        console.log(j(2,6));

        // 03 自调用函数
        (function(a,b){
            console.log(a*b);
        })(6,2)
    </script>

结果如下：
在这里插入图片描述

三、多库共存

问题: 如果有2个库都有$ 就存在冲突
解决: jQuery库可以释放$的使用权让另一个库可以正常使用此时jQuery就只能使用jQuery了
API: jQuery.noConflict()
如：自己创建了一个myLibs.js文件，js文件中代码如下:

(function(w){
    //jquery入口底层的写法
    w.$=function(){
        console.log("我是自己定义的$");
    }
})(window)

在html文件中引入，代码及遇到的问题如下代码：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
	 <script src="./js/jquery-1.11.3.js"></script>
     <script src="./js/myLibs.js"></script>
    <script>
        // console.log($);//下面引入的js的会覆盖上面引入的js

        jQuery.noConflict();// 释放$的使用权
        jQuery(function(){
            console.log("我的jQuery又可以使用了");
        })
        $();
        console.log($);
        console.log(typeof $);
    </script>
</body>
</html>

结果如下：
在这里插入图片描述

四、onload和ready的区别

区别: window.onload于 $(d o c u m e n t) . r e a d y () [$ (function(){})]
        window.onLoad
        包括页面的图片加载完毕后才会回调(晚)
        只有一个监听回调

        $(document).ready()
        等同于 $(function(){})
        页面加载完毕就回调(不等图片加载了)
        可以有多个监听回调

代码示例如下：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <title>Document</title>
</head>
<body>
    <div></div>
    <!-- 
     区别: window.onload于 $(document).ready() [$(function(){})]
       * window.onLoad
       * 包括页面的图片加载完毕后才会回调(晚)
       * 只有一个监听回调

       * $(document).ready()
       * 等同于 $(function(){})
       * 页面加载完毕就回调(不等图片加载了)
       * 可以有多个监听回调
     -->
     <script src="./js/jquery-1.11.3.js"></script>
    <script>
        window.onload=function(){
            console.log("我是第一个onload");
        }
        // 第二个window.onload会覆盖第一个
        window.onload=function(){
            console.log("我是第二个onload");
        }

        $(function(){
            console.log("我是第一个$(document).ready()");
        })
        $(function(){
            console.log("我是第一个$(document).ready()");
        })
    </script>
</body>
</html>