Jquery插件开发的方法总汇

时间: 2017-12-28阅读: 1455标签: Jquery

jquery插件是用来扩展jquery对象的一种方法,它的使用方法是通过jquery对象$来调用。其中Jquery插件开发一共有三种方式:

$.extend()来扩展jQuery ,主要用于向jquery对象添加静态方法
$.fn 向jQuery添加新的方法 , 这里的fn等价于prototype,在jquery原型链上添加
$.widget()应用jQuery UI的部件工厂方式创建,改模式可以带很多jquery内建的属性,比如插件的状态信息自动保存等


1.使用$.extend()来扩展jQuery

通过$.extend()向jQuery添加了一个foo函数,然后可以通过$或者jQuery直接调用, 这种方式主要用来定义一些辅助方法是比较方便的。

jQuery.extend({       
  foo: function(name) {       
    console.log(name);       
 },
);

等级于:

jQuery.foo = function(name) {    
  console.log(name);
};


2.使用$.fn开发jquery插件

1、基本格式:

这是我们最常用的方式,它的基本格式如下:

$.fn.pluginName = function() {
    this.css('color', '#fff');
}

在$.fn上面添加一个方法,这个方法名字也就是插件名称 ,这里面的this指的是jQuery选中的元素($('#id‘)。调用如下:

$(function(){
        $('#id').myPlugin();
 })


2、支持链式调用

如何支持jquery的链式调用呢?我们只需要最后返回return this即可:

$.fn.pluginName = function() {
    this.css('color', '#fff');
    return this;
}


3、防止$符号污染的jQuery插件

有很多库可能都使用了$符号,为了防止它$被其它库给覆盖,所以我们可以使用立即执行函数通过传参的方式封装插件。形式如下:

(function($){
     $.fn.pluginName= function(color){
         this.css("color",color);        
         return this;
     }
}(jQuery));

 pluginName支持参数颜色,此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。

 

4、可以接受参数的jQuery插件

我们可以通过定义一个对象,把插件的参数封装到对对象的,已对象的形式传递进去。
(function($){
     $.fn.pluginName= function(option){
         this.css("color",option.color).css("fontSize",option.fontSize+"px");    
         return this;
     }
}(jQuery));

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值 :

(function($){
     $.fn.pluginName= function(option){
         var default = { color:"green",fontSize:12};
         var opt= $.extend(default ,option);
         this.css("color",opt.color).css("fontSize",opt.fontSize+"px");    
         return this;
     }
}(jQuery));

注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。 

 

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/292

关闭

jQuery的淡入淡出

在jQuery中的一些特效中,可以通过四个方法来实现元素的淡入淡出,这四个方法分别是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo(),下面为分别为大家介绍各个方式的使用。

jquery实现点击控制div的显示和隐藏

我们使用点击显示、点击隐藏的时候,一般有两种可选方案,toggle() 的作用就是当对象是显示的就隐藏,当是隐藏的则显示

JQuery 自动触发事件

在JQuery中,可以使用trigger()方法完成模拟操作,trigger()方法不仅能触发浏览器支持的具有相同名称的事件,也可以触发自定义名称的事件。rigger(type[,data])方法有两个参数

jquery版本过低安全漏洞问题

最近在做项目的时候扫描除了很多js版本过低的问题,主要集中在1.x 2.x 还有1.12jQuery&<2.2 jQuery,过滤用户输入数据的正则存在缺陷,可能造成跨站漏洞,具体修复介绍可以查看官方。

基于jQuery实现简单的js模块化

在多人合作完成网页,经常遇到大家的js代码相互影响的问题。现在有许多模块化的前端框架,应该是可以解决这个问题。但本人并非前端开发人员,那些框架都没用过,只对jQuery相对熟悉,就想用jQuery来解决这个问题

是时候和 jQuery 说拜拜了么?

在网络上也时不时会看到,“是时候和jQuery说拜拜了”,最著名的莫过于在2013年的这篇文章You Might Not Need jQuery。

jquery设置属性attr

jquery中用attr()方法来获取和设置元素属性,attr是attribute(属性)的缩写,在jQuery DOM操作中会经常用到attr(),attr()有4个表达式。attr(属性名)、attr(属性名, 属性值)、attr(属性名,函数值)、attr(properties)

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现。事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,这是由于元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完。

jquery的ajax中的参数理解

jquery中的ajax方法参数详解,这里整理了一些供大家参考:url、type、dataType、async、headers、beforeSend (XHR)、cache、data、traditional、contentType、success(data,textStatus,XHR)等

jQuery如何为指定标签添加和删除一个样式

在网页的实际应用中,需要根据不同的条件来改变元素的CSS样式,通过动态的给元素添加删除一个CSS类可以实现此功能,下面通过实例来介绍一下如何实现此种功能。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!