首页 > 代码库 > jquery写插件的几种写法总结(持续补充中)
jquery写插件的几种写法总结(持续补充中)
1:jQuery.fn.extend(object); 给jQuery对象添加方法。
js封装文件示例
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
HTML中的js调用
$(“#input1″).alertWhileClick();
HTML代码
<input id=”input1″ type=”text”/>
2:jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
js封装文件示例
$.extend({
add:function(a,b){return a+b;}
}); //便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
HTML中的js调用
$.add(3,4); //return 7
3:自定义的jQuery类以及类方法和类成员
js封装文件示例
(function ($) {
/* 公共插件定义 */
$.cloud_checkbox = {
// var checked_list = ""; //这个是私有变量,外部无法访问
/* checkbox全选、取消全选、反选 */
checked_all: function(table_id, name_all, name) {
/*
* table_id: checkbox所在表的id
* name_all: 负责全选的checkbox的name(仅一个)
* name: 表内需要进行全选操作的checkbox的name(一组)
*/
$("#"+table_id+" .regular-checkbox[name="+name_all+"]").click(function() {
var v = $(this).prop(‘checked‘);
$("#"+table_id+" .regular-checkbox[name="+name+"]").prop(‘checked‘,v);
$("table .regular-checkbox[name=‘table_list_check‘]").change();
});
},
/* 获取所有选中checkbox的值 */
get_checked_val: function(name) {
/*
* name: 需要获取选中值的checkbox的name(一组)
*/
var val_list = []
$(".regular-checkbox[name="+name+"]").each(function() {
if($(this).prop(‘checked‘)) {
val_list.push($(this).val());
}
});
return val_list;
},
single_checked:function(table_id, name_all, name, id){
if( !$("#"+id).attr("checked")){
$("#"+table_id+" .regular-checkbox[name="+name_all+"]").attr("checked", false);
}else{
var flag = true;
$(".regular-checkbox[name="+name+"]").each(function() {
if(!$(this).attr(‘checked‘)) {
flag = false;
$("#"+table_id+" .regular-checkbox[name="+name_all+"]").attr("checked", false);
return false;
}
});
if(flag == true){
$("#"+table_id+" .regular-checkbox[name="+name_all+"]").attr("checked", "checked");
}
}
}
};
})(jQuery);
HTML中的js调用
$.cloud_checkbox.checked_all(‘table_list‘, ‘table_list_checkall‘, ‘table_list_check‘);
var val_list = $.cloud_checkbox.get_checked_val(‘table_list_check‘);