jQuery - plugin 代码模型

1、扩展 jQuery 的全局函数,主要以 $.xxx() 的形式调用

  (function($) {

    $.myFunction = function(array) {

      // code

    }

  })(jQuery);

  在外部可以这样调用 $.myFunction(...),但是,最好把自定义的全局函数放在自己的命名空间中,如下,

  (function($) {

    $.myNameSpace = {

      sum: function(array) {

        // code

      },

      average: function(array) {

        // code

      }

    };

  })(jQuery);

  那么,在外部调用时也要添加上空间名称,$.myNameSpace.sum(...)

2、扩展 jQuery 对象的方法

  jQuery.fn 对象实际是 jQuery.Prototype 的别名,也就是说 jQuery.fn 是 jQuery 对象的原型,

  那么通过扩展 jQuery.fn 对象,也就是为 jQuery 对象添加新的方法。

(function($) {

  // 创建可在外部修改的默认值

  $.fn.shadow.defaults = {

    copies: 5,

    opacity: 0.1,

    copyOffset: function(index) {

      // code

    }

  };

    // 给 jQuery 对象添加新方法 shadow(opts)

  $.fn.shadow = function(opts) {

    var options = $.extend({}, $.fn.shadow.defaults, opts);

    // code

    ......

    // 注意:此处(方法内部)的 this 指的是调用 shadow() 方法的 jQuery 对象。

  }

)(jQuery);

那么,以上方法可以这样调用,$("p, div").shadow(...);

时间: 2024-10-10 23:29:08

jQuery - plugin 代码模型的相关文章

jQuery ui widget和jQuery plugin的实现原理简单比较

一.创建 1.  jQuery plugin (function($){ $.fn.MyPlugin=function(){ //js代码 } })(jQuery) 为了与页面上其他代码友好相处,将plugin定义在一个闭包里,MyPlugin是plugin的名字.调用方式:$('选择器').MyPlugin(); 2.  jquery ui widget (function($){ $.widget('ui.mywidget',{ options:{ //默认的配置参数 }, //方法的定义

Jquery Plugin模版

1. [代码][JavaScript]代码 01// remember to change every instance of "pluginName" to the name of your plugin!02// the semicolon at the beginning is there on purpose in order to protect the integrity03// of your scripts when mixed with incomplete obje

网页瀑布流布局jQuery实现代码

网页瀑布流布局jQuery实现代码 这篇文章主要为大家详细介绍了网页瀑布流布局jQuery实现方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 什么是瀑布流网页布局? 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部. 下面来看代码,用纯CSS3来做看效果怎样! HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 2

jquery两行代码实现侧边栏三级折叠菜单

jquery两行代码实现侧边栏三级折叠菜单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/jquery-2.1.1.min.js"></script> </head> <bod

JAVA学习-第四个代码模型

第四个代码模型:接口应用 在现实生活之中经常会遇见如下的几种情况: · 在一片森林之中有多种树木: · 在商场之中有多种商品: · 在一个停车场里停放着多种车辆,例如:卡车.轿车.摩托车.自行车. 下面模拟以上的一个场景.现在有间超市,在超市之中提供有多种商品,现在要求实现商品的上架销售和下架的功能,同时可以根据关键字查询出商品的信息.本程序只要求描述出类的结构即可. 范例:定义商品标准 interface Goods {         // 商品 public String getName(

JAVA学习-第三个代码模型

第三个代码模型:对象比较 在讲解具体的概念之前,再来观察一种引用传递的形式,本类接收本类对象. 范例:观察程序代码(暂时不要去思考代码意义) class Person { private String name ; public Person(String name) { this.name = name ; }       // 接收本类对象          public void change(Person temp) {                    temp.name = "李

jQuery选择器代码详解(四)——Expr.preFilter

原创文章,转载请注明出处,多谢! Expr.preFilter是tokenize方法中对ATTR.CHILD.PSEUDO三种选择器进行预处理的方法.具体如下: Expr.preFilter : { "ATTR" : function(match) { /* * 完成如下任务: * 1.属性名称解码 * 2.属性值解码 * 3.若判断符为~=,则在属性值两边加上空格 * 4.返回最终的mtach对象 * * match[1]表示属性名称, * match[1].replace(rune

JQuery选择器代码详解(三)——tokenize方法

原创文章,转载请注明出处,多谢! /* * tokenize函数是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为"div.class,span",则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * group[1][0] = {type:'TAG'

jQuery选择器代码详解(七)——elementMatcher函数

要读懂Sizzle的Compile执行过程,首先需要弄清楚涉及的各个子程序的功能和关键变量和作用,我将逐一对jQuery-1.10.2版本的Compile代码进行说明,望能给予大家帮助. elementMatcher(matchers) 1.源码 function elementMatcher(matchers) { return matchers.length > 1 ? function(elem, context, xml) { var i = matchers.length; while