2019.11.20 Wed 2022.03.20
よく使うJQueryのまとめ(粗びき)
Web制作でよく使うJQueryザックリまとめ(粗びき)
Webサイト制作でよく使用する関数などをザックリまとめてみました。基本的にはプログラムソースコードを見ていると15秒ぐらいで眠気を感じてしまうので、わりと実用ベースの利用をもとにした粗びき情報になるので、専門技術という視点で知りたい方は、以下公式サイト等へどうぞ。
- jQuery公式サイト https://jquery.com/
- jQuery 日本語リファレンス http://semooh.jp/jquery/
デバックについての関数
JQueryの動作確認には、console.log()を使用します。 consoleとはコンピュータと意思疎通をする装置のようなニュアンスですが、おそらくJavaScriptプログラムと意思疎通するための意味での関数名かな?という印象です。 かなり以前はwindow.open関数でポップアップウィンドウで表示させたりする方法もありましたが、いまは絶滅しているでしょうね。確認方法は関数中にconsole.logを記述してブラウザのF12を押すとChromeでもFirefoxでも開発者モードになるので、consoleタブをクリックします。 ここにはほかのエラーや警告なども表示されます。 正常に実行されていると意思疎通ができましたとメッセージが表示されます。
- console.log()関数の記述
console.log("デバック");
上の例ではブラウザのconsoleの表示欄に「デバック」と表示されます。
- 変数の値を確認する場合
HTMLタグの記述class="selector01"の例 $(function () { var value="値1"; console.log('デバック:',value); });
console結果には「デバック:値1」と出るはずです。
ちょっとでも動作がおかしい時はconsole.log()で確認
CSS要素のプロパティと値の制御
JQueryでHTML構造上の要素にプロパティと値の要素を追加したり、変数から代入をしたりするには、主に以下の方法で行います。
- $(‘セレクタ名’).css(‘プロパティ’,’値’);=要素のプロパティに値を付加します
- $(‘セレクタ名’).css(‘プロパティ’,”);=要素のプロパティに値を削除します
- $(‘セレクタ名’).css({‘プロパティ1′:’値1′,’プロパティ2′:’値2’});=要素にプロパティと値を2つ付加します
- $(‘セレクタ名’).css(‘プロパティ’,変数名);=要素のプロパティに変数値を付加します
以下の例ではセレクタ名selector01にウィンドウサイズの横幅を取得して、プロパティと値を追加する場合の記述です。
ウィンドウサイズの横幅を要素のwidthに指定する記述class="selector01"の例 $(function () { var win = $(window).width(); var selectW = win; $('.selector01').css('width',selectW); console.log('selector01のwidthは'+ selectW); )};
条件にあわせてJQueryでCSSプロパティを制御するのに役立ちます
要素の表示非表示の制御
JQueryでページ内の要素を表示したり、非表示にしたりするには主に以下の4つの関数を使用しています。
- slideUP()=要素が上に向けて折りたたむ
- slideDown()=要素を下に向けて広げる
- show()=要素を表示させる
- hide()=要素を非表示にする
以下の例ではセレクタ名selector01の表示制御する場合の記述です。
HTMLタグの記述class="selector01"の例 jQuery(".selector01").slideUp(); jQuery(".selector01").slideDown(); jQuery(".selector01").show(); jQuery(".selector01").hide();
show()hide()はJsファイルの読み込みタイミングで動作します。
要素へのセレクタの追加と削除、フラグ判定
HTMLタグの要素内セレクタを追加したり削除したりする際の関数です。
- 要素にセレクタの追加と削除の記述
jQuery(".selector01").addClass("added"); =.selector01セレクタにaddedセレクタを追加します。 結果:class="selector01 added" jQuery(".selector01").removeClass("added"); =.selector01セレクタからaddedセレクタを削除します。 結果:class="selector01"
- マウスオーバー時の記述
jQuery(".selector01").hover(function () { if (jQuery(this).hasClass("added")) { /*.selector01セレクタにaddedセレクタが追加されていた場合の処理。*/ } else if (!jQuery(this).hasClass("added")) { /*.selector01セレクタにaddedセレクタが除去、無い場合の処理。*/ } });
ちなみにマウスイベントハンドラはいくつかありますが、hoverとclickでマウスボタンアクションが主に使用した関数でした。
▽マウスオーバー時の処理 jQuery(".selector01").hover(function () { }); ▽マウスクリック時の処理 jQuery(".selector01").click(function () { });
セレクタの付与状態で動的なif判定処理ができます。
ウィンドウサイズを変更したときの処理
ブラウザのウィンドウサイズを変更したときに関数を実行する場合の記述。 ウィンドウサイズの縦横幅が変わったら処理がされます。 これはレスポンシブ対応には使えないのであくまでパソコンでのブラウザウィンドウサイズ変更時に実行させる関数を主に使用するようになるのかという印象です。
jQuery(window).resize(function () { };
ウィンドウサイズは縦横どちらも反応するので注意が必要。
URLまたはパスによる関数の実行
ブラウザのURLかパスに含まれる文字列などにより、関数の実行を制御する場合の記述です。 URL.match関数を利用して、文字列で判定されるのでURLを指定したい場合は拡張子やスラッシュまで指定する必要があります。
$(window).on('load',function(){ // 読み込まれたときに処理を実行するページURLおよびパス指定 if(document.URL.match('/sample.html')||document.URL.match('/exsample')) { // この例ではURLがsample.htmlかパスにexsampleが含まれる場合に処理が実行されます。 console.log("match Done"); } );
関数の実行ページを簡易的に指定したい場合に便利です。
お薦めの関連記事
掲載情報につきましては当社が独自に調査、検証および収集した情報です。
情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。
掲載情報の修正・変更等をご希望の場合はお知らせください。