jQuery绑定方法

Posted 2022-11-28 hy96

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery绑定方法相关的知识，希望对你有一定的参考价值。

 流程
/***
     * 1.文件命名
     *      jquery.banner.1.0.0.js
     *      jquery.banner.js
     * 2、添加匿名函数
     *      (function())()
     * 3、给插件前后添加;
     *      ;(function())();
     * 4、开启严格模式 --- 代码的严谨性 ----- 但不是必须
     *      ‘use strict‘;
     * 5、给匿名函数传入jQuery
     *      ;(function($))(jQuery);
     * 6、给插件中jQuery绑定适用的方法
     * 
     * 7、开发功能
     * */

绑定的6种方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>给jquery绑定方法</title>
</head>
<body>
    
</body>
<script src="../../jquery.js"></script>
<script>
    /***
     * 1.文件命名
     *      jquery.banner.1.0.0.js
     *      jquery.banner.js
     * 2、添加匿名函数
     *      (function())()
     * 3、给插件前后添加;
     *      ;(function())();
     * 4、开启严格模式 --- 代码的严谨性 ----- 但不是必须
     *      ‘use strict‘;
     * 5、给匿名函数传入jQuery
     *      ;(function($))(jQuery);
     * 6、给插件中jQuery绑定适用的方法
     * 
     * 7、开发功能
     * */

     // 1、使用对象形式，给jQuery绑定了一个  全局  的方法  如:$.cookie()
      jQuery.test = function () 
          console.log(‘测试‘)
      
      $.test();

    // 2、使用对象形式，给jQuery绑定一个  局部 (DOM)  的方法  如:$(‘form‘).validate()
//     jQuery.fn 局部
     jQuery.fn.test = function () 
         console.log(‘局部测试‘)
     ;
     $().test();

    // $.extend() 的第一个参数是目标 对象，会将后面的对象或者方法合并到第一个中
    // https://www.runoob.com/jquery/misc-extend.html
     var data1 =  a: 1 ;
     var data2 =  b: 2 ;
     var data3 = $.extend(data1, data2)
     var data4 = $.extend(, data1, data2)
     console.log(data1) //  a: 1, b: 2
     console.log(data2) //  b: 2 
     console.log(data3) //  a: 1, b: 2
     console.log(data4)

    // 3、使用jq中的$.extend() 扩展自己的函数 --- 全局的方法 -- 2个参数
     $.extend($, 
         test: function () 
            console.log(‘$.extend() 扩展自己的函数‘)
         
     )
     $.test()

    // 4、使用jq中的$.extend() 扩展自己的函数 --- 局部的方法 - DOM -- 2个参数
     $.extend($.fn, 
         test: function () 
            console.log(‘$.extend() 扩展自己的函数‘)
         
     )
     $().test()
    
    // $.extend(target, obj1, obj2...)
    //  如果只为$.extend()指定了一个参数，则意味着参数target被省略。
    // 此时，target就是jQuery对象本身。通过这种方式，我们可以为全局对象jQuery添加新的函数。
    
    // 5、使用jq中的$.extend() 扩展自己的函数 -- 全局
     $.extend(
         test () 
             console.log(‘test‘)
         
     )
     $.test();

    // $.fn.extend() 如果只有一个参数，会把该对象合并到 $.fn中
    // 6、使用jq中的$.extend() 扩展自己的函数 -- 局部
    $.fn.extend(
        test () 
            console.log(‘fn-test‘)
        
    );

    $().test()

    /***
     * 总结
     *  最常见的给jquery绑定方法的是 
     *      第 5 + 6 种
     * 
     *  全局
     *      $.extend()
     *  局部
     *      $.fn.extend()
     * */

</script>
</html>

以上是关于jQuery绑定方法的主要内容，如果未能解决你的问题，请参考以下文章

jquery如何绑定Load事件到一个元素上

jQuery实现获取绑定自定义事件元素的方法