UI
クラス、jQuery プラグインがあります。 code/81.html " target="_blank">フォーム検証、入力クラス、特殊効果クラス、Ajax
クラス、スライディング クラス、ナビゲーション クラス、ツール クラス、アニメーション クラスなど。 jQuery
插件有很多,有UI
类,表单验证,输入类,特效类,Ajax
类,滑动类,导航类,工具类,动画类等等。
jQuery
的插件主要分为三类:
1、封装对象方法的插件:也就是基于某个DOM元素的jQuery对象,局部性 2、封装全局函数的插件:将独立的函数添加到jquery的命名空间之下。jquery.trim()就是jquery内部作为全局函数的插件添加到内核上去的。 3、选择器插件:扩充自己喜欢的一些选择器。类似于.toggle()
1. 插件的文件名推荐为 jquery.[插件名].js,例如jquery.validate.js 2. 所有的对象方法都应当附加到jQuery.fn对象上,而所有的全局函数都应当附加到jQuery对象本身上 3. 在插件内部,this指向的是当前通过选择器获取的jQuery对象,而不像一般的方法那样,例如click()方法,内部的this指向的是DOM元素 4. 可以通过this.each来遍历所有元素 5. 所有的方法或函数插件,都应当以分号结尾,否则压缩时可能出问题,有的为了更加稳妥些,在插件的开始处加上一个分号 6. 插件应该返回一个jQuery对象,这样可以保证插件的可链式操作。除非插件需要返回的是一些需要获取的量,例如字符串或者数组等 7. 尽量利用闭包技巧历来避免变量名的冲突 8. 引入的自定义插件必须在jQuery库后面
jQuery
插件开发方式主要有三种:
通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jquery ui的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发,而第一种方法是在jQuery
命名空间上添加了一个静态方法,并不能让我们选中DOM元素,然后再调用该方法。而第三种并不常用,也较为复杂
在开始编写jQuery
插件时,我们有必要了解一下插件的基本结构,所有的jQuery
插件都声明为jQuery.fn
对象的方法:
jQuery.fn.showPlugin = function () { //code here };
我们使用如下代码使用插件:
$("#plugin").showPlugin();
这里,我并没有使用$
,这是为了避免命名冲突,如果要用 $
的话,可以像下面这样把插件代码封装在一个自执行的匿名函数中,然后传入参数jQuery
(function($){ jQuery.fn.showPlugin = function () { //code here }; })(jQUery);
.extend()
允许你使用一个或多个对象扩展基准对象,扩展的方式是依序将右边的对象合并到基准对象(左边第一个对象)。
;(function($){ $.extend({ 'nav' : function () { } }) })(jQuery);
我们通过如下方法使用该全局方法:
$.nav();
前面(见:浅析jQuery整体框架与实现(上))我们说过,$.extend
是全局性的,而$.fn.extend
是局部性的,前面之所以要加分号是因为为了防止在此之前引入的js
文件没有加分号
$.fn.myPlugin = function() { //在这里面,this指的是用jQuery选中的元素 //example :$('a'),则this=$('a') this.css('color', 'red'); }
this
指代jQuery
选择器返回的集合。在插件里的this
,经过了一些封装处理,this
就是表示jQuery
对象。而不需要再次使用$()
进行包装了
要让插件实现链式调用只需要return
该对象即可:
$.fn.myPlugin = function() { this.css('color', 'red'); return this.each(function() { //对每个元素进行操作 $(this).append(' ' + $(this).attr('href')); })) }
使用return
this.each(function () {}
jQuery
プラグインは主に3つに分類されます: $.fn.myPlugin = function(options) { //经常用options表示有多个参数。 var defaults = { 'color': 'red', 'fontSize': '12px' }; var settings = $.extend(defaults, options); return this.css({ 'color': settings.color, 'fontSize': settings.fontSize }); }
$('a').myPlugin({ 'color': '#2C9929' });
jQuery
の3つがあります主なプラグイン開発方法:🎜rrreee 🎜通常、単純なプラグイン開発には 2 番目の方法を使用します。最初の方法は、静的メソッドを jQuery
名前空間に追加することです。 DOM 要素を選択してメソッドを呼び出します。 3 番目のタイプは一般的には使用されず、より複雑です🎜🎜プラグインの構造🎜🎜jQuery
プラグインを書き始めるときは、プラグインの基本構造を理解する必要があります。すべての jQuery
code> プラグインは、jQuery.fn
オブジェクトのメソッドとして宣言されます: 🎜rrreee🎜 プラグインを使用するには、次のコードを使用します: 🎜rrreee🎜ここでは、$
を使用しませんでした。これは、名前の競合を避けるために、$
を使用したい場合は、プラグイン コードを自己コードでカプセル化できます。 匿名関数 を実行し、パラメータ jQuery
を渡します。 >🎜rrreee🎜$.extend🎜🎜.extend()
を使用すると、右側のオブジェクトをベース オブジェクト (左側の最初のオブジェクト) にマージすることで、1 つ以上のオブジェクトがベース オブジェクトを拡張します。 ) 順番通りに。 🎜rrreee🎜このグローバル メソッドは次のように使用します: 🎜rrreee🎜以前 (参照: jQuery フレームワーク全体と実装の簡単な分析 (パート 1))、$.extend
はグローバルであると述べました。 $.fn.extend
はローカルです。セミコロンが追加される理由は、以前に紹介した js
ファイルにセミコロンが含まれないようにするためです🎜rrreee🎜this は、jQuery
セレクターによって返されるコレクションを参照します。プラグインの this
は、カプセル化処理を経て、jQuery
オブジェクトを表します。パッケージ化のために $()
を再度使用する必要はありません🎜🎜チェーン呼び出し🎜🎜 プラグインにチェーン呼び出しを実装するには、オブジェクトを return
するだけで済みます。 🎜rrreee🎜 return
this.each(function () {}
を使用してチェーン操作を実現します。🎜🎜複数のパラメータを受け取ります🎜rrreee🎜 呼び出すと、フォント サイズが変更されますプラグインのデフォルト値を使用します: 🎜rrreee以上がjQuery プラグインの例について共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。