<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>JQquery擴(kuò)展插件測(cè)試</title>
  <script type = "text/javascript" src="jquery-1.7.2.min.js"> </script>
  <style type = "text/css">
   .a{
    background:#ccc;
   }
   .b{
    background:#555;
   }
  </style>
  <script type = "text/javascript">
  //1.對(duì)象級(jí)別的擴(kuò)展 jQuery.fn是jQuery.prototype的別名
  // 注意:在對(duì)象方法內(nèi)，關(guān)鍵字this引用的是一個(gè)jQuery對(duì)象，但在每次調(diào)用的.each()方法中，this引用的是一個(gè)dom元素（所以each內(nèi)部要用jQuery包裝this,而在return后面，直接調(diào)用jQuery對(duì)方法.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.類級(jí)別的擴(kuò)展
   //1).直接添加：為jQuery對(duì)象添加全局函數(shù)
   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(){}
   })
  </script>
 </head>
 <body>
  <h1 id = "h1" class = "a">JQuery擴(kuò)展測(cè)試</h1>
 </body>
</html>

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: