码迷,mamicode.com
首页 > Web开发 > 详细

jQuery绑定方法

时间:2019-09-24 12:21:02      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:misc   文件   fun   指定   extend   插件   func   font   for   

 流程
/*** * 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绑定方法

标签:misc   文件   fun   指定   extend   插件   func   font   for   

原文地址:https://www.cnblogs.com/hy96/p/11577319.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!