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‘);

jquery写插件的几种写法总结(持续补充中)

时间: 2024-10-11 00:23:23

jquery写插件的几种写法总结(持续补充中)的相关文章

为JQuery写插件

很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成slider,比起slider($('#slider'))更贴近jQuery的链式调用写法,可读性和通用性更好些. 那么,我们也来为jQuery写插件.便于项目中的组件化. 方法是非常简单的,那就写一个测试的demo来作为基础的验证吧. 定义html,假设我们要把test div修改成宽高都是200px,背景色为

给jQuery写插件的方法

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> div div{ border:#ccc solid 1px; margin-bottom:2px;} </style> <title>无标题文档</title>

《锋利的jQuery》插件的使用和写法

jQuery插件的种类 1.封装对象方法 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式“插”在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数 可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQuery内

[系列汇总] - 二十三种设计模式(持续更新中&hellip;)

摘要 最近在读GOF的Design Patterns: Elements of Reusable Object-Oriented Software(设计模式:可复用面向对象软件的基础),学习前辈们的经验来增加自己的编码设计能力.在学习的过程中,会把我从书上学到的知识以及自己的理解写到这里.一方面能够巩固自己学到的东西同时方便以后的复习,另一方面是希望能够帮助到那些跟我一样不大了解设计模式的人. 我理解的设计模式不是一套固定的代码,更多的是一种设计理念.它能够帮助我们解决特定的设计问题,使我们的程

jQuery开发插件的两种方式

最近挺多人写jQuery的,都是关于jQuery扩展方面的,使用方面的讲的比较多,但是关于详细的一个基础的过程讲的比较少一点,做web开发的基本上都会用到jQuery,本人就根据jQuery的使用经验讲讲插件开发.jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数是属于jQuery命名空间的函数),如果将jQuery看成一个类,那么就相当于给jQuery类本身添加方法.第二种是对象扩展的方式开发插件,即jQuery对象添加方法. 类扩展

单例模式(下)---聊一聊单例模式的几种写法

在上一篇文章 单例模式(上)--如何优雅地保证线程安全问题中,我们采取了懒汉式写法来写我们的单例模式,并且重点讲解了懒汉式中线程安全的问题.这篇我们来讲讲单例模式中的其他几种写法. 上篇文章中,方法和变量的声明都忘了加上"static"的声明,这里提醒一下. 懒汉式 懒汉式在上节我们已经讲过了,直接给出代码: public class Singleton { private static volatile Singleton instance = null; private Singl

jquery星级插件、支持页面中多次使用

我从网上收集一个jquery星级插件的,它只支持一个页面中使用一次,多次使用的话会发生冲突,达不到我项目的需求,没办法,只能修改它, 效果图如下: css所需背景图片:   二话不说,帖代码: html代码 <div class="xing"> <span style="float: left">总体评价:<font color="#CC3300" size="-1">*</font&

ASP.NET MVC中获取URL地址参数的两种写法

一.url地址传参的第一种写法 1.通过mvc中默认的url地址书写格式:控制器/方法名/参数 2.实例:http://localhost:39270/RequestDemo/Index/88,默认参数名为id所以名称为id. 如果使用其他名称,后台是无法读取的会报错 二.url地址传参的第二种写法 1.使用?加参数名=参数值的写法,如果有多个参数使用&来连接 http://localhost:39270/RequestDemo/Index?id=88&name=%E5%BC%A0%E4%

第七章(插件的使用和写法)(7.6 编写 jQuery 插件)

7.6.1 插件的种类 编写插件的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护和提高开发效率. jQuery 的插件主要分为3种类型. 1 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的 jQuery 对象进行操作,是最常见的一种插件. 据不完全统计,95%以上的 jQuery 插件都是封装对象方法的插件,此类插件可以发挥出 jQuery 选择器的强大优势.有相当一部分的 jQuery 的方法,都是在 jQuery 脚本库内部通过这种