編寫jQuery外掛程式（三）——三個外掛程式例子

標籤：style   blog   io   color   ar   使用   sp   strong   div   

封裝jQuery對象方法的外掛程式

表格隔行變色外掛程式

CSS部分：

.even{    background:#CCC;}.odd{    background:#666;}.selected{    background:#F90;}

DOM結構：

<table id="table1"><tbody><tr><th>選擇</th><th>姓名</th><th>性別</th></tr><tr><td><input type="checkbox" checked="checked" /></td><td>小明</td><td>男</td></tr><tr><td><input type="checkbox" /></td><td>小花</td><td>女</td></tr><tr><td><input type="checkbox" /></td><td>小紅</td><td>女</td></tr><tr><td><input type="checkbox" /></td><td>小華</td><td>男</td></tr></tbody></table>

 

外掛程式部分：

;(function(){    $.fn.extend({        "alterBgColor":function(options){            //設定預設值            options=$.extend({                odd:"odd",                even:"even",                selected:"selected"            },options);            $("tbody>tr:odd",this).addClass(options.odd);            $("tbody>tr:even",this).addClass(options.even);            $("tbody>tr",this).click(function(){                //判斷是否被選中                var isSelected=$(this).hasClass(options.selected);//返回布爾值，判斷是否已被選中                //如果被選中就移出selected類，否則加上selected類                $(this)[isSelected?"removeClass":"addClass"](options.selected)//removeClass(myclass)或者addClass(myclass)                //尋找內部的checkbox，設定對應的屬性                .find(‘:checkbox‘).attr(‘checked‘,!isSelected);//v1.7.1正常，v1.11.1經測試在IE9及以上版本點擊複選框外的地方，checkbox不能交替選擇            });            //如果單選框預設情況下是選擇的，則高亮            $(‘tbody>tr:has(:checked)‘,this).addClass(options.selected);            return this;    //返回this,使方法可鏈            }    });    })(jQuery);

外掛程式使用：

$("#table1").alterBgColor()                        //應用外掛程式            .find("th").css("color","red");        //可以鏈式操作

封裝jQuery全域函數的外掛程式

去除左側和右側的空格

外掛程式部分：

;(function($){
 $.extend({
  ltrim:function(text){
   return (text||"").replace(/^\s+/g),"";
  },
  rtrim:function(text){
   return (text||"").replace(/\s+$/g,"");
  }
 });
})(jQuery);

外掛程式使用：

alert(jQuery.trim("  Hello  ")+jQuery.ltrim("   World")+jQuery.rtrim("!    "));

 

自訂選取器

 jQuery的選擇符解析器首先會使用一組Regex來解析選取器，然後針對解析出的每個選擇符執行一個函數，稱為選取器函數。最後根據這個選取器函數的傳回值為true還是false來決定是否保留這個元素。這樣就可以找到匹配的元素節點。

between選取器，如使用$("div:between(2,5)")能實現擷取索引值為3、4元素的功能。

DOM結構：

<div style="background:red">0</div><div style="background:blue">1</div><div style="background:green">2</div><div style="background:yellow">3</div><div style="background:gray">4</div><div style="background:orange">5</div>

外掛程式定義：

;(function($){    $.extend(jQuery.expr[":"],{        /*　　　　　選取器僅僅是jQuery.expr[":"]對象的一部分，同時也是一個Object對象，因此可以直接利用jQuery.extend()對其擴充
        a指向當前遍曆到的DOM元素        i指的是當前遍曆到的DOM元素的索引值，從0開始        m，由jQuery正則解析引擎進一步解析後的產物（用match匹配出來），是一個數組        以$("div:gt(1)")為例：        m[0],指:gt(1)        m[1]，指":",即冒號。當然並非只能使用“：”後面跟上選取器，使用者可以自訂其他的選擇引導符        m[2]，指gt，確定選取器選取器函數        m[3],指數字“1"        m[4],如果是div:l(ss(dd))這樣一個選取器，m[4]指向(dd)這部分，注意是帶括弧的(dd)，此時的m[3]的值是ss(dd)而非ss        */        between:function(a,i,m){            var tmp=m[3].split(",");//將傳遞進來的m[3]以逗號為分隔字元，切成一個數組            return tmp[0]<i&&i<tmp[1];        }    });})(jQuery);

外掛程式應用：

$(function(){    $("div:between(2,5)").css("background","white");//經測試jquery v1.11.1版本不支援})

 

編寫jQuery外掛程式（三）——三個外掛程式例子