jQueryプラグイン拡張テストの例

この例では、jQueryプラグインの拡張テスト方法について説明します.皆さんの参考にしてください.具体的には以下の通りです.

 
  
  
   
  
  
  //1.  jQuery.fn jQuery.prototype 
  //  : ， this jQuery ， .each() ，this dom （ each jQuery this, return ， jQuery .each()）
  (function($){
   $.fn.toggleClass = function(options){
    return this.each(function(){
     var opts = $.extend({},$.fn.toggleClass.defaults,options);
     var $element = $(this);
     if($element.hasClass(opts.class1)){
      $element.removeClass(opts.class1).addClass(opts.class2);
     }else if($element.hasClass(opts.class2)){
      $element.removeClass(opts.class2).addClass(opts.class1);
     }
    })
   }
   $.fn.toggleClass.defaults = {
    class1:"",
    class2:""
   }
   $.fn.setBorder = function(){
    return this.each(function(){
     $(this).css("border","1px solid red");
    })
   }
  })(jQuery);
  $(function(){
   var opts = {
     class1:"a",
     class2:"b"
    }
   $("h1").click(function(){
    $("h1").toggleClass(opts).setBorder();
   })
  })
  //2. 
   //1). ： jQuery 
   jQuery.sum = function(array){
    var total = 0;
    jQuery.each(array,function(idx,num){
     total += num;
    })
    return total;
   }
   //2). extend ：
   jQuery.extend({
    fn1:function(){},
    fn2:function(){}
   })
  
 
 
  
JQuery テスト
 

jQueryの関連内容についてもっと興味のある読者は、「jQuery拡張テクニックまとめ」、「jQuery常用プラグインと使い方まとめ」、「jQueryドラッグ特効とテクニックまとめ」、「jQuery表(table)操作テクニックまとめ」、「jqueryにおけるAjax使い方まとめ」、「jQueryよくある経典特効まとめ」、「jQueryアニメーションと特効使い方まとめ」、「jqueryセレクタ使い方まとめ」
本文で述べたことが皆さんのjQueryプログラム設計に役立つことを望んでいます.