• 理解jquery的$.extend()、$.fn和$.fn.extend()


    jQuery为开发插件提拱了两个方法,分别是: 
    jQuery.fn.extend(object); 

    jQuery.extend(object); 

    jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。 
    jQuery.fn.extend(object);给jQuery对象添加方法

    jQuery.extend()方法

     1 <div id="log"></div>
     2 <script>
     3 $(function () { 
     4     var object1 = {
     5         apple: 0,
     6         banana: {weight: 52, price: 100},
     7         cherry: 97
     8     };
     9     var object2 = {
    10         banana: {price: 200},
    11         durian: 100
    12     };
    13     /* object2 合并到 object1 中 */
    14     $.extend(object1, object2);
    15     var printObj = typeof JSON != "undefined" ? JSON.stringify : function(obj) {
    16         var arr = [];
    17         $.each(obj, function(key, val) {
    18             var next = key + ": ";
    19             next += $.isPlainObject(val) ? printObj(val) : val;
    20             arr.push( next );
    21         });
    22         return "{ " +  arr.join(", ") + " }";
    23     };
    24     $("#log").append( printObj(object1) );
    25 })
    26 </script>

    给jquery添加静态方法

     1 <span style="font-size:18px;"><html> 
     2 <head> 
     3 <title></title> 
     4 </head> 
     5 <body> 
     6 <script type="text/javascript" src="jquery.2.0.3.js"></script> 
     7 <script type="text/javascript"> 
     8 $.extend({ 
     9 add:function(a,b){return a+b;}, 
    10 minus:function(a,b){return a-b}, 
    11 multiply:function(a,b){return a*b;}, 
    12 divide:function(a,b){return Math.floor(a/b);} 
    13 }); 
    14 
    15 var sum = $.add(3,5)+$.minus(3,5)+$.multiply(3,5)+$.divide(5,7); 
    16 console.log(sum); 
    17 </script> 
    18 </body> 
    19 </html></span> 

    其他的也不一一写,中文文档

    jQuery.fn.extend()

     1 <span style="font-size:18px;"><html> 
     2 <head> 
     3 <title></title> 
     4 </head> 
     5 <body> 
     6 <h3 class="ye">new soul</h3> 
     7 <h3 class="ye">new soul</h3> 
     8 <h3 class="ye">new soul</h3> 
     9 <h3 class="ye">new soul</h3> 
    10 <script type="text/javascript" src="jquery.2.0.3.js"></script> 
    11 <script type="text/javascript"> 
    12 jQuery.fn.myPlugin = function(options) { 
    13 $options = $.extend( { 
    14 html: "no messages", 
    15 css: { 
    16 "color": "red", 
    17 "font-size":"14px" 
    18 }}, 
    19 options); 
    20 return $(this).css({ 
    21 "color": $options.css.color, 
    22 
    23 }).html($options.html); 
    24 } 
    25 
    26 
    27 $('.ye').myPlugin({html:"So easy,yes?",css:{"color":"green","font-size":"20px"}}); 
    28 </script> 
    29 </body> 
    30 </html> 
    31 </span> 

    以及这个写的很好的文章

    extend()很好用,js避不过去

  • 相关阅读:
    Nginx学习---Nginx的详解_【all】
    Nginx学习---企业级nginx环境搭建
    企业的批量分发的管理方案
    全网数据实时备份方案[inotify,sersync]
    搭建企业级全网数据定时备份方案[cron + rsync]2
    搭建企业级全网数据定时备份方案[cron + rsync]
    SSH连接不上
    ACC起来后,usb检测不到
    常用命令和配置文件位置
    Linux系统的信号详解
  • 原文地址:https://www.cnblogs.com/Cein/p/7084399.html
Copyright © 2020-2023  润新知