必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶

简介: 必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶

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


学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择。


本教程可能不是最精品的,但一定是最细致的。


jQuery插件开发模式


软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。


根据《jQuery高级编程》的描述,jQuery插件开发方式主要有三种:


通过$.extend()来扩展jQuery


通过$.fn 向jQuery添加新的方法


通过$.widget()应用jQuery UI的部件工厂方式创建


通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等,非常贴心,这里不细说。


而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($('#example').myfunction())。请看下面的例子。


$.extend({


sayHello: function(name) {


console.log('Hello,' + (name ? name : 'Dude') + '!');


}


})


$.sayHello(); //调用


$.sayHello('Wayou'); //带参调用


运行结果:


上面代码中,通过$.extend()向jQuery添加了一个sayHello函数,然后通过$直接调用。到此你可以认为我们已经完成了一个简单的jQuery插件了。


但如你所见,这种方式用来定义一些辅助方法是比较方便的。比如一个自定义的console,输出特定格式的信息,定义一次后可以通过jQuery在程序中任何需要的地方调用它。


$.extend({


log: function(message) {


var now = new Date(),


y = now.getFullYear(),


m = now.getMonth() + 1, //!JavaScript中月分是从0开始的


d = now.getDate(),


h = now.getHours(),


min = now.getMinutes(),


s = now.getSeconds(),


time = y + '/' + m + '/' + d + ' ' + h + ':' + min + ':' + s;


console.log(time + ' My App: ' + message);


}


})


$.log('initializing...'); //调用


但这种方式无法利用jQuery强大的选择器带来的便利,要处理DOM元素以及将插件更好地运用于所选择的元素身上,还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。


插件开发


下面我们就来看第二种方式的jQuery插件开发。


基本方法


先看一下它的基本格式:


$.fn.pluginName = function() {


//your code goes here


}


基本上就是往$.fn上面添加一个方法,名字是我们的插件名称。然后我们的插件代码在这个方法里面展开。


比如我们将页面上所有链接颜色转成红色,则可以这样写这个插件:


$.fn.myPlugin = function() {


//在这里面,this指的是用jQuery选中的元素


//example :$('a'),则this=$('a')


this.css('color', 'red');


}


在插件名字定义的这个函数内部,this指代的是我们在调用该插件时,用jQuery选择器选中的元素,一般是一个jQuery类型的集合。比如$('a')返回的是页面上所有a标签的集合,且这个集合已经是jQuery包装类型了,也就是说,在对其进行操作的时候可以直接调用jQuery的其他方法而不需要再用美元符号来包装一下。


所以在上面插件代码中,我们在this身上调用jQuery的css()方法,也就相当于在调用 $('a').css()。


理解this在这个地方的含义很重要。这样你才知道为什么可以直接调用jQuery方法同时在其他地方this指代不同时我们又需要用jQuery重新包装才能调用,下面会讲到。初学容易被this的值整晕,但理解了就不难。


现在就可以去页面试试我们的代码了,在页面上放几个链接,调用插件后链接字体变成红色。





这是p标签不是a标签,我不会受影响


相关文章
|
2月前
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
47 0
|
11天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
3天前
|
开发框架 JavaScript 前端开发
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
技术经验解读:从零开始学习jQuery(十)jQueryUI常用功能实战
|
3天前
|
JavaScript 前端开发
必知的技术知识:jQuery中queue和dequeue的用法
必知的技术知识:jQuery中queue和dequeue的用法
|
4天前
|
JavaScript PHP Perl
一篇文章讲明白jQuery插件之jqueryeditableplugin
一篇文章讲明白jQuery插件之jqueryeditableplugin
|
2月前
|
前端开发 JavaScript PHP
【PHP开发专栏】jQuery与PHP实现Ajax通信
【4月更文挑战第30天】本文介绍了使用jQuery和PHP实现Ajax通信的步骤。首先,讲解了Ajax的基础和jQuery简化Ajax操作的概念。接着,展示了如何使用jQuery的`$.get()`、`$.post()`和`$.ajax()`方法发送GET和POST请求,以及如何控制请求细节。在PHP端,讨论了接收和响应Ajax请求的方法,包括处理数据、设置响应类型和错误处理。结合jQuery与PHP,开发者能实现高效、无缝的异步数据传输,提升Web应用的用户体验。
|
2月前
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
2月前
|
JavaScript 数据可视化 前端开发
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
jQuery-JS插件-第9次课-使用插件让领导对你刮目相看-附案例作业
27 0
|
2月前
|
JavaScript 前端开发
开发jQuery插件这些就够了
开发jQuery插件这些就够了
38 0
|
JavaScript 前端开发
20个值得开发人员关注的jQuery技术网站和博客
1. John Resig - http://ejohn.org 毫无疑问,jQuery 的缔造者的博客是你首先必须关注的。 2. Filmament Group Lab 这个也是必看之一,因为 jQuery UI 类库就出自这个网站 3.  Learning jQuery 老牌的学习 jQuery 的网站之一,这个网站是由几个作者联合建立 4.  Soh Tnaka Blog 非常酷的一个 jQuery 设计和分享网站,风格非常酷,里面的教程和插件实现非常有艺术感,本人这里强烈推荐。
1066 0