jQuery学习之一：下拉框辅助类制作

      最近在学习jQuery，趁有空，利用jQuery制作了一些辅助类。共写了两个东东，一个是select的辅助类，另外一个是checkbox的辅助类。
      辅助类的设计要达到的效果，如下：
      

// 获取被选中的option的Text：
var  s  =  $s( " #ddlSupplier " ).selectedText()
// 获取被选中的option的Value：
var  s  =  $s( " #ddlSupplier " ).selectedValue()
// 获取被选中的option的Index：
var  s  =  $s( " #ddlSupplier " ).selectedIndex();

// 选中Text为"上海"的option
$s( " #ddlSupplier " ).setSelectedText(“上海”);
// 选中Value为"1"的option
$s( " #ddlSupplier " ).setSelectedValue(“ 1 ”);
// 选中Index为"-1"的option
$s( " #ddlSupplier " ).setSelectedIndex( - 1 );

      为了符合C#的代码风格，我把辅助类设置成上面那样（没错，我是DropdownList迷。- -b）。$这个符号很眼熟吧。没错。就是jQuery的符号，$s则是按照jQuery的源代码制作出来的。关键代码如下：

( function () {
     var  sQuery  =  window.sQuery  =  window.$s  =   function (selector) {
         //  The sQuery object is actually just the newInstance constructor 'enhanced'
         return   new  prototypeManager.newInstance(selector);
    };
     var  prototypeManager  =  { newInstance:  function () { } };
    sQuery.prototype  =  {
        jSelect:  null ,
        init:  function (selector) {
             this .jSelect  =  $(selector);
             return   this ;
        },
         // 省略SelectedValue,setSelectedIndex等方法
    };
     //  Give the newInstance function the sQuery prototype for later instantiation
    prototypeManager.newInstance  =  sQuery.prototype.init;
    prototypeManager.newInstance.prototype  =  sQuery.prototype;
})();

 

关键点：1、var sQuery = window.sQuery = window.$s用于定义sQuery,$s等对象。
           2、prototypeManager.newInstance 方法设置为 init方法，把sQuery.prototype赋给prototypeManager.newInstance.prototype。这样newInstance方法就能创建出以sQuery.prototype为原型的对象。
           3、由new prototypeManager.newInstance()来创建实例。

最后附上源代码：

// Create By Stephen Huang.
// 2009-08-13
// This is a jQuery plugin for <select>

( function () {

     var  
     //  Will speed up references to window, and allows munging its name.
    window  =   this ,

    sQuery  =  window.sQuery  =  window.$s  =   function (selector) {
         //  The sQuery object is actually just the newInstance constructor 'enhanced'
         return   new  prototypeManager.newInstance(selector);
    };
    
    var  prototypeManager  =  { newInstance:  function () { } };
    sQuery.prototype  =  {
        jSelect:  null,  // 缓存当前jquery对象
        init:  function (selector) {
             this .jSelect  =  $(selector);
             return   this ;
        },
         // Getters
        selectedText:  function () {
             return   this .jSelect.find( " option:selected " ).text();
        },
        selectedValue:  function () {
             return   this .jSelect.val();
        },
        selectedIndex:  function () {
             return   this .jSelect.get( 0 ).selectedIndex;
        },
         // Setters
        setSelectedText:  function (text) {
             var  options  =   this .jSelect.find( " option " );
             for  ( var  i  =   0 ; i  <  options.size(); i ++ ) {
                 var  option  =  options.eq(i);
                 if  (option.text()  ==  text) {
                    option.attr( " selected " ,  " selected " );
                     break ;
                }
            }
        },
        setSelectedValue:  function (value) {
             this .jSelect.find( " option[value=' "   +  value  +   " '] " ).attr( " selected " ,  " selected " );
        },
        setSelectedIndex:  function (index) {
             // get funtion return DOM Object while eq funtion return jQuery Object
             this .jSelect.get( 0 ).selectedIndex  =  index;
        }
    };
     //  Give the newInstance function the sQuery prototype for later instantiation
    prototypeManager.newInstance  =  sQuery.prototype.init;
    prototypeManager.newInstance.prototype  =  sQuery.prototype;
})();

 

 -----------------------------------------------------------------------------------------------------
一段时间后，把这个东西做成了插件，主要是用上$.fn.extend的插件机制。(由于是只针对单个实现select的，使用时selector只能用id指定)

Code
//Create By Stephen Huang.
//2009-08-13
//This is a jQuery plugin for <select>

; (function($) {

    $.fn.extend({
         //Getters
        GetSelectedText: function() {
            return this.find("option:selected").text();
        },
        GetSelectedValue: function() {
            return this.val();
        },
        GetSelectedIndex: function() {
            return this.get(0).selectedIndex;
        },
        //Setters
        SetSelectedText: function(text) {
            var $options = this.find("option");
            for (var i = 0; i < $options.size(); i++) {
                var $option = $options.eq(i);
                if ($option.text() == text) {
                    $option.attr("selected", "selected");
                    break;
                }
            }
        },
        SetSelectedValue: function(value) {
            this.find("option[value='" + value + "']").attr("selected", "selected");
        },
        SetSelectedIndex: function(index) {
            //get funtion return DOM Object while eq funtion return jQuery Object
            this.get(0).selectedIndex = index;
        }
    });

})(jQuery);