デバックについての関数

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内のCSSクラスIDの取得方法

CSSクラス名でタグの有無を確認する場合

• document.getElementsByClassName(”class-name”)
• document.querySelectorAll(“.class-name”)

document.getElementsByClassName()とdocument.querySelectorAll()は、HTMLのクラス要素を取得するためのJavaScriptのメソッドですが、いくつかの違いがあります。

返り値の型:

document.getElementsByClassName(): HTMLCollection（ライブコレクション）を返します。これは配列のようなオブジェクトですが、動的に変化します。要素の追加や削除があると、コレクションも自動的に更新されます。 document.querySelectorAll(): NodeList（静的なノードリスト）を返します。これはコレクションが固定されており、動的な変更に対しては自動的に更新されません。

動的な変更:

document.getElementsByClassName(): ライブコレクションなので、ドキュメント内のクラス要素が変更されるたびに自動的に更新されます。追加や削除された要素がコレクションに反映されます。 document.querySelectorAll(): 静的なノードリストなので、取得した時点の要素だけが含まれます。後から要素が変更されてもノードリストは変更されません。

パフォーマンス:

document.getElementsByClassName(): ライブコレクションのため、都度変更を監視するためのリソースが必要です。大規模なページで使用するとパフォーマンスが低下する可能性があります。 document.querySelectorAll(): 静的なノードリストなので、一度取得したらその後の変更には関与しません。そのため、大規模なページで使用してもパフォーマンスが比較的安定します。

どちらを選ぶかは、具体的な要件とコードの性質によります。基本的にはHTML要素の変更がない静的ページではdocument.querySelectorAll()の使用が広く推奨されており、より柔軟な選択肢を提供します。ただし、動的にHTMLコードのクラスが増減されるようなライブなコレクションが必要な場合はdocument.getElementsByClassName()も有用です。

CSSのIDを指定してタグの有無を確認する場合

• document.getElementsByID(“id-name”)

指定したHTML要素のid属性に基づいて特定の要素を取得するために使用されます。HTML文書内の各要素は一意のid属性を持つことができ、この関数はそのidを使用して該当する要素を取得します。

記述例

document.addEventListener("DOMContentLoaded", function() {
  // sec-tit クラスを持つ要素を取得
  var elementsWithClass = document.querySelectorAll(".sec-tit");
  // 要素が存在するかどうかを確認
  if (elementsWithClass.length > 0) {
    console.log("sec-tit クラスを持つ要素が存在します。");
    // 要素が存在する場合の処理を記述
  } else {
var pElement = document.createElement('p');
        pElement.textContent = 'text';
        document.body.appendChild(pElement);	  
	
    console.log("sec-tit クラスを持つ要素は存在しません。");
	  
    // 要素が存在しない場合の処理を記述
  }
});

DOM読込完了後の処理が必要