よく使うJQueryのまとめ(粗びき)-Web制作オンライン学習と企業ネットコンサルティング-WIING MEDIA

2019.11.20 Wed 2020.01.29

よく使うJQueryのまとめ(粗びき)

Web制作

よく使う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"

マウスオーバー時の記述

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");
}
);