jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
一、从面相对象角度理解两个方法
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加"静态方法"。可以在jquery环境下直接调用。
例如:
$.extend({
add:function(a,b){return a+b;}
});
那么就可以像引用“静态方法”一样引用add方法:$.add(3,4); //return 7
看下jQuery.fn.extend的源码:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
jQuery.fn.extend(object); 是对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
例如:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
可以在实例上引用该方法:
$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
二、详细理解jQuery.extend方法用法
1、使用方法一:
extend(dest,src1,src2,src3...);
理解:
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest
例如:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})//{}作为dest,这样就不会改变dest的结构了
合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
2、使用方法二:省略dest
extend(src);
A)$.extend(src)
该方法就是将src合并到jquery的全局对象中去
$.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的全局对象中,使用方法:$.hello();
B)$.fn.extend(src)
该方法将src合并到jquery的实例对象中去
$.fn.extend({
hello:function(){alert('hello');}
});
就是将hello方法合并到jquery的实例对象中,使用方法:$(obj).hello();
例如:
$.extend({net:{}}); //这是在jquery全局对象中扩展一个net命名空间。
$.extend($.net,{hello:function(){alert('hello');}});//这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。
3、使用方法三:
extend(boolean,dest,src1,src2,src3...);
理解:第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝。
参考:
1、关于jquery.fn等 http://blog.sina.com.cn/s/blog_4ca246370100vnfb.html
2、jQuery.extend 函数详解 http://www.cnode.cn/article.asp?id=537
分享到:
相关推荐
开发jQuery插件的步骤一般包括: 1. **封装功能**:将特定的功能封装到一个独立的函数或对象中,以避免污染全局命名空间。通常,我们会创建一个函数,该函数接收jQuery对象作为参数,并返回一个新的jQuery对象,以...
【标题】基于JQuery开发的弹窗插件 在Web开发中,弹窗是一种常见的交互方式,用于显示警告、确认信息或提供用户输入等。JQuery是一个轻量级的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等...
为此,开发者们利用jQuery开发了更加强大且实用的Marquee插件,以满足更多复杂需求。 jQuery Marquee插件是基于JavaScript库jQuery的一款插件,它提供了丰富的定制选项,如滚动速度、方向、暂停、启动等,使得创建...
标题中的“dreamweaver 安装jquery 开发插件”涉及到的是在Adobe Dreamweaver中安装jQuery开发插件的过程。Dreamweaver是一款流行的Web开发工具,它提供了代码编辑、设计视图以及预览功能,方便开发者创建网页和应用...
开发jQuery插件时,还需要注意兼容性问题,确保插件能在不同的浏览器环境下正常工作。此外,良好的注释和文档是提升插件可读性和团队协作效率的关键。 总之,jQuery插件开发是一项实用且重要的技能,它可以帮助...
【标题】中的“[精华]网站论坛源码C# Jquery”揭示了这是一个关于网站论坛开发的项目,采用的核心技术是C#后端语言和Jquery前端库。...同时,自定义Jquery插件的实践,有助于深入掌握Jquery API并锻炼前端开发技能。
通过学习以上两种类型的jQuery插件开发,开发者不仅能够更好地理解和利用jQuery的强大功能,还能提高自身的编程技巧和封装能力。无论是对于个人技能的提升还是项目的实际应用,都有着重要的意义。在实践中不断尝试和...
jQuery插件开发是扩展这个库功能的一种常见方式,使得开发者能够根据项目需求创建自定义功能。以下是对jQuery插件开发的详细讲解: 1. **插件基础** - jQuery插件通常是通过扩展jQuery对象的原型链来实现的,这...
本篇文章将深入讲解“jQuery文档预览功能插件”,并结合示例代码,帮助开发者快速理解并应用。 ### 1. 插件介绍 jQuery Zoho Viewer是一款强大的文档预览插件,它允许用户在浏览器内直接预览各种类型的文档,包括...
4. **兼容性**:由于是基于jQuery开发,所以该插件应具有良好的浏览器兼容性,能够在大部分现代浏览器上正常工作,包括桌面和移动端。 5. **易于集成**:作为一款jQuery插件,它应该提供简单的API接口和配置选项,...
本篇将深入探讨jQuery插件的开发方法,包括核心概念、设计模式以及实际应用示例。 首先,理解jQuery插件的基础架构至关重要。一个基本的jQuery插件通常以$.fn作为扩展点,这是因为$.fn是jQuery对象方法的原型,这样...
2. **初始化插件**:接着,为需要使用插件的图片元素添加jQuery选择器,并调用imgAreaSelect方法,如: ```javascript $("#myImage").imgAreaSelect({ handles: true, aspectRatio: "1:1", onSelectEnd: function...
而开发jQuery插件则是进一步扩展其功能,满足特定需求的有效方式。 一、jQuery插件基础 1. **命名空间**:在创建插件时,首先要考虑的是避免与其他代码冲突。通常,我们会创建一个独特的命名空间,如`$.fn....
jQuery插件通常以函数的形式存在,通过$.fn.extend()方法将新的方法添加到jQuery对象上,使得所有选择器匹配的元素都能调用这个新方法。例如: ```javascript (function($){ $.fn.myPlugin = function(options) { ...
这个点击图片放大插件就是典型的jQuery插件,它利用jQuery提供的API和事件处理机制,实现了图片的动态放大与缩小效果。 三、插件实现原理 1. 图片绑定事件:首先,插件会为页面中的所有图片元素绑定点击事件。当...
jQuery插件是jQuery库的一个扩展,它们通过添加新的功能来增强原生的jQuery对象。开发者通常会将一些常见的功能封装成插件,以便于复用和提高开发效率。这个弹出层插件就是基于jQuery的,它可以无缝集成到现有的...
这篇博文“JQuery插件开发 + 插件”可能涉及到如何创建自定义的jQuery插件以及如何利用这些插件来增强网页功能。下面我们将深入探讨jQuery插件开发的相关知识点。 一、jQuery插件基础 1. 插件定义:jQuery插件是...
总的来说,jQuery Dreamweaver代码提示插件是提高jQuery开发效率的重要辅助工具,它让Dreamweaver成为了一个更强大的jQuery开发环境。对于经常使用Dreamweaver和jQuery的开发者来说,这是一个必不可少的利器,可以...
由于其易用性和强大的功能,jQuery被广泛应用于网页开发,尤其是对于网页动态效果的实现。而滚动条插件是jQuery生态中的一个重要组成部分,它们能够帮助开发者定制美观且功能丰富的滚动条,提升用户体验。 标题...
通常,初始化方法的名称会遵循jQuery插件的命名规范,如`$.fn.datepicker`: ```javascript $(document).ready(function() { $('.date-input').datepicker(); }); ``` 这里假设`<input>`元素类名为`date-input`,...