jQueryプラグイン_jqueryの勉強メモを共有する-jsチュートリアル-php.cn

プラグインは jQuery 拡張機能とも呼ばれ、特定の標準アプリケーションインターフェイスに従って作成されたプログラムです。現在、数千を超える jQuery プラグインがあり、世界中の開発者によって作成、検証、改善されています。 jQuery 開発者にとって、これらのプラグインを直接使用すると、システムアーキテクチャがすぐに安定し、プロジェクトコストが節約されます。

1. プラグインの概要

プラグインは、特定の仕様を組み合わせたアプリケーションを作成するための jQuery のコアコードに基づいています。つまり、プラグインも jQuery コードであり、js ファイルの導入を通じて挿入できます。

プラグインには多くの種類があり、大きく分けると、UI クラス、フォームと検証クラス、入力クラス、特殊効果クラス、Ajax クラス、スライディングクラス、グラフィックスと画像クラス、ナビゲーションクラス、総合ツールクラス、アニメーションクラスなど

プラグインを導入するには、基本的に次のような特定の手順が必要です:

1. jquery.js ファイルは、すべてのプラグインの前にインポートする必要があります。
たとえば、最も一般的に使用されるフォーム検証プラグインである validate には、最も基本的なプラグインファイル jquery.validate.min.js に加えて、messages_zh.js やさまざまな国のその他の言語パッケージもあります。あなたが使用します。

このプラグインの使用方法についてはここでは説明しません。jQuery プラグイン - Validation Plugin に関するビデオを MOOC.com で確認できます。このビデオでは、このプラグインのさまざまな設定項目と拡張機能について詳しく説明しています。で。

同様に、優れたプラグインには詳細なドキュメントが不可欠です。ドキュメントを詳細に読んでローカルでテストすることで、さまざまなプラグインをすぐに使い始めることができます。

Cookie を管理するためのプラグイン (Cookie など) など、他の人が作成したさまざまなプラグインも使用できます。

プラグインは、jQuery 公式 Web サイトのプラグインモジュールにあります。

2. カスタムプラグイン

先ほどは、他の人が提供した非常に便利な優れたプラグインを使用しました。市場で満足のいくプラグインが見つからず、他の人が使用できるように自分でプラグインをパッケージ化したい場合。次に、jQuery プラグインを自分で作成する必要があります。

1. プラグインの種類

機能分類によれば、プラグイン形式は次の 3 つのカテゴリに分類できます。

2. プラグインの基本ポイント

主に、プラグインによって引き起こされるさまざまな競合、エラー、その他の問題を解決するために使用されます。

プラグインは、チェーン可能な操作を保証するために jQuery オブジェクトを返す必要があります。
プラグイン内で $ を使用しないでください。使用する場合は、クロージャを使用して jQuery を渡します。これにより、プラグインは引き続き $ を jQuery のエイリアスとして使用します。

3. プラグインを作成します

;(function($){//这里将$符作为匿名函数的形参
/*在此处编写代码，可使用$作为jQuery的缩写别名*/
})(jQuery);//这里将jQuery作为实参传递给匿名函数了

ログイン後にコピー

プラグインの要件が、ドロップダウンメニューを実装し、要素が移動されたときに対応するドロップダウンリストを表示し、要素が移動されたときにそれを格納することであるとします。展開時の文字色も設定できます。慣例によれば、プラグインを作成する場合、HTML 構造にいくつかの制約を設けることができます。ここで、ページが次の HTML 構造を持つと仮定します:

在这里，我们就对我们的插件实现效果有了第一个要求，必须在对于需要hover展现的元素内部下面建立 ul 列表，且 className 必须为 nav 。（插件内部都是根据该条件来做文章）

下面就可以开始编写我们的插件了。保存为 jQuery.nav.js ，（符合上面所说的要求，默认已经导入）

;(function($){
 $.extend({ //插件定义在全局方法上
  "nav" : function (color){//传参，这里只是抛砖引玉，在您编写的时候，参数选项可以更加丰富，例如传入json对象等等
   $('.nav').css({//对展开的下拉列表设置样式，此处在下面进行详细说明
    "list-style" : "none",
    "margin" : 0,
    "padding" : 0,
    "display" : "none",
    "color":color//由用户控制hover时，展现出来列表的文字颜色
   });
   $('.nav').parent().hover(//这里用到了.nav的父节点（就是hover到的元素）
    //因为我们只能在插件要求的范围内进行设定，若是使用了外部的选择器，就违背了这个原则
    function (){
     $(this).find(".nav").stop().slideDown("normal");//注意我们在这里使用了jquery的动画方法
    },function (){
     $(this).find(".nav").stop().slideUp("normal");//注意stop()的使用，不然会有类似手风琴效果的出现，但那并不是我们需要的
    });
  }
 });
})(jQuery);

ログイン後にコピー

注意：这里使用css方法只是为了方便，在真实插件编写过程中，若存在如此大量的css样式编写时，推荐在外部定义css样式，例如可改写为：

插件依赖的css，需和插件一起导入html中

.hover{/*插件必须样式*/
 list-style: none;
 margin:0;
 padding: 0;
 display: none;
}

ログイン後にコピー

在插件内部修改。

$('.nav').addClass("hover");//将CSS与jQuery分离开来
$('.nav').css("color",color);//存在用户设置时启用，不存在就不用了（进行判断）

ログイン後にコピー

刚刚说的都是插件的js文件，最后要起到效果，别忘了页面的js中加上那么一句话（当前插件定义在全局方法上）

$(function (){
 $.nav("#999");//调用插件实现的全局方法，并且设置其展现背景颜色为#999。
});

ログイン後にコピー

就这样，我们的全局插件就编写，而且调用完成了，在你的页面刷新看看，是不是已经有了效果呢？

但是，因为我们的方法定义在全局上，现在只要页面中出现了我们插件所规定的结构，就会存在hover展现效果，但是有时我们往往想要的不是这样，我们希望它在局部，在我指定的元素调用。所以我们需要对其进行一些改造，让其变成局部方法，其实也很简单：

;(function($){
 $.fn.extend({//定义为局部方法
  "nav" : function (color){
   $(this).find('.nav').addClass('hover');//上面已经说过了,此时this指向调用该方法的元素
   $(this).find('.nav').css("color",color);//在当前元素下，增加了一次find筛选，实现在对应的元素中执行。
   $(this).find('.nav').parent().hover(
    function (){
     $(this).find(".nav").stop().slideDown("normal");
    },function (){
     $(this).find(".nav").stop().slideUp("normal");
    });
   return this;//返回当前的对象
  }
 });
})(jQuery);

ログイン後にコピー

我们去刷新一下浏览器。你会发现，咦，怎么没效果？当然因为原来的代码是直接在全局调用的，现在变成局部方法了，显然就不能这样做了，需要做一点改变：

我这里就不贴html代码了，但是希望您在实践时能把上面的html代码在其下复制几份，以达到思考其实现的效果

$(function (){//这里的eq(0)代表只对第一份起到效果，复制后的没有效果。
 //（你可以把上面的find筛选删除之后再试试，您会发现，他又对余下的几份起效果了）
 $(".list").eq(0).nav("red");//调用局部方法
});

ログイン後にコピー

现在回过头再把我们写的插件代码对应上面写的插件编写的要点，思考一下，我们还有哪些没有做到？就会发现，基本已经能对应上了。现在我们就完成了一个下拉菜单的插件。

其实编写插件并不难，最主要的是在我们编写插件的时候，一定要时刻注意这样的要点，每一个细节都遵循在大家实践过程中总结出来的最佳实现，才能自定义实现一个良好的插件。

代码首先是写个人看的，再然后才是给机器看的。