デバックについての関数

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ファイルの読み込みタイミングで動作します。