jquery自定义类的封装

如何用jquery自定义一个类?(demo参考)

/*简单使用*/

(function($){

 //el操纵对象,option属性值

  $.love = function(el,option){

    var lo = $(el);

    var lo.vars =  $.extend({},$.love.default ,option); //合并成新对象,则是新的属性列表

    //定义其他属性

      ......

      var method = {};

    //私有方法,私有方法之间可互相调用

    method={

      functionA: function() {...},

      functionB: function() {...},

      functionC: function() {...},

      ...

    }

    //公有方法(特权方法),供类外调用

    this.publicFunction = function(a,b,c){

      ....

      /*调用私有函数*/

      method.functionA();

      ...

    }

    ...

 }

 //可设置默认属性

 $.love.default = {

  option1:...,

  option2:...,

  ....

  }

})(jQuery);

/*类外调用*/

  var a = new $.love("#id",{title:"name",age:12,...});

  a.publicFunction(a,b,c);

/*相对高级点*/

(function($){

 //el操纵对象,option属性值

  $.love = function(el,option){

    var lo = $(el);

    var lo.vars =  $.extend({},$.love.default ,option); //合并成新对象,则是新的属性列表

    //定义其他属性

      ......

      var method = {};

    $.data(el, "love", lo); //在元素上存放数据,包括lo的所有属性,方法

    //私有方法,私有方法之间可互相调用

    method={

      functionA: function() {...},

      functionB: function() {...},

      functionC: function() {...},

      ...

    }

    //公有方法(特权方法),供类外调用

    lo.pfunctionA = function(){

      /*调用私有函数*/

      method.functionA();

    },

     lo.pfunctionB = function(){...},

    ...

 }

 //可设置默认属性

 $.love.default = {

  option1:...,

  option2:...,

  ....

  }

  $.fn.love(option){

    var $this = $(this);

    if( $this.data(‘love‘)===undefined){

     new $.love(this,option);

    }else{

      var love = $this.data(‘love‘); //直接使用类中的函数等

      love.pfunctionA();

    }

  }

})(jQuery);

$ ==> "$ "就是 jQuery 对象的引用,等于"jQuery "

(function(){}) ==>模仿块级作用域

$.xxx ==>针对 jQuery 对象添加方法(我的理解)

$.fn.xxx ==》针对元素添加方法(我的理解)

时间: 2024-08-27 06:29:45

jquery自定义类的封装的相关文章

jQuery自定义类封装:

jQuery自定义类封装: (function ($) { $.DragField = function (arg) { var name = "你好";     //这个是私有变量,外部无法访问 this.testFun = function () {     //this.testFun方法,加上了this,就是公有方法了,外部可以访问. alert(arg.title + "," + name); }; }; })(jQuery); 使用方法: var a =

jquery 自定义类

jQuery自定义类封装: (function ($) { $.DragField = function (arg) { var name = "你好"; //这个是私有变量,外部无法访问 this.testFun = function () { //this.testFun方法,加上了this,就是公有方法了,外部可以访问. alert(arg.title + "," + name); }; }; })(jQuery); 使用方法: var a = new $.D

把jQuery的类、插件封装成seajs的模块的方法

这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(function () { //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 return $.noConflict(); }); 调用方法: 这样引进就可以像以前一样使用jquery define(function (require, exports, module) { var $

jQuery自定义插件--banner图滚动

前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些核心函数来提高开发效率.我们知道, jQuery库是为了加快JavaScript的开发速度而设计的,通过简化编写JavaScript的方式,减少代码量.所以,今天就带大家了解一下jQuery自定义插件以及自定义插件案例---banner图滚动. 一.自定义插件 自定义插件一般有两种类型:全局插件和局

你的专属定制——JQuery自定义插件

    前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 那么这次,我就和大家来分享一下JQuery中的一个强大的功能--自

深入学习jQuery自定义插件

原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(options); 定义的方式: $.fn.extend({ "函数名":function(自定义参数){ //这里写插件代码 } }); //或者是 $.fn.函数名 = function(options){ //这里写插件代码 } 类级别的方法,就是扩展jQuery类本身的方法,为它增加

jquery插件开发及 jquery自定义函数

jQuery插件的开发包括两种: 一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法.jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法.下面就两种函数的开发做详细的说明. jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为

022医疗项目-模块二:药品目录的导入导出-对XSSF导出excel类进行封装

资源全部来源于传智播客. 好的架构师写的程序,就算给刚入门的新手看,新手一看就知道怎么去用.所以我们要对XSSF导出excel类进行封装.这是架构师的工作,但我们也要知道. 我们写一个封装类: 这个类单独有自己的main函数. 我们进入main函数一步一步看: public static void main(String[] args) throws Exception { /** 导出文件存放物理路径 * @param fileWebPath * 导出文件web下载路径 * @param fi

Jquery自定义扩展方法(二)--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende