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的源代码制作出来的。关键代码如下：

关键点：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指定)