`
Action-人生
  • 浏览: 104268 次
  • 性别: 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 $.fn.extend

    `$.fn.extend`是jQuery库中的一个核心方法,主要用于扩展jQuery对象的方法集合。这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个...

    Jquery中$与$.fn的区别实例.zip

    在jQuery库中,`$`和`$.fn`都是核心组成部分,但它们有着不同的用途和功能。...通过实践和探索`Jquery中$与$.fn的区别实例`中的示例,你将能深入理解这两个核心组件的用法和它们在实际项目中的应用。

    深入理解jquery的$.extend()、$.fn和$.fn.extend()

    在jQuery中,`$.extend()`、`.fn`(即`jQuery.fn`)和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...

    Jquery实现$.fn.extend和$.extend函数

    在提供的代码示例中,作者创建了一个简单的jQuery模拟库 `_$_`,并为它实现了 `$.fn.extend` 和 `$.extend` 方法。`_$.fn` 被设置为 `_$.prototype` 的引用,这样我们就可以在上面添加方法。`isObj` 函数用于检查...

    sortable.js(jquery.fn.sortable、jquery.fn.sortable.min.js)最新版

    在最新版本中,包括了`jquery.fn.sortable.js`和其压缩版`jquery.fn.sortable.min.js`,以及可能的替代版本`jquery.sortable.js`和`jquery.sortable.min.js`。这个插件主要适用于需要用户交互式调整元素顺序的场景,...

    jquery.wordexport.js-master.zip

    《使用jQuery和HTML5生成Word...通过理解其基本使用方法和配置选项,我们可以灵活地集成到各种Web应用中,提升项目的功能性和用户满意度。不过,使用时也需注意浏览器兼容性问题,并根据具体需求进行适当的定制和优化。

    meteor-froala-no-conflict:为 $.fn.editable - $.fn.froalaEditor 创建别名。 使用官方 froala

    在JavaScript中,$.fn是jQuery对象的函数原型,用于扩展jQuery的功能。`.editable()`和`.froalaEditor()`都是在jQuery对象上定义的方法,分别对应于不同的编辑器组件。在某些情况下,如果同时引入了$.fn.editable...

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

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

    jquery多风格多功能滚动特效代码插件jquery.liMarquee.js下载.zip

    接着,通过CSS选择器选中需要添加滚动效果的元素,并调用`$.fn.liMarquee`方法初始化插件,如下所示: ```html <script src="path/to/jquery.js"> <script src="path/to/jquery.liMarquee.js"> $(document).ready...

    jQuery中$.each()函数的用法引申实例

    本文将深入解析jQuery中$.each()函数的用法,并通过实例来展示其功能。 $.each()函数的语法如下: ```javascript $.each( collection, callback(indexInArray, valueOfElement) ) ``` 在这个结构中,`collection`是...

    jQuery/jquery-1.7.2.min.js jquery-1.7.2.js 文件

    5. **Ajax**:jQuery封装了Ajax操作,例如`$.ajax()`, `$.get()`, `$.post()`等,使得异步数据交互变得简单。 6. **链式调用**:jQuery的API设计支持链式调用,如`$(selector).addClass('active').css('color', '...

    前端项目-jquery-once.zip

    在jQuery核心库中,虽然没有内置的`$.once`方法,但开发者可以通过扩展jQuery来实现这个功能。通常,这个方法会使用一个标志来跟踪元素是否已经执行过特定的操作。当调用`$.once`时,它会检查元素的特定属性,如果该...

    jQuery分享插件.zip

    3. **初始化插件**:使用jQuery选择器找到分享按钮,并调用`$.fn.extend`中的方法来初始化插件。例如,`$('.share-button').share(options);`,`options`是可选的配置参数,可以定制分享的平台、标题、描述等信息。 ...

    浅谈jquery.fn.extend与jquery.extend区别

    jQuery库中,有两个扩展方法:`$.extend()` 和 `$.fn.extend()`,这两个方法在用途和实现上有明显的区别。理解它们之间的不同,对于深入使用jQuery编写高质量代码至关重要。 `$.extend()` 方法用于扩展jQuery库本身...

    jquery.easyui.patch.js

    $.extend($.fn.validatebox.defaults.rules, { number: { validator: function(value, param) { // 修改后的验证规则,允许小数点 if (!value) return true; var reg = /^\d+(\.\d+)?$/; return reg.test...

    jQuery EasyUI 1.2.4 API 中文文档(完整)

    - `$.fn.panel`: 用于初始化Panel组件。 - `$.fn.window`: 初始化Window组件。 - `$.fn.layout`: 初始化Layout组件。 - `$.fn.tabs`: 初始化Tabs组件。 **1.2 Parser解析器** - **用法** - 自动初始化页面上...

    jQuery 1.7 (api)

    1. **$.fn.on()方法**:这是1.7版本引入的一个重大变化,它取代了$.fn.live(), $.fn.delegate() 和 $.fn.bind()等事件绑定方法。$.fn.on()允许开发者在一个元素上绑定事件处理程序,这些处理程序可以响应当前或未来...

Global site tag (gtag.js) - Google Analytics