如何用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);

http://t.cn/RUbL4rP

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

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

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

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

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

  1. jquery 自定义类

    jQuery自定义类封装: (function ($) { $.DragField = function (arg) { var name = "你好"; //这个是私有变量,外部 ...

  2. Java中使用自定义类封装数组,添加类方法实现数据操作

    1.具体见注释 2.后续或有更新 public class MyArray { private long[] array; private int cnt; // 自定义数组类的元素个数 /** 使用 ...

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

    这篇文章主要介绍了把jQuery的类.插件封装成seajs的模块的方法,需要的朋友可以参考下 注:本文使用的seajs版本是2.1.1 一.把Jquery封装成seajs的模块 define(func ...

  4. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  5. Jquery自定义插件之$.extend()、$.fn和$.fn.extend()

    jquery插件的种类: 1.对象级别的插件开发,即给jQuery对象添加方法,封装对象方法的插件,如:parent().appendTo() 2.一种是类级别的插件开发,即给jQuery添加新的全局 ...

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

        前  言 絮叨絮叨 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗 ...

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

    前言 jQuery是一个功能强大的库,提供了开发JavaScript项目所需的所有核心函数.很多时候我们使用jQuery的原因就是因为其使用插件的功能,然而,有时候我们还是需要使用自定义代码来扩展这些 ...

  8. JQuery自定义插件详解之Banner图滚动插件

      前  言 JRedu JQuery是什么相信已经不需要详细介绍了.作为时下最火的JS库之一,JQuery将其"Write Less,Do More!"的口号发挥的极致.而帮助J ...

  9. jquery自定义插件——以 选项卡插件为例

    一直打算尝试自定义插件,终于付诸实践了,现在把内容发表出来,与大家共勉. 我是根据自己正在用的插件,模仿其源码,实现的自定义插件,完成之后,在网上看相关资料,对自定义插件部分,有了更明确的认识. jq ...

随机推荐

  1. ionic service

    当你初试 Angular 时,很自然地就会往 controller 和 scope 里堆满不必要的逻辑.一定要早点意识到,controller 这一层应该很薄:也就是说,应用里大部分的业务逻辑和持久化 ...

  2. vue 脚手架搭建新项目以及element-ui等vue组件的使用

    vue快速搭建项目(前提是你的电脑已经安装了node的环境和vue脚手架安装,不会的自行百度) 1:打开终端: 这里说下此时位置是在User下的lijuntao文件夹下面,我一般会在桌面新建一个文件夹 ...

  3. Feign二: @FeignClient 接口调用

    在项目的启动文件加入:@EnableFeignClients 注解, import org.springframework.boot.SpringApplication; import org.spr ...

  4. spring security+freemarker获取登陆用户的信息

    spring security+freemarker获取登陆用户的信息 目标页面之间获取 ${Session.SPRING_SECURITY_CONTEXT.authentication.princi ...

  5. Confluence 6 设置一个空间主页

    当你创建一个空间的时候,Confluence 将会自动为你创建的空间新建一个主页.如果你的空间是从蓝图中创建,并且蓝图中已经有一个供使用的主页了,那么这个主页将会自动从蓝图中载入有用的宏和在蓝图中指定 ...

  6. Confluence 6 空间的权限是附加的

    空间的权限是附加的.如果一个用户以个人的方式或者以一个用户组成员的方式赋予了权限,Confluence 将会把这些权限合并在一起.  下面是这个概念的示例... Sasha 是 confluence- ...

  7. 2 爬虫 requests模块

    requests模块 Requests是用python语言基于urllib编写的,采用的是Apache2 Licensed开源协议的HTTP库,Requests它会比urllib更加方便,reques ...

  8. pytorch构建自己设计的层

    下面是如何自己构建一个层,分为包含自动反向求导和手动反向求导两种方式,后面会分别构建网络,对比一下结果对不对. -------------------------------------------- ...

  9. Elsevier系旗下期刊论文投稿流程

    目录 1.上传文件需求 2.注册账号和填写相关信息 3.以作者身份登入 4.开始提交论文:点击submit New Manuscript 5.选择论文类型:一般是科技长文Full Length Art ...

  10. rsync未授权访问漏洞利用

    漏洞描述:rsync是Linux系统下的数据镜像备份工具,使用快速增量备份工具Remote Sync可以远程同步,支持本地复制,或者与其他ssh,rsync主机同步.也就是说如果你可以连接目标IP的r ...