標準のHTML要素にカスタム属性を追加するにはどうすればよいですか？

Question

私はbattlelogが内側エッジブラウザからネイティブアプリケーションを起動するために管理する方法を把握しようとした次：

<button class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1"> 
Play now 
</button> 

などのデータバインド・アクションのようなこれらの属性が追加されているかを理解するために私を助けてくださいどのように処理されているのでしょうか？

Answer 1

data-*属性はカスタム属性です。 Webデベロッパーが自分のコードでJavaScriptで指定したデータを保存するためにのみ使用されます。 jqueryのからdata-intro-step値にアクセスするための例えば

<button id="mybutton" class="btn btn-primary" data-intro-step="4" data-bind-action="matchmake-mp-role" data-track="playnow.matchmake.cqclassic.join" data-bind-intro="next" data-expansion="0" data-game="2048" data-platform="1" data-role="1" data-experience="1"> 
Play now 
</button> 

、開発者は$('#mybutton').attr('data-intro-step')又は$('#mybutton').data('data-intro-step')を入力し、彼のコードでsomethiingでそれを使用することができます。

通常、彼らはjquery-pluginsまたはangularjsのようなPHPまたはjsフレームワークから追加され、jsで使用されます。後で使用するためにjsから追加することもできます。