<!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
分享到：
相关推荐
这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件，提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先，了解jQuery的核心概念是至关重要的。...
### jQuery插件开发全解析 #### 一、引言 jQuery作为一款优秀的JavaScript库，在前端开发领域具有举足轻重的地位。它简化了许多常见的JavaScript任务，使得开发者能够更轻松地处理DOM操作、事件处理以及Ajax交互等...
**jQuery插件开发** 在Web开发领域，jQuery是一款广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画效果和Ajax交互。jQuery插件是扩展jQuery功能的一种方式，允许开发者根据需求定制各种功能，如表单验证、...
jQuery插件开发及常用插件大全PDF；jQuery插件开发.pdf、jQuery常用插件大全.pdf
jQuery插件开发是扩展这个库功能的一种常见方式，使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解： 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的，这...
本知识点将详细介绍如何开发jQuery插件，并总结五种常见的形态。 ### 一、基础形态 - 功能函数包装 基础形态的插件是将JavaScript函数封装起来，使其能够在jQuery对象上操作。例如，创建一个背景颜色变换插件，它...
《jQuery插件开发详解》 在Web开发领域，jQuery是一个广泛应用的JavaScript库，它极大地简化了DOM操作、事件处理和动画制作。对于开发者而言，掌握jQuery插件的开发技巧是提升工作效率的重要一环。本篇将深入探讨...
jQuery插件开发是一项重要的技能，可以让开发者通过创建可复用的代码片段来增强jQuery库的功能。根据提供的文档内容，以下是一些关于jQuery插件开发的关键知识点： 1. 基本插件结构 在编写jQuery插件时，首先要了解...
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
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....
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
**通用JQuery插件开发详解** 在Web开发领域，jQuery是一个广泛使用的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。由于其简洁的API和丰富的功能，jQuery成为创建交互式网页的强大工具。...
jquery插件库大全（200个）： jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
在开发插件时，通常会遇到的第一个问题是防止与其他JavaScript库的冲突。在不同的JavaScript库中，$符号常常被用来表示各自的库实例，为了避免$符号的冲突，可以将jQuery包裹在一个自执行的匿名函数中，并通过jQuery...
首先，要学习jQuery插件开发，我们先要理解插件的概念。jQuery插件本质上是通过某种机制对jQuery核心模块进行扩展的方法或额外功能。在编写属于自己的插件时，我们不仅可以提高开发效率，还可以在不同的项目中重复...
jQuery插件开发是创建可复用、模块化代码的一种有效方式，它允许开发者扩展jQuery的功能，满足特定需求。本文将深入探讨jQuery插件开发的几个关键点：jQuery扩展、私有域以及定义插件的基本步骤。 首先，我们来看...
**jQuery插件开发详解** jQuery，作为一款广泛使用的JavaScript库，极大地简化了DOM操作、事件处理、动画制作等任务。其强大的功能和易用性使得开发者可以快速构建交互丰富的Web应用。开发jQuery插件是扩展其功能的...