2019.11.05 Tue
よく使う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()で確認
要素の表示非表示の制御
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"
- マウスオーバー時の記述
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 () {
};
ウィンドウサイズは縦横どちらも反応するので注意が必要。
掲載情報につきましては当社が独自に調査、検証および収集した情報です。
情報の妥当性や確実性を一切保証するものでなく、情報や内容が訂正や修正、変更されている場合があります。 よって、当社サイトの利用により生じたいかなる損害等についても運営側にて一切の責任を負いません。
掲載情報の修正・変更等をご希望の場合はお知らせください。
