一、类级别（$.extend）
类级别你可以理解为拓展jquery类，最明显的例子是$.ajax(...),相当于静态方法。
开发扩展其方法时使用$.extend方法，即jQuery.extend(object);
$.extend({
add:function(a,b){return a+b;} ,
minus:function(a,b){return a-b;}
});
//页面中调用：
var i = $.add(3,2);
var j = $.minus(3,2);
二、 对象级别
对象级别则可以理解为基于对象的拓展，如$("#table").changeColor(...); 这里这个changeColor呢，就是基于对象的拓展了。
开发扩展其方法时使用$.fn.extend方法，即jQuery.fn.extend(object);
$.fn.extend({
check:function(){
return this.each({
this.checked=true;
});
},
uncheck:function(){
return this.each({
this.checked=false;
});
}
});
页面中调用：
$('input[type=checkbox]').check();
$('input[type=checkbox]').uncheck();
三、 jQuery插件开发过程
1、定义作用域：为插件定义私有作用域，外部代码不能直接访问插件内部的代码，插件内部的代码不污染全局变量、
(function ($){
//内部插件代码实现
})(jQuery)
2、为jQuery扩展一个插件：为jQuery的实例添加一个宽展方法。该宽展方法可以接收一些参数。
(function ($){
$.fn.myTable = function (options){
//具体代码实现
}
})(jQuery)
3、设置默认值：为扩展方法设置默认值，一般会将默认属性对象定义为defaults。使用$.extend(defaults,options)将默认值和传入的参数进行合并
(function ($){
var defaults = {
name:"我的插件",
version:"1.0"
}
$.fn.myTable = function (options){
var options = $.extend(defaults,options);
}
})(jQuery)
4、支持jQuery的连接调用：循环把每个元素返回。
(function ($){
var defaults = {
name:"我的插件",
version:"1.0"
}
$.fn.myTable = function (options){
var options = $.extend(defaults,options||{});
return this.each(function(){
//对每个元素进行操作
});
}
})(jQuery)
5、插件里的方法：为了使代码结构化可视化，需要用到function。在插件里的方法不能被外界调用。
(function ($){
var defaults = {
name:"我的插件",
version:"1.0"
}
var showName = function (obj){
$(obj).append(function(){
return "name";
});
}
$.fn.myTable = function (options){
var options = $.extend(defaults,options);
return this.each(function(){
showName(this);
});
}
})(jQuery)
6、自定义回调函数：使用call和apply方法执行回调函数，
<!DOCTYPE html>
<html lang="en">
<body>
<div>Out And In Fade</div>
<div>Out And In Fade</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
(function ($) {
$.fn.outAndInFade = function (customOptions) {
var options = $.extend({}, $.fn.outAndInFade.defaultOptions, customOptions || {});
return this.each(function () {
$(this).on('click', function () {
if ($.isFunction(options.complete)) {
options.complete.apply(this);
}
});
});
};
$.fn.outAndInFade.defaultOptions = {
complete: null
};
})(jQuery);
jQuery('div').outAndInFade({
complete: function () {
$(this).css('background', '#ff9');
}
});
</script>
</body>
</html>
相关推荐
### jQuery 插件编写指南详解 #### 一、引言 在前端开发中，jQuery 是一个非常流行的 JavaScript 库，它极大地简化了 HTML 文档遍历、事件处理、动画等操作，同时也支持丰富的插件机制。本文将详细介绍如何编写 ...
jQuery插件编写是jQuery框架中一个重要的组成部分，它允许开发者扩展jQuery的核心功能，创建自定义的、可复用的组件。jQuery插件的编写通常遵循一套标准的步骤，这些步骤包括： 1. **封装匿名函数**： jQuery插件...
### jQuery插件编写详解 #### 一、jQuery简介 jQuery是一个功能强大且高效的JavaScript库，其设计目的是为了简化HTML文档的遍历、事件处理、动画以及与服务器端的交互等操作。作为prototype之后的一个杰出代表，...
这篇“jQuery插件开发学习”的主题旨在帮助开发者深入理解如何利用jQuery来开发自定义插件，提高代码复用性和项目效率。下面我们将详细探讨jQuery插件开发的相关知识点。 首先，了解jQuery的核心概念是至关重要的。...
jQuery插件是JavaScript库jQuery生态系统中的一个重要组成部分，它极大地扩展了jQuery的核心功能，为开发者提供了丰富的功能和便捷...了解如何创建和使用jQuery插件，对于任何希望提升前端开发技能的人来说都是必要的。
《jQuery插件开发详解》 在Web开发领域，jQuery是一个广泛应用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画制作等任务。jQuery插件是jQuery生态系统的重要组成部分，它们扩展了jQuery的核心...
"jquery插件库-jquery仿京东商品详情页图片放大效果.zip"这个压缩包文件包含了一个jQuery插件，旨在模仿京东商品详情页中的图片放大效果，为用户提供更直观的商品查看体验。 首先，我们来详细了解一下jQuery插件的...
在Sublime Text 2中安装jQuery插件，可以极大地提升前端开发者的工作效率，使得jQuery代码的编写更加得心应手。 jQuery是一种强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，极大地...
标题“eclipse上支持jquery插件”所指的就是这种能够为Eclipse添加jQuery智能提示和代码辅助功能的扩展。这样的插件使得开发者在编写jQuery代码时，可以享受到如同使用Java或其他语言一样的代码补全、错误检查和调试...
总之，jQuery插件极大地丰富了jQuery的功能，使得开发者能够快速构建功能齐全、用户体验良好的Web应用，而无需从零开始编写大量代码。通过选择合适的插件，可以节省开发时间，提高工作效率，并确保项目具备高质量和...
通过这个学习实例，你应该能够逐步理解并实践以上知识点，最终达到熟练编写和使用jQuery插件的目标。记住，实践是检验学习成果的最好方式，动手尝试并不断调试你的代码，你会发现自己的技能在不断提升。
"50个jQuery插件介绍"这篇文档很可能包含了对各种功能强大、用途广泛的jQuery插件的详细解读，帮助开发者提升网站的用户体验和功能实现。 首先，jQuery插件是jQuery库的扩展，由社区开发者创建，用于解决特定问题或...
1. **jQuery插件的原理**：jQuery插件是基于jQuery核心功能扩展的功能模块，通过$.fn.extend()方法，将新方法添加到jQuery对象的prototype上，使得所有jQuery选择器都能调用这些新方法。 2. **DOM操作**：jQuery...
首先，jQuery插件是基于jQuery库的功能扩展，它们是由开发者为解决特定问题或实现特殊效果而编写的代码模块。这些插件通常包括一些预定义的函数，可以轻松地整合到项目中，无需从头开始编写所有功能。通过使用jQuery...
以"jquery插件库-jquery抽奖插件"为例，这个插件可能包含一个旋转盘的HTML结构，结合CSS3的transform属性实现3D旋转效果。JavaScript部分则通过jQuery选择器获取元素，设置动画时间和旋转角度，然后绑定click事件，...
2. **jQuery插件编写**：jQuery插件通常以函数形式存在，可以通过$.fn扩展jQuery对象。一个简单的进度条插件可能会包含初始化、开始、更新和结束等方法。以下是一个基本示例： ```javascript (function($) { $.fn....
**jQuery插件大全：打造网页交互新体验** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这个"jQuery插件大全（内含Demo）"压缩包文件提供了丰富的...
在《jQuery插件开发全解析.pdf》这份文档中，作者可能详细阐述了插件开发的各个步骤，包括如何封装私有函数、如何处理回调函数、如何利用jQuery的data方法存储插件状态，以及如何优化性能。此外，还可能涉及如何与...
3. **jQuery插件编写**：编写JavaScript代码，实现点击标签时切换内容区域的显示。这里我们可以创建一个名为`tabs`的jQuery插件。 ```javascript (function($) { $.fn.tabs = function() { this.each(function() ...