data 属性を持つ HTML をよく見かけますが、これらは HTML5 のカスタム属性であり、JS を直接呼び出すことができて非常に便利ですが、幸いにも jQuery と共通です。 IE の下位バージョンを含むすべてのブラウザで通常どおり使用できます。使い方を簡単に紹介します: 1. 簡単な使い方 コードをコピーしますは次のとおりです: コードをコピーしますコードは次のとおりです: $(function(){ var _widget= $(" #widget").attr("data -text");alert(_widget);//data-text="123456" なので、123456 を出力します }) 2. を使用します$.fn.extend でプラグインを作成します コードをコピーコードは次のとおりです: これはテスト領域です コードをコピーします コードは次のとおりです: //プラグイン拡張部分;(function($){ $.fn.extend({ Test:function(config){ /*** @param 効果 効果 * カスタム属性が に渡された場合、config||{} はデフォルト値を実行しません*/ // デフォルト値を設定 config=$.extend({ effect:'click', } ,config||{}); var effect=config.effect; >if(effect=='click'){ $(this).click (function(){ alert('this click'); }) }else if(effect= ='マウスオーバー'){ $(this).mouseover(function(){ alert("これはマウスオーバーです"); }) } } }) })(jQuery) コードをコピー コードは次のとおりです: //HTML の呼び出し部分、データ属性はこれに依存します$(function(){ var _widget= $("#widget").attr("data- widget-config"); // 文字列を json オブジェクトに変換するには 2 つの方法がありますvar widgetConfigJSON=eval("(" _widget ")"); // var widgetConfigJSON = (new Function( "return " _widget))(); $("#widget").Test( widgetConfigJSON); //HTML の data 属性は data-widget-config="{effect:'click' であるため}" の場合、ここでクリック イベントが呼び出されます。 data-widget-config="{effect:'mouseover'}" の場合、マウスが上に移動したときにイベントを呼び出します。})