`
Action-人生
  • 浏览: 105001 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

$.extend(),与$.fn.extend() 讲解(一)

阅读更多
http://blog.sina.com.cn/s/blog_a3bd3bd0010187y1.html
jQuery插件的开发包括两种:
一种是类级别的插件开发,即给jQuery添加新的全局函数,相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数,另一种是对象级别的插件开发,即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法,可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数,将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展:
1.1 添加一个新的全局函数
添加一个全局函数,我们只需如下定义:

jQuery.foo = function() { alert('This is a test. This is only a test.'); };

1.2 增加多个全局函数
添加多个全局函数,可采用如下定义:
jQuery.foo = function() { alert('This is a test. This is only a test.'); }; jQuery.bar = function(param) { alert('This function takes a parameter, which is "' + param + '".');  
};   
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');  

1.3 使用jQuery.extend(object);
jQuery.extend({ foo: function() { alert('This is a test. This is only a test.'); }, bar: function(param) { alert('This function takes a parameter, which is "' + param +'".');      
}     
});  

1.4 使用命名空间
虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。
jQuery.myPlugin = { foo:function() { alert('This is a test. This is only a test.'); }, bar:function(param) { alert('This function takes a parameter,  which is "' + param + '".');    
}         
};  
采用命名空间的函数仍然是全局函数,调用时采用的方法:  
$.myPlugin.foo();         
$.myPlugin.bar('baz');  

通过这个技巧(使用独立的插件名),我们可以避免命名空间内函数的冲突。
2、对象级别的插件开发
对象级别的插件开发需要如下的两种形式:、
形式1: 
(function($){ $.fn.extend({ pluginName:function(opt,callback){ // Our plugin implementation code goes here. } }) })(jQuery);

形式2:
(function($) { $.fn.pluginName = function() { 
// Our plugin implementation code goes here. 
}; })(jQuery);

上面定义了一个jQuery函数,形参是$,函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.
2.1 在JQuery名称空间下申明一个名字
这是一个单一插件的脚本。如果你的脚本中包含多个插件,或者互逆的插件(例如: $.fn.doSomething() 和$.fn.undoSomething()),那么你需要声明多个函数名字。但是,通常当我们编写一个插件时,力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“
$.fn.hilight = function() { 
// Our plugin implementation code goes here. 
}; 
我们的插件通过这样被调用: $('#myDiv').hilight();

但是如果我们需要分解我们的实现代码为多个函数该怎么办?有很多原因:设计上的需要;这样做更容易或更易读的实现;而且这样更符合面向对象。 这真是一个麻烦事,把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象,我们可以这样做。就像其他对象一样,函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象,任何其他的属性或者函数我们需要暴露出来的,都可以在"hilight" 函数中被声明属性。稍后继续。
2.2 接受options参数以控制插件的行为
让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如:  
// plugin definition
 $.fn.hilight = function(options) { var defaults = { foreground: 'red', background: 'yellow' }; 
// Extend our default options with those provided.
 var opts = $.extend(defaults, options);
 // Our plugin implementation code goes here.
 }; 我们的插件可以这样被调用:
 $('#myDiv').hilight({ foreground: 'blue' });
分享到:
评论
4 楼 Action-人生 2015-02-04  
小_情兽_ 写道
[color=blue][/color]摸不着头脑  楼上说的对  貌似有错误  忘楼主检查后更改
真贱用2个号登录就是为了来讽刺我,,连最基本的身体struts工作流程都不熟悉,跟别说js,jquery,我承认我虽然技术很烂,但比你。。。
3 楼 Action-人生 2015-02-04  
先生葛 写道
文中有错   别误人子弟啊[color=red][/color]

你自己几斤几两我还不知道吗,自己天天混日子,看不的别人好,哈哈,作为一个程序员天天不看代码写代码,一上班就聊天,给it人丢脸
2 楼 小_情兽_ 2015-02-04  
[color=blue][/color]摸不着头脑  楼上说的对  貌似有错误  忘楼主检查后更改
1 楼 先生葛 2015-02-04  
文中有错   别误人子弟啊[color=red][/color]

相关推荐

    jQuery插件开发的两种方法及$.fn.extend的详解

    接下来将详细讲解jQuery插件开发的两种方法以及$.fn.extend的用法。 ### jQuery插件开发的两种方法 #### 1. 类级别方法 类级别插件开发是指对jQuery对象本身进行扩展,这样做可以为jQuery增加新的静态方法。在类...

    浅谈jquery中的each方法$.each、this.each、$.fn.each

    这篇文章将详细讲解`$.each`、`this.each`和`$.fn.each`这三种不同的`each`用法。 首先,我们来看`$.each`方法。`$.each`是jQuery提供的一个通用迭代器,可以用于遍历数组或对象。对于数组,它会按顺序遍历数组中的...

    jquery 插件开发 extjs中的extend用法小结

    在jQuery中,`$.extend`主要用于合并多个对象的属性到一个目标对象。基本语法是`$.extend(dest, src1, src2, src3…)`。例如: ```javascript var start = { id: 123, count: 41, desc: 'this is information', ...

    jQuery API 详解 中文版

    此外,还包括了基本的DOM遍历方法,如$.each(),以及数据绑定和获取($.data()和$.fn.data())。 **第二部分:DOM(文档对象模型)** 这部分主要介绍如何利用jQuery操作DOM元素,如添加、删除和复制元素,以及修改...

    《锋利的JQUERY》实例下载 第六章

    开发者可以通过$.fn.extend()方法创建自定义的jQuery方法,共享和复用代码。 总的来说,第六章的学习将使读者对jQuery有更深入的理解,能够熟练运用jQuery进行高效的DOM操作、优雅的事件处理、动态的动画效果制作...

    锋利的JQuery

    通过$.fn.extend()可以创建新的方法,实现自定义功能。 2. 流行插件:如jQuery UI提供了丰富的用户界面组件,如日期选择器、对话框等;另一款流行插件Bootstrap则包含响应式布局和组件。 五、实战应用 书中提供的...

    jquery简单插件制作(fn.extend)完整实例

    本文将详细讲解如何使用jQuery的`fn.extend`方法来创建一个简单的自定义插件,并通过一个实际的完整实例来展示其工作原理。 首先,`fn.extend`是jQuery提供的一种机制,用于扩展jQuery对象的原型,从而增加新的函数...

    jquery插件开发

    这里`$.fn`是jQuery对象的prototype,等同于`$.prototype`,因此在`$.fn`上定义的方法可以被所有jQuery选择器调用。 ### 2. 参数传递与选项配置 `options`参数允许我们为插件提供可配置的选项。开发者可以通过在...

    韩顺平 jquery 源码 传智播客

    $.extend()和$.fn.extend()方法分别用于合并对象和扩展jQuery对象的方法。通过学习如何编写jQuery插件,我们可以创建自己的功能组件,丰富项目中的工具库。 总的来说,韩顺平老师的jQuery源码讲解课程,不仅覆盖了...

    《锋利的jQuery》

    书中会介绍如何编写和使用插件,以及如何利用$.extend()和$.fn.extend()进行插件封装。 7. **jQuery与其他库的兼容**:jQuery设计时考虑了与其他库共存的情况,提供了$.noConflict()方法来释放$符号,避免命名冲突...

    jQuery权威指南(完整版)

    4. **动画与效果**:jQuery的动画功能强大,如$.fn.fadeIn()、$.fn.slideDown()等,使得创建平滑过渡和动态效果变得直观。书中还会涉及延迟和定时执行,以及自定义动画的实现。 5. **Ajax交互**:jQuery的$.ajax()...

    jQuery常见问题列表搜索查询.zip

    开发者可以使用$.fn.extend()扩展jQuery对象,增加自定义方法。 2. **DOM操作**:jQuery提供了便捷的DOM选择器,如$("#id")选择ID为id的元素,$(".class")选择所有class为class的元素,以及$("tag")选择所有特定...

    JQ jQuery插件如何开发

    `$.extend`用于合并用户提供的选项与默认设置。`this.each`确保插件可以作用于一组元素,而非单个元素。通过`fadeIn`和`fadeOut`方法,我们实现了背景颜色的渐变效果。 在实际开发中,我们可能还需要考虑以下几点:...

    开发jquery插件

    我们可以通过`$.extend`合并默认选项与用户传递的选项。 ```javascript var defaults = { colorClass: 'alternate-row', // 其他默认选项... }; $.fn.myPlugin = function(options) { options = $.extend({}, ...

    jquery1.7中文参考手册

    4. **动画效果**:jQuery的动画功能强大,$.fn.slideDown()、$.fn.fadeIn()等方法用于创建滑动和淡入效果,$.fn.animate()可以自定义复杂的动画效果,如改变宽高、透明度等。 5. **Ajax交互**:jQuery封装了Ajax...

    jquery1.7 Api

    1. **$.fn.extend() 和 $.extend()** - `$.fn.extend()` 用于扩展jQuery对象的方法,使得这些方法可以应用于jQuery实例上。 - `$.extend()` 用于合并两个或更多的对象,返回一个新的对象,或者直接修改第一个对象...

    JQuery 页面文档及实例

    通过`$.extend()`或`$.fn.extend()`可以创建自己的jQuery插件。 ### 示例解析 在`jqueryapi12`这个压缩包中,你应该找到了一系列关于jQuery的示例代码。这些实例涵盖了上述提到的各个知识点,包括DOM操作、事件...

Global site tag (gtag.js) - Google Analytics