[2021/09/28] JavaScript JQuery Effects関連のメソッドの使い方(show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle) (No.281)
[2021/09/01] JavaScript タイマーの使い方(setTimeout, setInterval, clearTimeout, clearInterval) (No.280)
[2021/08/26] JavaScript jQueryの使い方(カスタム属性)HTMLタグに任意の属性を付加する方法 (No.279)
[2021/07/16] JavaScript IndexedDB の使い方7(カーソル処理内での外部関数の実行) (No.277)
-
以下の記事では HTMLオブジェクト要素を表示・非表示するために JQuery メソッドの show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle を使いました。
(⇒JavaScript JQuery Effects関連のメソッドの使い方(show, hide, toggle, fadeIn, fadeOut, slideUp, slideDown, slideToggle))
今回は要素に対して最終的な CSS の値を指定して、それになるまでの動きをさせる JQuery メソッドの animate ついて説明します。
■このページの内容
■animate メソッドの書式
JQuery メソッドの animate の書式は以下の通りです。//animateの書式 .animate( cssproperties [, duration] [, easing] [, complete] ) .animate( cssproperties, options ) 1.0追加 // cssproperties : CSSプロパティオブジェクト(複数指定可) // [duration] : フェードするアニメーション時間を指定(数値型と文字列型) // ・数値型はミリ秒の値 // ・文字列型は "slow"(600ミリ秒) "fast"(200ミリ秒) の値 // [easing] : アニメーションの変化の種類を指定("linear","swing") // ・"linear" を指定すると直線的に変化 // ・"swing" を指定すると最初ゆっくり動きだし最後の方は早く変化 // [callback] : アニメーション完了後に実行したい関数を指定 // options : duration等をオブジェクトで指定 //
■animate メソッドの簡単な例
それでは animate の簡単な例を以下に示します。 この例は div で囲まれた要素の透明度である opacity を通常から「0.5」へ、さらに「0.5」から通常にする処理です。<html> <head> <meta charset="utf-8"> <title>test animate</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //透明度0.5処理 function animateOpacityHalf() { $("#menu").animate({ opacity: 0.5 // 透明度0.5へ }, 1000 ); } //透明度1.0処理 function animateOpacityNormal() { $("#menu").animate({ opacity: 1.0 // 透明度1.0へ }, 1000 ); } </script> </head> <body> <h2>test animate</h2> <div id="menu"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="animateOpacityHalf();">OpacityHalf</button> <button onclick="animateOpacityNormal();">OpacityNormal</button> </body> </html>
■CSS プロパティを複数設定する
上記の簡単な例では opacity のみを指定しましたが、 以下の例では marginLeft marginTop の2個を追加しました。
CSS プロパティで指定できるのは値として数値であるものです。 例では marginLeft にはピクセル値を設定していますが、これは数値として判断できるためです。 なお、単位として % や em も使える様です。<html> <head> <meta charset="utf-8"> <title>test animate</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //透明度0.5処理 function animateOpacityHalf() { $("#menu").animate({ opacity: 0.5, // 透明度0.5へ marginLeft: "100px",// 左マージン100px marginTop: "100px" // 上マージン100px }, 1000 ); } //透明度1.0処理 function animateOpacityNormal() { $("#menu").animate({ opacity: 1.0, // 透明度1.0へ marginLeft: "0px", // 左マージン0px marginTop: "0px" // 上マージン0px }, 1000 ); } </script> </head> <body> <h2>test animate</h2> <div id="menu"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="animateOpacityHalf();">OpacityHalf</button> <button onclick="animateOpacityNormal();">OpacityNormal</button> </body> </html>
上の例は div で囲まれた領域が「OpacityHalf」ボタンでは右下に移動し、「OpacityNormal」ボタンでは左上に戻った様に表示されます。
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript jQueryの使い方(セレクタ)その3・セレクタの存在確認
⇒JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
PR -
以前、ウインドウ的に div 領域を表示・非表示するために JQuery メソッドの fadeIn, fadeOut を使いましたが、
(⇒JavaScript jQueryでモーダルウインドウ風の表示をする方法(css:display, css:z-index, fadeIn, fadeOut))
今回は要素に対する表示について表示・非表示処理をより細かく制御できる JQuery メソッドについて説明します。
■このページの内容
- 先ずはオブジェクトの表示・非表示の簡単な例
- 各種の JQuery メソッド
- easing の指定(変化速度)
- easing の指定(変化速度)jQuery UI Effect プラグインを導入
- フェードイン・アウト処理(コールバック関数の例を含む)
■先ずはオブジェクトの表示・非表示の簡単な例
JQuery メソッドの show, hide を使い div HTMLオブジェクトを表示・非表示の処理を行います。<html> <head> <meta charset="utf-8"> <title>先ずはオブジェクトの表示・非表示の簡単な例</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function fncShow() { $("#menu").show(); } //非表示処理 function fncHide() { $("#menu").hide(); } </script> </head> <body> <h2>先ずはオブジェクトの表示・非表示の簡単な例</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncShow();">表示</button> <button onclick="fncHide();">非表示</button> </body> </html>
この show, hide には引数が指定でき、表示・非表示にアニメーション的な動きを付加できます。 アニメーションと言っても漫画的な動きでは無く、表示していく動作の時間を指定したりして、画面上では連続的な変化が付けられます。
それでは、以下に各種の JQuery メソッドの説明を記します。
■各種の JQuery メソッド
関数 書式 説明 show .show() .show( duration [, callback] ) .show( [duration] [, easing] [, callback] ) .show( [options] ) duration:フェードするアニメーション時間を指定 easing :アニメーションの変化の種類を指定 callback:アニメーション完了後に実行したい関数を指定 options :duration等をオブジェクトで指定
表示処理を行う hide .hide() .hide( duration [, callback] ) .hide( [duration] [, easing] [, callback] ) .hide( [options] ) ※引数は show と同様
非表示処理を行う toggle .toggle() .toggle( duration [, callback] ) .toggle( [duration] [, easing] [, callback] ) .toggle( [options] ) ※引数は show と同様
表示・非表示の反転 fadeIn .fadeIn( duration [, callback] ) .fadeIn( [duration] [, easing] [, callback] ) .fadeIn( [options] ) ※引数は show と同様
フェードイン fadeOut ※書式は fadeIn と同様
フェードアウト slideUp ※書式は fadeIn と同様
スライドアップ slideDown ※書式は fadeIn と同様
スライドダウン slideToggle ※書式は fadeIn と同様
スライドアップ、またはダウン
これらのメソッドはちょっと引数がいろいろあって、複雑にみえますが先ずは duration について説明します。
duration はそのメソッドのアニメーションの時間を指定します。指定する引数は数値型と文字列型があります。
数値型はミリ秒の値の指定で、文字列型は "slow" "fast" の値を指定します。 (以下の様な感じです)//数値型 object.show(200); object.hide(400); //文字列型 object.show("slow"); //show(600)の場合と同様 object.hide("fast"); //hide(200)の場合と同様 object.hide(); //hide(400)の場合と同様(デフォルト値) //ここでの「object」はJQueryオブジェクト
それでは show, hide, toggle を使った例(メニューブロックの表示・非表示)を示します。<html> <head> <meta charset="utf-8"> <title>test show/hide/toggle</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function animateShow() { $("#menu").show(400); // 表示 } //非表示処理 function animateHide() { $("#menu").hide("slow"); // 非表示 } //表示・非表示の反転処理 function animateToggle() { $("#menu").toggle("fast"); // 表示・非表示 } </script> </head> <body> <h2>test show/hide/toggle</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="animateShow();">show</button> <button onclick="animateHide();">hide</button> <button onclick="animateToggle();">toggle</button> </body> </html>
上の例は、メニューの様なものを表示する div で囲まれた領域を表示・非表示の処理を行います。 表示する時には下方向にするすると下がってくる感じで表示され、隠す時には上方向にさっと上がる感じで消えていきます。
■easing の指定(変化速度)
easing はHTMLオブジェクトの変化の種別を指定します。 linear を指定すると直線的に変化し swing を指定すると最初ゆっくり動きだし最後の方は早く変化します。 尚、省略した場合は swing になります。
jQuery UI Effect プラグインを導入することでその他のイーシングを用いることが可能な様です。<html> <head> <meta charset="utf-8"> <title>test show/hide easing</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function fncShowSwing() { $("#menu").show("slow", "swing"); // swing 表示 } function fncShowLinear() { $("#menu").show("slow", "linear"); // linear 表示 } //非表示処理 function fncHideSwing() { $("#menu").hide("slow", "swing"); // swing 非表示 } function fncHideLinear() { $("#menu").hide("slow", "linear"); // linear 非表示 } </script> </head> <body> <h2>test show/hide easing</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncShowSwing();">show swing</button> <button onclick="fncHideSwing();">hide swing</button> <br /> <button onclick="fncShowLinear();">show linear</button> <button onclick="fncHideLinear();">hide linear</button> </body> </html>
■easing の指定(変化速度)jQuery UI Effect プラグインを導入
jQuery UI Effect プラグインを導入した例を以下に示します。<html> <head> <meta charset="utf-8"> <title>test show/hide easing</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script type="text/javascript"> //表示処理 function fncShowEaseInQuad() { $("#menu").show("slow", "easeInQuad"); // easeInQuad 表示 } function fncShowEaseInElastic() { $("#menu").show("slow", "easeInElastic"); // easeInElastic 表示 } //非表示処理 function fncHideEaseInOutQuad() { $("#menu").hide("slow", "easeInOutQuad"); // easeInOutQuad 非表示 } function fncHideEaseInCubic() { $("#menu").hide("slow", "easeInCubic"); // easeInCubic 非表示 } </script> </head> <body> <h2>test show/hide easing</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncShowEaseInQuad();">show easeInQuad</button> <button onclick="fncHideEaseInOutQuad();">hide easeInOutQuad</button> <br /> <button onclick="fncShowEaseInElastic();">show easeInElastic</button> <button onclick="fncHideEaseInCubic();">hide easeInCubic</button> </body> </html>
easing として指定できるパラメータは以下のものがあります。 動作がどの様になるかは詳しく調べていませんが、後々調べたいと思います。linear swing easeInQuad easeOutQuad easeInOutQuad easeInCubic easeOutCubic easeInOutCubic easeInQuart easeOutQuart easeInOutQuart easeInQuint easeOutQuint easeInOutQuint easeInExpo easeOutExpo easeInOutExpo easeInSine easeOutSine easeInOutSine easeInCirc easeOutCirc easeInOutCirc easeInElastic easeOutElastic easeInOutElastic easeInBack easeOutBack easeInOutBack easeInBounce easeOutBounce easeInOutBounce
■フェードイン・アウト処理(コールバック関数の例を含む)
フェードイン、フェードアウト処理の例を以下に示します。 フェードインとは徐々に表示が現れて完全に見える様になる処理であり、フェードアウトとは徐々に表示が薄れていき最後に完全に見えなくなる処理です。
フェードイン、フェードアウトには処理時間が長くないと実感できませんので fadeIn, fadeOut, fadeToggle メソッドの第一引数には「2000」(2秒)と指定します。
また fadeToggle メソッドにはコールバック関数の指定をしています。 コールバック関数はメソッドの処理が終わった時点で呼ばれます。 今回の関数は div 領域が表示・非表示の状態をアラートしています。
<html> <head> <meta charset="utf-8"> <title>test fadeIn/fadeOut/fadeToggle</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> //表示処理 function fncFadeIn() { $("#menu").fadeIn(2000, "swing"); //2秒でフェードイン } //非表示処理 function fncFadeOut() { $("#menu").fadeOut(2000, "linear"); //2秒でフェードアウト } //表示・非表示反転処理 function fncFadeToggle() { $("#menu").fadeToggle(2000, "linear", fncCallback); } //fadeToggle 処理後に呼ばれる関数宣言 function fncCallback() { if ($("#menu").css("display") == "block") { alert("表示"); } else { alert("非表示"); } } </script> </head> <body> <h2>test fadeIn/fadeOut/fadeToggle</h2> <div id="menu" style="display:none"> <ul> <li>menu-1</li> <li>menu-2</li> <li>menu-3</li> </ul> </div> <br /> <button onclick="fncFadeIn();">fadeIn swing</button> <button onclick="fncFadeOut();">fadeOut linear</button> <button onclick="fncFadeToggle();">fadeToggle linear</button> </body> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript jQueryの使い方(セレクタ)その3・セレクタの存在確認
⇒JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
-
何秒後かに何かの処理を行いたい、もしくは一定時間毎に何かの処理をしたい場合に JavaScript では以下の関数を使います。関数 書式 説明 setTimeout id = setTimeout(func, timeval) id :タイムアウト処理の識別ID func :タイムアウト時に実行する関数 timeval:タイムアウト時間(ミリ秒)
タイムアウト時の関数設定を行う setInterval id = setInterval(func, timeval) id :タイマー処理の識別ID func :タイマー時間毎に実行する関数 timeval:タイマー時間(ミリ秒)
タイマー処理の関数設定を行う clearTimeout clearTimeout(id) id :タイムアウト処理の識別ID
タイムアウト処理を中止する
ここで指定される id は setTimeout で返されたものを指定clearInterval clearInterval(id) id :タイマー処理の識別ID
タイマー処理を中止する
ここで指定される id は setInterval で返されたものを指定
今回は、これらの関数を使って指定時間が過ぎた時に何かの処理を行うものと、 ある一定時間ごとに処理を繰り返すものの例を記したいと思います。
■このページの内容
- 指定時間が過ぎた時に何かの処理を行う簡単な例(タイムアウト処理)
- 指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例
- 一定時間ごとに処理を繰り返す簡単な例
- 一定時間ごとの処理を途中で止める簡単な例
■指定時間が過ぎた時に何かの処理を行う簡単な例(タイムアウト処理)
以下の例では「タイマー開始」 button タグのクリックイベントでタイムアウト処理を行う関数 StartTimeout を呼出しています。
StartTimeout ではタイムアウト関数である TimeoutProc を宣言してそれを setTimeout に渡すことで タイムアウト処理が開始されます。
setTimeout のタイムアウト時間はミリ秒での指定なので、10秒の場合は1000倍した10000を指定します。
「タイマー開始」をクリックするとボタンが押下不可になり、5秒後に「タイムアウト!」のメッセージが表示され、 「タイマー開始」が押下可能となります。<html> <head> <meta charset="utf-8"> <title>Timer - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 1</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> </body> <script type="text/javascript"> function StartTimeout() { //ボタン押下不可設定 $("#StartButton").attr("disabled", true); //タイムアウト関数宣言 var TimeoutProc = function() { alert("タイムアウト!"); //ボタン押下許可設定 $("#StartButton").attr("disabled", false); }; var timeoutVal = 5 * 1000; //5秒 //タイムアウトの設定 setTimeout(TimeoutProc, timeoutVal); } </script> </html>
■指定時間が過ぎる前にタイムアウト関数の実行を止める簡単な例
上記の例に「タイマー停止」ボタンを設置し「タイマー開始」で設定されたタイムアウト処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setTimeout でタイムアウト関数を設定しますが、 戻り値として返されるタイムアウトidを変数に退避します。
「タイマー停止」で呼ばれる StopTimeout ではタイムアウトidを clearTimeout に渡してタイムアウト処理を中止します。
<html> <head> <meta charset="utf-8"> <title>Timer - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 2</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <button type="button" id="StopButton" onclick="StopTimeout();" disabled="disabled">タイマー停止</button> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //開始ボタン不可、停止ボタン許可設定 $("#StartButton").attr("disabled", true); $("#StopButton").attr("disabled", false); //タイムアウト関数宣言 var TimeoutProc = function() { alert("タイムアウト!"); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); }; var timeoutVal = 5 * 1000; //5秒 //タイムアウトの設定 id = setTimeout(TimeoutProc, timeoutVal); } //タイマー停止 function StopTimeout() { //タイムアウトの停止 clearTimeout(id); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); } </script> </html>
■一定時間ごとに処理を繰り返す簡単な例
一定時間ごとに繰り返す処理と言えば、時計の様に時刻を表示する処理があります。
これを実現するため「タイマー開始」ボタンを設置し、それをクリックすることで1秒毎に現在時刻を表示する例を示します。
以下の例では「タイマー開始」ボタンのクリックイベントでタイマー処理を行う関数 setInterval を呼出しています。 StartTimeout ではタイマー関数である TimeProc を宣言してそれを setInterval に渡すことで タイムアウト処理が開始されます。
このソースでは一旦「タイマー開始」ボタンのクリックすると止める手立てがありませんので、ずっと時刻表示が続きます。 (なおブラウザの再読込で最初の状態になりますが...)<html> <head> <meta charset="utf-8"> <title>Timer - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 3</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <br /><br /> 時刻:<span id="ptime"></span> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //ボタン押下不可設定 $("#StartButton").attr("disabled", true); //タイマー関数宣言 var TimeProc = function() { //Dateオブジェクトを作成する var dateobj = new Date(); //時刻表示 $("#ptime").text(dateobj.toTimeString()); }; var timeoutVal = 1 * 1000; //1秒 //タイマーの設定 id = setInterval(TimeProc, timeoutVal); } </script> </html>
■一定時間ごとの処理を途中で止める簡単な例
上記の例ではタイマー処理を中断できなかったので「タイマー停止」ボタンを設置し、「タイマー開始」で設定されたタイマー処理の中断を行います。
「タイマー開始」で呼ばれる StartTimeout では setInterval でタイムアウト関数を設定しますが、 戻り値として返されるタイマーidを変数に退避します。
「タイマー停止」で呼ばれる StopTimeout ではタイマーidを clearInterval に渡してタイマー処理を中止します。
<html> <head> <meta charset="utf-8"> <title>Timer - 4</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 4</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <button type="button" id="StopButton" onclick="StopTimeout();" disabled="disabled">タイマー停止</button> <br /><br /> 時刻:<span id="ptime"></span> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //開始ボタン不可、停止ボタン許可設定 $("#StartButton").attr("disabled", true); $("#StopButton").attr("disabled", false); //タイマー関数宣言 var TimeProc = function() { //Dateオブジェクトを作成する var dateobj = new Date(); //時刻表示 $("#ptime").text(dateobj.toTimeString()); }; var timeVal = 1 * 1000; //1秒 //タイマーの設定 id = setInterval(TimeProc, timeVal); } //タイマー停止 function StopTimeout() { //タイマーの停止 clearInterval(id); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); } </script> </html>
ここまでは setInterval や setTimeout の引数としての関数を別の変数で宣言した後で、 それぞれの関数に渡していました。 その引数のところに無名関数として直接に宣言する方法もありますので、上のソースを変更してみます。<html> <head> <meta charset="utf-8"> <title>Timer - 4 - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Timer - 4 - 1</h2> <button type="button" id="StartButton" onclick="StartTimeout();">タイマー開始</button> <button type="button" id="StopButton" onclick="StopTimeout();" disabled="disabled">タイマー停止</button> <br /><br /> 時刻:<span id="ptime"></span> </body> <script type="text/javascript"> var id; //タイマー開始 function StartTimeout() { //開始ボタン不可、停止ボタン許可設定 $("#StartButton").attr("disabled", true); $("#StopButton").attr("disabled", false); var timeVal = 1 * 1000; //1秒 //タイマーの設定(関数宣言を共に) id = setInterval(function() { //Dateオブジェクトを作成する var dateobj = new Date(); //時刻表示 $("#ptime").text(dateobj.toTimeString()); }, timeVal); } //タイマー停止 function StopTimeout() { //タイマーの停止 clearInterval(id); //開始ボタン許可、停止ボタン不可設定 $("#StartButton").attr("disabled", false); $("#StopButton").attr("disabled", true); } </script> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript jQueryの使い方(セレクタ)その3・セレクタの存在確認
⇒JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
-
以前以下の記事にてテーブルの行タグである <tr> にカスタム属性を付加することを行いました。
⇒JavaScript jQueryで table の操作する方法その4・データ行の追加と削除
今回は、別のタグにカスタム属性を追加する例を記したいと思います。
■このページの内容
■カスタム属性の付け方
以下の例では button タグに data-index と名前を付けたカスタム属性を付加しています。<button name="button1" type="button" data-index="1" >ボタン</button>
カスタム属性のタグ名は data- の後に任意で小文字の英数文字で指定します。 文字列の中にハイフンを入れても良いようです。
このカスタム属性を参照するには jquery では data() または attr() 関数を使います。 以下の様な感じです。var index1 = $("button[name=button1]").data("index"); //data()の場合は"data-"を省略 var index2 = $("button[name=button1]").attr("data-index");
■カスタム属性の簡単な例
以下の例は button を2個設置し、最初の button にカスタム属性「data-index」を設定します。 さらに、2番目の button のクリックイベントで最初の button のカスタム属性を取得し、表示しています。
<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 1</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 1</h2> <button name="button1" type="button" data-index="10" >ボタン1</button> <button name="button2" type="button" onclick="getCustomTag();false;" >ボタン2</button> </body> <script type="text/javascript"> function getCustomTag() { //[button1]の[data-index]の取得 var index1 = $("button[name=button1]").attr("data-index"); var index2 = $("button[name=button1]").data("index"); //表示(同じ値が表示される) alert("data-index:" + index1 + " , " + index2); } </script> </html>
■複数の button タグのクリックイベントでのカスタム属性の取得の例
以下の例では button を4個設置し、各ボタンのイベント処理で、自分自身のカスタム属性の値を取得する例を示します。<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 2</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 2</h2> <button name="button-attr" type="button" data-index="1" >ボタン1</button> <button name="button-attr" type="button" data-index="2" >ボタン2</button> <button name="button-attr" type="button" data-index="3" >ボタン3</button> <button name="button-attr" type="button" data-index="4" >ボタン4</button> </body> <script type="text/javascript"> //ページが読込まれた直後に実行 $(document).ready(function() { //name属性が"button-attr"のクリックイベント設定 $(document).on("click","button[name=button-attr]",function() { //[data-index]の取得 var index = $(this).attr("data-index"); alert("data-index:" + index); return false; }); }); </script> </html>
■1個のタグに複数のカスタム属性を宣言した例
以下では1個の button タグの中に複数のカスタム属性を宣言した例を示します。
実際問題として、1個のタグに各種の情報を持ちたい場合は想定されるので、やってみました。
「data-d1」「data-d2」としたカスタム属性を宣言しています。 各ボタンをクリックした時に3個のカスタム属性を取得し表示しています。
<html> <head> <meta charset="utf-8"> <title>Custom Tag attribute - 3</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> </head> <body> <h2>Custom Tag attribute - 3</h2> <button name="button-attr" type="button" data-index="1" data-d1="001" data-d2="101">ボタン1</button> <button name="button-attr" type="button" data-index="2" data-d1="002" data-d2="102">ボタン2</button> <button name="button-attr" type="button" data-index="3" data-d1="003" data-d2="103">ボタン3</button> <button name="button-attr" type="button" data-index="4" data-d1="004" data-d2="104">ボタン4</button> </body> <script type="text/javascript"> //ページが読込まれた直後に実行 $(document).ready(function() { //name属性が"button-attr"のクリックイベント設定 $(document).on("click","button[name=button-attr]",function() { //[data-index]の取得 var index = $(this).attr("data-index"); var d1 = $(this).attr("data-d1"); var d2 = $(this).attr("data-d2"); alert("data-index:" + index + " data-d1:" + d1 + " data-d2:" + d2); return false; }); }); </script> </html>
関連する記事
⇒JavaScript 何に使う
⇒JavaScript jQueryの使い方(セレクタ)
⇒JavaScript jQueryの使い方(セレクタ)その2
⇒JavaScript jQueryの使い方(セレクタ)その3・セレクタの存在確認
⇒JavaScript jQueryの使い方(セレクタ)その4・複数セレクタの存在確認
⇒JavaScript jQueryでJavascriptファイルを動的に変更する方法
-
以前、以下の記事でカーソルを使って「オブジェクトストア」に登録された全てのデータを取得する方法について説明しましたが、 カーソル処理の中と、全てのデータを取得した後の処理をどうするのかには触れていませんでした。
⇒JavaScript IndexedDB の使い方5(カーソル処理)
全データ取得関数 getAllData の中で直接データ処理を記述してもいいのですが、 汎用性を持たせるために、カーソル処理用と全データ取得後の関数を引数として渡し、それぞれの処理で実行する様に変更してみます。■全データ取得関数にカーソル処理用と全データ取得後の関数を引数として渡す
<html> <head> <meta charset="utf-8"> <title>test IndexedDB - cursor - function</title> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script type="text/javascript"> // ブラウザ対応宣言 window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange; // データベース(IDBDatabase)インスタンス var db; // データベース名 var dbName = "TestDB"; // オブジェクトストア名 var objStoreName = "Test1"; /** * DB接続処理 */ function openDB() { // データベースオープン:[名称:TestDB] var request = indexedDB.open(dbName); //オープンが正常の場合の関数宣言 request.onsuccess = function(event) { //データベースインスタンス保存 db = event.target.result; console.log("DBオープンOK"); }; //エラーの場合の関数宣言 request.onerror = function(event){ console.log("DBオープンエラー"); }; } /** * 全データ取得処理 */ function getAllData(funcCursor = null, funcDataEnd = null) { //トランザクション var transaction = db.transaction(objStoreName, 'readonly'); //オブジェクトストアにアクセスします。 var objectStore = transaction.objectStore(objStoreName); //カーソル開始 var request = objectStore.openCursor(); //カーソルで対応するデータが存在した場合の処理 request.onsuccess = function(event) { var cursor = event.target.result; if(cursor) { if (funcCursor) { //関数が指定された場合、カーソル処理 funcCursor(cursor.value); } //次のカーソルへ cursor.continue(); } else { //これ以上のデータは存在しない if (funcDataEnd) { //関数が指定された場合、全データ取得後処理 funcDataEnd(); } } }; //カーソル取得エラーの場合の関数宣言 request.onerror = function(event) { console.log('取得失敗。event:', event); }; } //レコードデータ退避 var rec = []; //カーソル処理 function cursorProc(data) { rec.push(data); } //全データ取得後処理 function dataEndProc() { var str = "<p>"; for (var i = 0; i < rec.length; i++) { str += "id:" + rec[i]["id"] + "<br />"; } str += "</p>"; //id="dataarea"の div タグの中身をクリア・設定 $("#dataarea").empty(); $("#dataarea").append(str); } //全データ取得処理 function getAllDataProc() { rec = []; //各関数を引数にして処理CALL getAllData(cursorProc, dataEndProc); } </script> </head> <body> <h2>test IndexedDB - cursor - 3</h2> <button id="buttonOpen" onclick="openDB()">DBオープン</button> <button id="buttonGet" onclick="getAllDataProc()">全データ取得</button> <br /> <div id="dataarea"> </div> </body> </html>
カーソル処理用関数 cursorProc はカーソル処理の中からカーソルデータ内のレコードデータを渡す様に 引き数にレコードデータを持ちます。 cursorProc の処理は特になく、静的変数に配列データとして退避します。
全データ取得後処理関数 dataEndProc は保存された配列のレコードデータを順次 id のみの一覧を作成し div タグ内に設定します。
実際の全データ取得処理ではこれらの関数を引数に渡して getAllData を呼出しています。
カーソル開始のリクエスト openCursor もそうなのですが、IndexedDB の各メソッドを呼び出した後で 処理が成功した時には非同期に onsuccess の定義関数が呼ばれます。
この「非同期」が厄介で、プログラムを組む上で連続的な感じでは記述できません。 リクエストを発行したタイミングと、その後必要とされる処理が別のタイミングで実行されるため、うまく記述しなければなりません。
それで、後処理を別関数として定義し、リクエストを発行する関数に渡してやることになりました。 (これの例として上のプログラムが在るわけですが…)
以上で、全てのデータを読込んだ後で行いたい場合に別関数を与えて行う方法を説明しましたが、 もし、2個のオブジェクトストアが存在し、1個目のオブジェクトストアを全て読込んだ後で、 更に2個目のオブジェクトストアを全て読込んで処理を行いたい場合はどうすればいいのでしょうか。
これに付いての対処の方法は次回の記事で説明したいと思います。関連する記事
⇒JavaScript IndexedDB の使い方1(データベースオープン)
⇒JavaScript IndexedDB の使い方2(データ追加)
⇒JavaScript IndexedDB の使い方3(データ取得)
⇒JavaScript IndexedDB の使い方4(全データ取得)
⇒JavaScript IndexedDB の使い方5(カーソル処理)
⇒JavaScript IndexedDB の使い方6(データ削除)