jquery select插件，js select
大家好，关于jquery select插件很多朋友都还不太明白，今天小编就来为大家分享关于js select的知识，希望对各位有所帮助！
如何封装jquery插件
前言
如今做web开发，jquery几乎是必不可少的，就连vs神器在2010版本开始将Jquery及ui内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一个简单扩展Jquery对象的demo：
//sample:扩展jquery对象的方法，bold()用于加粗字体。
(function($){
$.fn.extend({"bold": function(){///<summary>
///加粗字体
///</summary>
return this.css({ fontWeight:"bold"});
}
});
})(jQuery);
调用方式：
这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。
一、jquery的插件机制
为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend()方法有一个重载。
jQuery.extend(object),一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像“类名.方法名”静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：
//扩展jQuery对象本身 jQuery.extend({"minValue": function(a, b){///<summary>
///比较两个值，返回最小值
///</summary>
return a< b? a: b;
},"maxValue": function(a, b){///<summary>
///比较两个值，返回最大值
///</summary>
return a> b? a: b;
}
});//调用
var i= 100; j= 101; var min_v=$.minValue(i, j);// min_v等于 100
var max_v=$.maxValue(i, j);// max_v等于 101
重载版本：jQuery.extend([deep], target, object1,[objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
参数
deep:可选。如果设为true，则递归合并。
target:待修改对象。
object1:待合并到第一个对象的对象。
objectN:可选。待合并到第一个对象的对象。
示例1：
合并 settings和 options，修改并返回 settings。
var settings={ validate: false, limit: 5, name:"foo"};
var options={ validate: true, name:"bar"};
jQuery.extend(settings, options);
结果：
settings=={ validate: true, limit: 5, name:"bar"}
示例2：
合并 defaults和 options,不修改 defaults。
var empty={};
var defaults={ validate: false, limit: 5, name:"foo"};
var options={ validate: true, name:"bar"};
var settings= jQuery.extend(empty, defaults, options);
结果：
settings=={ validate: true, limit: 5, name:"bar"}
empty=={ validate: true, limit: 5, name:"bar"}
这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。
jQuery.fn.extend(object)扩展 jQuery元素集来提供新的方法（通常用来制作插件）。
首先我们来看fn是什么东西呢。查看jQuery代码，就不难发现。
jQuery.fn= jQuery.prototype={
init: function( selector, context){.....};
};
原来 jQuery.fn= jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法，jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。
二、自执行的匿名函数/闭包
1.什么是自执行的匿名函数?
它是指形如这样的函数:(function{// code})();
2.疑问为什么(function{// code})();可以被执行,而function{// code}();却会报错?
3.分析
(1).首先,要清楚两者的区别:(function{// code})是表达式, function{// code}是函数声明.
(2).其次, js"预编译"的特点: js在"预编译"阶段,会解释函数声明,但却会忽略表式.
(3).当js执行到function(){//code}();时,由于function(){//code}在"预编译"阶段已经被解释过, js会跳过function(){//code},试图去执行();,故会报错;
当js执行到(function{// code})();时,由于(function{// code})是表达式, js会去对它求解得到返回值,由于返回值是一个函数,故而遇到();时,便会被执行.
另外，函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……
例如：
bootstrap框架中的插件写法：
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery);是一回事。
匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
例如：
var a=1;
(function()(){
var a=100;
})();
alert(a);//弹出 1
更多闭包和匿名函数可查看Javascript的匿名函数与自执行这篇文章。
三、一步一步封装JQuery插件
接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域，防止插件"污染"
//闭包限定命名空间(function($){
})(window.jQuery);
2.jQuery.fn.extend(object)扩展jquery方法，制作插件
//闭包限定命名空间(function($){
$.fn.extend({"highLight":function(options){//do something}
});
})(window.jQuery);
3.给插件默认参数，实现插件的功能
//闭包限定命名空间(function($){
$.fn.extend({"highLight": function(options){ var opts=$.extend({}, defaluts, options);//使用jQuery.extend覆盖插件默认参数
this.each(function(){//这里的this就是 jQuery对象
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var$this=$(this);//获取当前dom的 jQuery对象，这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});//默认参数
var defaluts={
foreground:'red',
background:'yellow'
};
})(window.jQuery);
到这一步，高亮插件基本功能已经具备了。调用代码如下：
$(function(){
$("p").highLight();//调用自定义高亮插件});
这里只能直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","测试“);
但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'});//将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return出来，和上面的代码没啥区别）
web前端怎么引用jquery省市级联插件
1.[代码]新增选择城市
$(function(){
$("#province").cityCasCade("#city").cityCasCade('select','河南省');
//or
$("#province").cityCasCade("#city").cityCasCade('select','河南省','开封市');
}
/**
*javadiqye
*城市数据时从网上Copy的
*级联功能也是参考网上已做好的思路
*封装成插件为了以后使用方便
*add增加选中城市方法select
*/
(function($){
$.fn.cityCasCade=function(operation,province,city){
varselectCity=null,params=null,overparams=null;
if(typeofoperation=="string"){
if(operation=="select"){
if(province){
$(this).find("option").each(function(){
if($(this).val()==province){
this.selected=true;
$(this).change();
if(city){
$($.fn.cityCascadeParam.selectCity).find("option").each(function(){
if($(this).val()==city){
this.selected=true;
$(this).change();
}
});
}
}
});
}
return$(this);
}
selectCity=operation;
}
else{
if(operation.selector)selectCity=operation.selector;
if(operation.overide&&operation.data)overparams=operation.data;
elseparams=operation.data;
}
$.fn.cityCascadeParam={};
$.fn.cityCascadeParam.data=_provinces_;
$.fn.cityCascadeParam.selectCity=null;
if(selectCity)$.fn.cityCascadeParam.selectCity=selectCity;
elsethrow"城市选择器不能为空";
$.fn.cityCascadeParam.cityValue=$($.fn.cityCascadeParam.selectCity+":first").val();
$.fn.cityCascadeParam.cityText=$($.fn.cityCascadeParam.selectCity+":first").text();
if(overparams)$.fn.cityCascadeParam.data=overparams;
else$.extend($.fn.cityCascadeParam.data,params);
$.fn.cityCascadeParam.loadProvince=function(self){
for(varpin$.fn.cityCascadeParam.data){
varopt=document.createElement("option");
opt.innerHTML=p;
opt.value=p;
self.appendChild(opt);
}
}
$.fn.cityCascadeParam.loadCity=function(parent){
varself=$($.fn.cityCascadeParam.selectCity).get(0);
if(!self)throw"未找到城市下拉框城市选择器>>"+$.fn.cityCascadeParam.selectCity;
varselectProvince=$(parent).val();
if(selectProvincein$.fn.cityCascadeParam.data){
varcitys=$.fn.cityCascadeParam.data[selectProvince];
self.innerHTML="";
for(varindex=0;index<citys.length;index++){
opt=document.createElement("option");
opt.innerHTML=citys[index];
opt.value=citys[index];
self.appendChild(opt);
}
}else{
self.innerHTML="";
opt=document.createElement("option");
opt.innerHTML=$.fn.cityCascadeParam.cityText;
opt.value=$.fn.cityCascadeParam.cityValue;
self.appendChild(opt);
}
}
this.each(function(){
$.fn.cityCascadeParam.loadProvince(this);
$(this).change(function(){
$.fn.cityCascadeParam.loadCity(this);
});
});
return$(this);
}
})($);
var_provinces_={四川省:["成都市","自贡市","攀枝花市","泸州市","德阳市","绵阳市","广元市","遂宁市","内江市","乐山市","南充市","眉山市","宜宾市","广安市","达州市","雅安市","巴中市","资阳市","阿坝藏族羌族自治州","甘孜藏族自治州","凉山彝族自治州"],山西省:["太原市","大同市","阳泉市","长治市","晋城市","朔州市","晋中市","运城市","忻州市","临汾市","吕梁市"],内蒙古:["呼和浩特市","包头市","乌海市","赤峰市","通辽市","鄂尔多斯市","呼伦贝尔市","巴彦淖尔市","乌兰察布市","兴安盟","锡林郭勒盟","阿拉善盟"],辽宁省:["沈阳市","大连市","鞍山市","抚顺市","本溪市","丹东市","锦州市","营口市","阜新市","辽阳市","盘锦市","铁岭市","朝阳市","葫芦岛市"],吉林省:["长春市","吉林市","四平市","辽源市","通化市","白山市","松原市","白城市","延边朝鲜族自治州"],黑龙江省:["哈尔滨市","齐齐哈尔市","鸡西市","鹤岗市","双鸭山市","大庆市","伊春市","佳木斯市","七台河市","牡丹江市","黑河市","绥化市","大兴安岭地区"],上海:["上海"],江苏省:["南京市","无锡市","徐州市","常州市","苏州市","南通市","连云港市","淮安市","盐城市","扬州市","镇江市","泰州市","宿迁市"],浙江省:["杭州市","宁波市","温州市","嘉兴市","湖州市","绍兴市","金华市","衢州市","舟山市","台州市","丽水市"],安徽省:["合肥市","芜湖市","蚌埠市","淮南市","马鞍山市","淮北市","铜陵市","安庆市","黄山市","滁州市","阜阳市","宿州市","巢湖市","六安市","亳州市","池州市","宣城市"],福建省:["福州市","厦门市","莆田市","三明市","泉州市","漳州市","南平市","龙岩市","宁德市"],江西省:["南昌市","景德镇市","萍乡市","九江市","新余市","鹰潭市","赣州市","吉安市","宜春市","抚州市","上饶市"],山东省:["济南市","青岛市","淄博市","枣庄市","东营市","烟台市","潍坊市","济宁市","泰安市","威海市","日照市","莱芜市","临沂市","德州市","聊城市","滨州市","菏泽市"],河南省:["郑州市","开封市","洛阳市","平顶山市","安阳市","鹤壁市","新乡市","焦作市","濮阳市","许昌市","漯河市","三门峡市","南阳市","商丘市","信阳市","周口市","驻马店市"],湖北省:["武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","咸宁市","随州市","恩施土家族苗族自治州"],湖南省:["长沙市","株洲市","湘潭市","衡阳市","邵阳市","岳阳市","常德市","张家界市","益阳市","郴州市","永州市","怀化市","娄底市","湘西土家族苗族自治州"],广东省:["广州市","韶关市","深圳市","珠海市","汕头市","佛山市","江门市","湛江市","茂名市","肇庆市","惠州市","梅州市","汕尾市","河源市","阳江市","清远市","东莞市","中山市","潮州市","揭阳市","云浮市"],广西省:["南宁市","柳州市","桂林市","梧州市","北海市","防城港市","钦州市","贵港市","玉林市","百色市","贺州市","河池市","来宾市","崇左市"],海南省:["海口市","三亚市"],重庆市:["重庆"],贵州省:["贵阳市","六盘水市","遵义市","安顺市","铜仁地区","黔西南布依族苗族自治州","毕节地区","黔东南苗族侗族自治州","黔南布依族苗族自治州"],云南省:["昆明市","曲靖市","玉溪市","保山市","昭通市","丽江市","思茅市","临沧市","楚雄彝族自治州","红河哈尼族彝族自治州","文山壮族苗族自治州","西双版纳傣族自治州","大理白族自治州","德宏傣族景颇族自治州","怒江傈僳族自治州","迪庆藏族自治州"],西藏自治区:["拉萨市","昌都地区","山南地区","日喀则地区","那曲地区","阿里地区","林芝地区"],陕西省:["西安市","铜川市","宝鸡市","咸阳市","渭南市","延安市","汉中市","榆林市","安康市","商洛市"],甘肃省:["兰州市","嘉峪关市","金昌市","白银市","天水市","武威市","张掖市","平凉市","酒泉市","庆阳市","定西市","陇南市","临夏回族自治州","甘南藏族自治州"],青海省:["西宁市","海东地区","海北藏族自治州","黄南藏族自治州","海南藏族自治州","果洛藏族自治州","玉树藏族自治州","海西蒙古族藏族自治州"],宁夏自治区:["银川市","石嘴山市","吴忠市","固原市","中卫市"],新疆自治区:["乌鲁木齐市","克拉玛依市","吐鲁番地区","哈密地区","昌吉回族自治州","博尔塔拉蒙古自治州","巴音郭楞蒙古自治州","阿克苏地区","克孜勒苏柯尔克孜自治州","喀什地区","和田地区","伊犁哈萨克自治州","塔城地区","阿勒泰地区"],台湾省:["台北市"],香港特区:["香港"],澳门特区:["澳门"],河北省:["石家庄","唐山","秦皇岛","张家口","承德","廊坊","邯郸","邢台","保定","沧州","衡水"]};
layer插件select选中默认值的方法
在Layer插件中，设置Select选中默认值的方法如下：
直接设置Select的值：
使用jQuery的.val方法直接设置Select元素的值。例如，$.val;，其中#city是Select元素的ID，"天剑山"是希望选中的值。更新Select的渲染：
在设置了Select的值之后，需要调用form.render或form.render来刷新Select选择框的渲染。这一步是必要的，因为Layer插件的表单模块在初始化后不会自动监听DOM的变化，所以需要手动刷新来确保UI的正确显示。详细设置过程：
可以通过遍历Select下的所有option元素，手动设置selected属性，并移除其他option元素的selected属性。这种方法虽然繁琐，但在某些特殊情况下可能会更有用。更新Layer插件渲染的虚拟DOM元素。这包括更新Select旁边的div元素中的input和dd元素，以确保它们的显示与Select的实际值一致。这一步通常不需要手动进行，因为form.render已经包含了这些逻辑。但如果你需要更深入地理解Layer插件的渲染机制，可以参考这种方法。重点内容：设置值：$.val;刷新渲染：form.render;或 form.render;
这样，你就可以在Layer插件中成功设置Select的默认值并使其在页面上正确显示。
END，本文到此结束，如果可以帮助到大家，还望关注本站哦！