jQuery插件扩展方法

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

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

fn表示什么呢?下面代码是jQuery源代码中定义的fn:

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

   //……   

};   

从上面代码我们不难看出 jQuery.fn = jQuery.prototype。对于prototype肯定不会陌生, javascript没有明确的类的概念,但是为也更方便理解它我们通常会用到类。

那么有fn和没有fn有什么区别呢?

jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。

如以下代码:

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

这样就表示为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery的地方,通过$.add();就可以使用这个方法了,

jQuery.fn.extend(object); 对jQuery.prototype进行扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。

如以下代码:

$.fn.extend({
     alertWhileClick:function(){
         $(this).click(function(){
              alert($(this).val());
          });
      }
});        

此时我们就可以通过 $(‘input‘).alertWhileClick();来调用这个方法了。这个里面的$(‘input‘)为jQuery的一个实例,当它调用成员方法 alertWhileClick后,便实现了扩展。

参考文档:https://www.cnblogs.com/keyi/p/6089901.html

原文地址:https://www.cnblogs.com/sese/p/9130268.html

时间: 2024-09-29 22:16:42

jQuery插件扩展方法的相关文章

Jquery自定义扩展方法(二)--HTML日历控件

一.概述 研究了上节的Jquery自定义扩展方法,自己一直想做用jquery写一个小的插件,工作中也用到了用JQuery的日历插件,自己琢磨着去造个轮子--HTML5手机网页日历控件,废话不多说,先看看效果图吧 效果图很简单,代码封装在JQuery中,网页端只需要要调用即可: 二.Jquery自定义实体对象 Jquery可以自定义函数function,有没有可以定义实体对象,里面封装方法那?查询了一下资料发现,是可以的,不仅能够封装属性,还可以写自己的方法,调用模板代码如下: $.Calende

Jquery的扩展方法extend详解

今天研究了下Jquery的扩展方法extend. 1.extend(obj,item1,item2,item3...); 这段代码的含义是将src1,scr2等所有项合并到obj对象中,但是同样存在一个问题,这样合并会修改到obj的整个结构. 2.var result = $.extend({},item1,item2,item3...); 这个方法巧妙地运用了extend的特性 将一个空对象与所有item合并,并通过返回值的形式获取到一个新的对象.如下所示: var result = $.ex

jQuery插件制作方法详解

jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了.其他事情插件全包.我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件.写一 个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件. jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加上Jt

JS,JQuery的扩展方法

转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            var aClass = function(){} //1 定义这个类的静态方法            aClass.sayHello = function(){                alert('say hello');            } //2 定义这个类对象的对象方法   

Jquery插件使用方法

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

编写jQuery插件的方法

声明:详细内容请看<<锋利的jquery>>这本书 这里没对自定义选择器作介绍 因为我感觉jQuery已经为我们定义足够的选择器已经满足使用 <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>编写jquery插件<

为Jquery类和Jquery对象扩展方法

jquery.fn.extend与jquery.extend jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. JavaScript代码 jQuery

jquery 插件扩展

编写jquery扩展插件 第一步:创建一个js文件 第二步:编写有关代码 jQuery.fn.extend({    ///这个函数是全部选择所有的元素    check: function() {        return this.each(function() { this.checked = true; }); //必须return回一个jquery对象    },    uncheck: function() {        return this.each(function()

Jquery自定义扩展方法

jquery是一款流行的JS框架,自定义JS方法,封装到Jquery中,调用起来也挺方便的,怎么写Jquery扩展方法那,网上翻阅了一部分代码,其实也挺简单的: 方式一: (jQuery.fn.setApDiv=function () { //apDiv浮动层显示位置居中控制 var wheight=$(window).height(); var wwidth=$(window).width(); var apHeight=wheight-$("#apDiv").height(); v