Jquery插件开发的方法总汇

时间: 2017-12-28阅读: 1120标签: 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.休闲娱乐: 直播/交友    优惠券领取   网页游戏   H5游戏

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

jquery中toggleClass(), index()

toggleClass()对设置货已出被选元素的一个或多个类进行切换。该方法检查每个元素中指定的类,如果不存在则添加类,如果已设置则将之删除。这就是所谓的切换效果,不过通过“switch”参数,只能够规定只删除或者添加类。

js和jquery设置css的几种方式

js设置样式的方法: 直接设置style的属性 某些情况用这个设置 !important值无效、直接设置属性(只能用于某些属性,相关样式会自动识别); 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

在jQuery中使用自定义属性

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

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

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

jQuery的淡入淡出

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

jQuery UI有四大功能

jQuery UI (译:jQuery用户界面) 是:以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视控件

jQuery常用知识总结

jQuery是一个轻量级的、兼容多浏览器的JavaScript库。jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程

两种方法使vue实现jQuery调用

vue是前端工程化使用较多的骨架,那么JavaScript就是我们的前端的细胞。MVVM模式让我们体验到前端开发的便携,无需再过多的考虑DOM的操作。而jQuery需要记忆的内容颇多

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

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

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

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

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全