jquery插件扩展方法(代码片段)

前端[色色] 前端[色色]     2022-11-20     205

关键词:

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

jq插件机制(代码片段)

JQ插件概述所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码就能实现很好的效果。自定义插件JQ允许自定义插... 查看详情

jquery开发插件的两个方法js深浅拷贝(代码片段)

        1.jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。由全局函数来调用,主要是用来拓展个全局函数  2.jQuery.fn.extend(object);为jQuery的实例对象添加方法由实例对象来调用,可以用来拓展个选择器... 查看详情

创建jq插件步骤(代码片段)

无意看了这篇《jQuery插件开发精品教程,让你的jQuery提升一个台阶》文章,现在做一下总结。一、jQuery插件的创建可以有三种方法1.通过$.extend()来扩展jQuery2.通过$.fn向jQuery添加新的方法3.通过$.widget()应用jQueryUI的部件工厂方式创... 查看详情

jquery插件扩展与多库共存(代码片段)

查看扩展写法  1、工具类扩展  2、对象方法扩展/*扩展jQuery的工具方法:$.extend(object)min(a,b):返回较小的值max(c,d):返回较大的值leftTrim():去掉字符串左边的空格rightTrim():去掉字符串右边的空格*///正则/*^匹配字符串开始s匹配空... 查看详情

jquery.extend函数使用详解(代码片段)

JQuery的extend扩展方法:?????Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。?????**?一、Jquery的扩展方法原型是:**   extend(dest,src1,src2,src3...);它的含义是将src1,src2,... 查看详情

jquery插件与扩展一(代码片段)

要说jQuery最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈。学会使用... 查看详情

jquery遇到的问题(代码片段)

1.关于$.fn$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.那么你可以这样子:$("#div").abc();&nb... 查看详情

text在angular中使用jquery插件或扩展(代码片段)

查看详情

jquery编写插件(转)(代码片段)

 阅读目录基本方法支持链式调用让插件接收参数面向对象的插件开发关于命名空间关于变量定义及命名压缩的好处工具GitHubServiceHook原文:http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html要说jQuery最成功的地方,我认为是它的可... 查看详情

jquery框架-3.jquery自定义封装插件和第三方插件(代码片段)

一、jQuery的封装扩展1、jQuery中extend方法使用(挂在到jQuery和jQuery.fn两对象身上的使用)1.1、官方文档定义: jQuery.extend  Mergethecontentsoftwoormoreobjectstogetherintothefirstobject.把两个或者多个对象合并到第一个对象当中; ... 查看详情

jquery插件3种类型(代码片段)

1.封装对象方法的插件这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件。此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery方法,都是jQuery脚本库内部通过这种... 查看详情

jqueryajax对象操作(代码片段)

1数组和对象操作  1、jQuery.extend([deep,]target,object1,[objectN])  用一个或多个其他对象来扩展一个对象,返回被扩展的对象。  如果不指定target,则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。如果第... 查看详情

jquery扩展方法(表单数据格式化为json对象)(代码片段)

jquery扩展方法(表单数据格式化为json对象)<scripttype="text/javascript">//将表单数据序列化为一个json对象,例如"name":"zs","age":10//使用:varjsonObj=$("#formId").serializeObject();$.fn.serializeObject=function()varo=;vara=th 查看详情

jquery编写插件(代码片段)

jQuery编写插件 1.编写jQuery插件有俩种方法,第一种使用$.fn.extend(Object),第二种使用$.extend(Object),他们的区别,第一种需要jQuery对象来调用的,第二种是通过jQuery实例调用的//第一种编写插件的方法//放在自调用函数中,防止... 查看详情

markdown在javascript中删除diacritics(可用作普通函数,`string`对象和jquery插件的扩展)。(代码片段)

查看详情

jquery的noconflict以及插件扩展

一、noConflict函数 JavaScript有很多插件,如果jQuery对象的$与其他插件冲突,我们可以使用noConflict()方法去掉$或者使用其他的符号代替 注:noConflict()函数不能调用两次,上面代码是方便向读者展示 二、jQuery的插件扩展jQ... 查看详情

jquery插件开发(代码片段)

jQuery插件有两种写法$.extend(myMethod:function())类似于给jQuery添加静态方法$.fn.myMethod=function()应用于DOM元素上的方法,一般jQuery都是使用这个方法本文介绍$.fn.myMethod=function()这种方式直接上一个例子,这个例子是对页面上所有的超链... 查看详情

为jquery添加扩展标准思路(代码片段)

jquery扩展分为对象扩展和jquery本身类扩展:对象扩展:(function($)$.fn.abc=function()console.log($(this).get(0));)(jQuery);使用方法:$(function()$(".otherdiv").abc(););jquery本身类扩展:(function($)$.extend(showMsg:function() 查看详情