`

jQuery 插件开发 精简概括

阅读更多

 

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <input type="button" value="func1()" onclick="f1()"/>
  <input type="button" value="func2('xxx')" onclick="f2()"/>
  <input type="button" value="func3()" onclick="f3()"/>
  <input type="button" value="func4('xxx')" onclick="f4()"/>
  <input type="button" value="func5()" onclick="f5()"/>
  <input type="button" value="func6('xxx')" onclick="f6()"/>

<div id="div1"><span class="btn_text"></span>xxx<input type="button" value="plugin1('xxxx')" onclick="pg1()"/></div>
  <div id="div2"><span class="btn_text"></span>xxx<input type="button" value="plugin2('xxxx')" onclick="pg2()"/></div>
  <div id="div3"><span class="btn_text"></span>xxx<input type="button" value="plugin3('xxxx')" onclick="pg3()"/></div>
  <div id="div4"><span class="btn_text"></span>xxx<input type="button" value="plugin4('xxxx')" onclick="pg4()"/></div>
  <div id="div5"><span class="btn_text"></span>xxx<input type="button" value="plugin5('xxxx')" onclick="pg5()"/></div>
  <div id="div6"><span class="btn_text"></span>xxx<input type="button" value="plugin6('xxxx')" onclick="pg6()"/></div>
  <div id="div7"><span class="btn_text"></span>xxx<input type="button" value="plugin7('xxxx')" onclick="pg7()"/></div>
  <div id="div8"><span class="btn_text"></span>xxx<input type="button" value="plugin8('xxxx')" onclick="pg8()"/></div>
</body>
</html>

 

 

///////////////////// 全局函数

jQuery.func1 = function() {   
  alert('test func1');  
};  
jQuery.func2 = function(param) {   
  alert('test func2, param is "' + param + '".');  
};
jQuery.extend({
  func3: function() {
    alert('test func3.');
  },
  func4: function(param) {
    alert('test func4, param is "' + param + '".');
  }
});

jQuery.myPlugin = {
  func5:function() {
    alert('test func5.');
  },
  func6:function(param) {
    alert('test func6, param is "' + param + '".');
  }
};

function f1() {
  $.func1(); // jQuery.func1();
}
function f2() {
  $.func2("参数2"); // jQuery.func2();
}
function f3() {
  $.func3(); // jQuery.func3();
}
function f4() {
  $.func4("参数4"); // jQuery.func4();
}
function f5() {
  $.myPlugin.func5(); // jQuery.myPlugin.func5();
}
function f6() {
  $.myPlugin.func6("参数6"); // jQuery.myPlugin.func6();
}


////////////////////// jQuery 插件开发(类级别、对象级别),

///////  对象级别开发,jQuery("#id").plugin("aaa")/$("#id").plugin("aaa")
// 形式1
(function($){
  $.fn.extend({
    plugin1 : function(p) {
      $(this).find(".btn_text").html(p);
    },
    plugin2 : function(p) { this.plugin1(p); }
  });
})(jQuery);

// 形式2
(function($){
  $.fn.plugin3 = function(p) {
    $(this).find(".btn_text").html(p);
  };
  $.fn.plugin4 = function(p) {
    this.plugin3(p);
  };
})(jQuery);

function pg1(){$("#div1").plugin1("1111");}
function pg2(){$("#div2").plugin1("2222");}
function pg3(){$("#div3").plugin1("3333");}
function pg4(){$("#div4").plugin1("4444");}


/////////  类级别插件开发,jQuery.plugin("aaa")/$.plugin("aaa")
(function($){
  $.extend({
    plugin5 : function(obj, p) {
      $(obj).find(".btn_text").html(p);
    },
    plugin6 : function(obj, p) {
      this.plugin5(obj, p);
    }
  });
})(jQuery);

(function($){
  $.plugin7 = function(obj, p) {
      $(obj).find(".btn_text").html(p);
    };
  $.plugin8 = function(obj, p) {
      this.plugin7(obj, p);
    };
})(jQuery);

function pg5(){$.plugin5($("#div5"), "5555");}
function pg6(){$.plugin6($("#div6"), "6666");}
function pg7(){$.plugin7($("#div7"), "7777");}
function pg8(){$.plugin8($("#div8"), "8888");}

 

 

参考: http://www.iteye.com/topic/545971

0
0
分享到:
评论

相关推荐

    jQuery插件开发学习

    这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件,提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先,了解jQuery的核心概念是至关重要的。...

    jQuery插件开发全解析

    ### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库,在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务,使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...

    JQuery插件开发

    **jQuery插件开发** 在Web开发领域,jQuery是一款广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式,允许开发者根据需求定制各种功能,如表单验证、...

    jQuery插件开发及常用插件大全.zip

    jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf

    jquery 插件开发 pdf

    jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...

    jQuery插件开发的五种形态小结

    本知识点将详细介绍如何开发jQuery插件,并总结五种常见的形态。 ### 一、基础形态 - 功能函数包装 基础形态的插件是将JavaScript函数封装起来,使其能够在jQuery对象上操作。例如,创建一个背景颜色变换插件,它...

    jquery插件开发文档

    jQuery插件开发是一项重要的技能,可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容,以下是一些关于jQuery插件开发的关键知识点: 1. 基本插件结构 在编写jQuery插件时,首先要了解...

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集).zip

    JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法

    jquery 插件开发

    jquery插件开发是提高前端开发效率的重要方式之一。在本篇文章中,我们将详细解析如何通过$.extend()方法扩展jQuery、如何通过$.fn向jQuery添加新的方法以及如何使用$.widget()方法应用jQuery UI的部件工厂方式创建...

    jquery插件库(jquery.treeview插件库)

    jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....

    jquery插件库大全(200个).zip

    jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...

    jquery精简版jquery-small.js

    jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版

    通用 JQuery 插件 开发

    **通用JQuery插件开发详解** 在Web开发领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能,jQuery成为创建交互式网页的强大工具。...

    jQuery插件开发详细教程

    在开发插件时,通常会遇到的第一个问题是防止与其他JavaScript库的冲突。在不同的JavaScript库中,$符号常常被用来表示各自的库实例,为了避免$符号的冲突,可以将jQuery包裹在一个自执行的匿名函数中,并通过jQuery...

    跟我一起学JQuery插件开发

    首先,要学习jQuery插件开发,我们先要理解插件的概念。jQuery插件本质上是通过某种机制对jQuery核心模块进行扩展的方法或额外功能。在编写属于自己的插件时,我们不仅可以提高开发效率,还可以在不同的项目中重复...

    详解jQuery插件开发方式

    jQuery插件开发是创建可复用、模块化代码的一种有效方式,它允许开发者扩展jQuery的功能,满足特定需求。本文将深入探讨jQuery插件开发的几个关键点:jQuery扩展、私有域以及定义插件的基本步骤。 首先,我们来看...

    JQuery插件开发 + 插件

    这篇博文“JQuery插件开发 + 插件”可能涉及到如何创建自定义的jQuery插件以及如何利用这些插件来增强网页功能。下面我们将深入探讨jQuery插件开发的相关知识点。 一、jQuery插件基础 1. 插件定义:jQuery插件是...

Global site tag (gtag.js) - Google Analytics