Jquery插件开发的方法总汇

时间: 2017-12-28阅读: 1946标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

jQuery 常用小技巧分享

整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...

jquery自定义组件开发

jquery的组件已经有很多,但是有可能找不到符合我们需求的组件,所以我们可以动手自己封装一个jquery组件。第一步要知道封装jquery组件的基本语法;第二步调用自定义的组件

每个 Web 开发者应该知道的 jQuery i18n 知识

在设计网站时,一个重要的考虑是国际化。世界上每个地区和国家对于文本、消息、数字和日期应该如何出现有不同的期望。特定应用程序的每个用户期望所有文本和消息以熟悉的格式显示

jQuery的淡入淡出

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

前端UI攻城狮 你们该抛弃jQuery了

Web工程师太依赖jQuery了,某种意义上说jQuery已经成了JavaScript的同义词。但是我们真的需要他么?或许我们应该反思一下什么时候才真的需要jQuery。对我个人而言开始使用jQuery的理由是他把我的工作变得简单多了

jquery设置属性attr

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

jquery寻找节点

通过javascript的getElementsByTagName获取到的节点的元素是一个dom合集对象 , 通过jQuery生成的对象是一个做了包装处理的对象 。注意上面的方法 返回的是jquery 集合 需要继续用jq的方法操作或取值。

jquery动画实现_浅谈jQuery之动画

jQuery提供了JS未能提供的动画效果,利用jQuery的动画效果,可以极大的简化JS动画部分的逻辑,包括:滑入滑出动画、淡入淡出动画、显示隐藏动画、停止动画、自定义动画

jQuery数据缓存$.data 的使用以及源码解析

对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中

在jQuery中使用自定义属性

在jquery中 自定义属性及值,默认以下都是在class=‘acitve‘对象中 进行自定义属性操作:自定义属性格式:data-xxxx;审查元素是看不到该属性的,只能输出控制台可以看到该值。

点击更多...

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