jquery插件編寫：文本框?qū)崿F(xiàn)下拉框效果

(function?($)?{//jquery插件編寫中，不能假設(shè)$是有效的，因此，使用這種包裝函數(shù)，使得在下面的代碼中可以繼續(xù)寫$,對于這個函數(shù)的分析，可以具體看下面的分析。?????$.fn.beDropdownlist?=?function?(data,?fn)?{//?$.fn對象是$.prototype的別名，使用fn為了簡潔。??????????//默認值?????????var?defaults?=?{?????????????data:?['nothing']?????????}??????????var?options?=?{?data:?data?};?????????options?=?$.extend(defaults,?options);?//使得參數(shù)覆蓋??????????var?bindevent?=?function?(o)?{?????????????var?tmpid?=?"tmpselector_"?+?$(o).attr("id");?//生成臨時的id?????????????if?($("#"?+?tmpid).length?>?0)?????????????????return;?//退出，不在繼續(xù)下去??????????????var?data?=?options.data;?//數(shù)據(jù)源??????????????//此處style中設(shè)置為absolute?????????????var?html?=?"";?????????????//動態(tài)生成一個div，內(nèi)含li元素?????????????for?(var?item?in?data)?{?????????????????html?+=?"
"?+?data[item]?+?"
";?????????????}?????????????html?+=?"

?

jQuery.beDropdownlist_demo.html

?

???????????????????????????????$(function?()?{?????????????var?city?=?["上海",?"北京",?"西安",?"哈爾濱",?"廣州",?"深圳",?"清遠",?"韶關(guān)",?"河源",?"梅州",?"潮州",?"汕頭",?"揭陽",?"汕尾",?"惠州",?"東莞",?"珠海",?"?中山",?"江門",?"佛山",?"肇慶",?"云浮",?"陽江",?"茂名",?"湛江"];?????????????$("#txtCity").beDropdownlist(city,?function?()?{?alert($("#txtCity").val())?});?????????????//$("#txtCity").beDropdownlist(city);?????????????var?country?=?["中國",?"日本",?"美國",?"德國"];?????????????$("#txtCountry").beDropdownlist(country);?????????});??????????????????
?????
?????國家：?????城市：??

?

編寫jquery有幾點注意：

$.fn對象是$.prototype的別名，使用fn為了簡潔。

options = $.extend(defaults, options); 使得參數(shù)覆蓋，該函數(shù)的具體說明可以參考jQuery手冊。

由于jquery的選擇符可能匹配多個對象，所以需要用each，對每個匹配的元素做操作。

jquery插件編寫中，不能假設(shè)$總是是有效的，因此，使用包裝函數(shù)，使得在下面的代碼中可以繼續(xù)寫$。

包裝函數(shù)的形式如下：

?

(function?($)?{??????????????})(jQuery);

?

?

該方式使用的是一種匿名函數(shù)的方式，傳入的參數(shù)是jQuery，函數(shù)體內(nèi)部仍然用$符合作為jQuery對象，因此很方便，與之等價的寫法其實就是：

?

var?baozhuanghanshu=function?($)?{???//具體實現(xiàn)?}?baozhuanghanshu(jQuery)

?

?

也就是說，上面的jquery插件也可以采用這種寫法，直接調(diào)用baozhuanghanshu即可。甚至可以把$寫成$my$作為jQuery。如下：

?

var?baozhuanghanshu=function?(?$my$?)?{?//具體實現(xiàn)????????}?baozhuanghanshu(jQuery)

但是一般遵循約定，包裝方法都是寫成

(function ($) {

?})(jQuery);

這種形式，有利于不同程序員的閱讀。