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

jQuery中$.fn的用法示例介绍

阅读更多
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();

jQuery为开发插件提拱了两个方法,分别是:

jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。

fn是什么东西呢。查看jQuery代码,就不难发现。
复制代码 代码如下:

jQuery.fn = jQuery.prototype ={
   init: function( selector, context ){//.... 
   //......
};

原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例。

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
复制代码 代码如下:

$.extend({
  add:function(a,b){returna+b;}
});

便为 jQuery 添加一个为add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7

jQuery.fn.extend(object);对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容。可以这么做:

jQuery代码
复制代码 代码如下:

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());
});
}
});
  • 大小: 212.9 KB
  • 大小: 91.3 KB
分享到:
评论

相关推荐

    jquery.dataTables.export2Excel.js:用于实现nativ XLSX导出的DataTables.js扩展

    用法示例:(所有参数都是可选的) var expert2excel = new $ . fn . export2Excel ( AppCustomerFullSearch . oDataTable , { // Filename of the export File sFileName : "CRM-Search.xlsx" , // Name of ...

    jQuery完全实例.rar

    jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。这个函数最基本的用法就是向它传递一个表达式(通常由 CSS 选择器组成),然后根据这个表达式来查找所有匹配的元素。 默认情况下, 如果...

    jquery-debounce:自动从code.google.compjquery-debounce导出

    debouncedFn = $.debounce(fn, timeout, [invokeAsap], [ctx]); throttledFn = $.throttle(fn, timeout, [ctx]); 防弹示例 $('input[name=suggest]').keyup($.debounce(onKeyUp, 300)); // or $('input').bind('...

    jQuery简单自定义图片轮播插件及用法示例

    本文实例讲述了jQuery简单自定义图片轮播插件及用法。分享给大家供大家参考,具体如下: ... $.fn.banner =function(options){ //各种属性和参数 var defaults ={ picWidth:"1000", picHeight:"300", speed:"1500

    MingGeJS1.9.0类库加强版

    2: 新增$.bindFn.extend()事件API创建接口,用法和$.Fn.extend()一样,不同的是操作事件API接口而已, 事件接口创建后。可能通过$.bind("xxx",function) 可进行引用。 3:createNode 函数被喷严重,被迫全部重写,...

    JQuery扩展对象方法操作示例

    主要介绍了JQuery扩展对象方法操作,结合实例形式简单分析了jQuery使用$.fn.extend方法扩展对象方法的相关操作技巧,需要的朋友可以参考下

    vue 项目中使用Loading组件的示例代码

    从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你可以开发一个插件给别人复用。 当在vue项目中请求后台接口时,常常会使用 loding 过渡数

    jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)

    上一篇记录了BaiduTemplate模板引擎使用示例(附源码),在此基础上对使用方法进行了封装 自定义插件jajaxrefresh.js 代码如下: //闭包限定命名空间 (function ($) { $.fn.extend({ "ajaxrefresh": function ...

    jquery.transit:超平滑CSS3转换和jQuery的转换

    jQuery的超平滑CSS3转换和过渡jQuery Transit是一个插件,可帮助您在jQuery中进行CSS转换和转换。 有关示例,请参考。... (请注意,您不能将它们设置$.fn.animate() ,而只能进行设置。) $ ( "#box" ) . css ( {

    jquery电子文档chm

    jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。数据类型设置为 "jsonp" 时...

    jquery插件使用方法大全

    使用jquery实现ajax同样异常简单 代码 (1) $.get("search. do",{id:1},rend); function rend(xml){ alert(xml); } (2) $.post("search. do",{id:1},rend); function rend(xml){ alert(xml); } (3) $...

    jquery判断输入密码两次是否相等

    $.extend($.fn.validatebox.defaults.rules, { /*必须和某个字段相等*/ equalTo: { validator:function(value,param){ return $(param[0]).val() == value; }, message:'字段不匹配' } }); 使用示例: ...

    jquery-eventtracker:jquery.eventtracker 是 Google Analytics 自定义事件跟踪器的 jQuery 插件包装器

    这是如何使用插件的简单示例 $ . fn . trackEvents . notifyAnalytics ( { category : "some category" , action : "action name" , content : "the value" } ) ; 基于 HTML 的声明式跟踪 有一种更简单的方法来...

    jquery.debounceSubmit:阻止双击多次提交表单的 jQuery 插件

    $.fn.debounce提交阻止双击多次提交表单的 jQuery 插件。描述提交表单后,此插件将禁用它 750 毫秒以防止重复提交表单。 等待 750 毫秒后,表单将重新启用(如果有人使用“Esc”来阻止表单提交,这一点很重要)示例...

    jquery click([data],fn)使用方法实例介绍

    click([[data],fn]) 返回值:jQuery 概述 触发每一个匹配元素的click事件。 这个函数会调用执行绑定到click事件的所有函数。 参数 fnFunctionV1.0 在每一个匹配元素的click事件中绑定的处理函数。 [data],fnString,...

    jQuery EasyUI API 中文文档 搜索框

    用$.fn.searchbox.defaults重写defaults。依赖 menubutton 用法示例 创建SearchBox 1. 从标记创建。把 ‘easyui-searchbox’ 类加入到<input/>标记。 代码如下: [removed] function qq(value,name){ alert&#40...

    jQuery EasyUI API 中文文档 – Panel面板

    用$.fn.panel.defaults重写defaults。用法示例 创建Panel 1. 经由标记创建Panel 从标记创建Panel更容易。把 ‘easyui-panel’ 类添加到标记。 代码如下: <div id=”p” class=”easyui-panel” title=”My Panel...

    jquery的each方法使用示例分享

    换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。 代码如下:jQuery.prototype.each=function( fn, args ...

Global site tag (gtag.js) - Google Analytics