JavaScript、jQuery個人的まとめ

#JavaScript

🔳DOMとは
HTMLを解析しデータを作成する仕組み
DOMツリーやドキュメントツリーとも言う

🔳ノード（オブジェクト）とは
HTML1つ1つのタグがDOMツリーの中ではノードと呼ばれる
例）body, header, side_barとか

js_foundation

window.addEventListener("load", function () {処理}
window.onload = function() {処理}

ロード時に全てのDOM要素を取得する

  let btn = document.querySelector("Button");

変数btnにセレクタButton（idのやつ）を代入
(“p”)だったり(“#Button2”)とかでも書く。

  btn.addEventListener("click", function () {処理}

btnがクリックされた時に{}内の関数を実行するイベントを追加

btn.innerHTML = “hoge”

指定したセレクタにhogeというHTMLを代入

btn.classList.add(“red”)

指定したセレクタにCSS要素を代入する

btn.classList.remove(“blue”)

指定したセレクタからblueというクラスを削除する

#js_tabの解説

  let tabs = document.getElementsByClassName("menu_item");
  let tabsAry = Array.prototype.slice.call(tabs);

tabsAry.forEach(function (value) {
    value.addEventListener("click", tabSwitch);
  });

の処理の流れを解説。

変数tabsAryにtabsの中身を配列に変換して代入する。
tabsAryをforEachでvalueという変数に代入して全て繰り返す。
valueの値がクリックされたらイベントが発火される
console.log();で配列の中身を確認したらとてもよく分かる。
他の部分はコメント解説の内容通りなので省略

#jQuery

🔳IDセレクタ
IDセレクタとは、HTML要素のid属性で指定するセレクタのことです。IDセレクタは、取得したいHTML要素のid属性の値に#（ハッシュ）を付けたものをセレクタとして利用します。
idセレクタの例
1 $("#idSelector") // idがidSelectorの要素を取得
クラスセレクタ
クラスセレクタとは、HTML要素のclass属性で指定するセレクタのことです。クラスセレクタは、取得したいHTML要素のclass属性の値に.（ドット）を付けたものをセレクタとして利用します。
クラスセレクタの例
1 $(".classSelector") // classがclassSelectorの要素をすべて取得
要素セレクタ
要素セレクタとは、h1やpのようなHTML要素を対象としたセレクタのことです。要素セレクタは取得したいHTML要素の要素名をそのままセレクタとして利用します。
要素セレクタの例
1 $("h1") // h1要素をすべて取得
属性セレクタ
HTMLのタグの属性値を指定したい場合、$("[ 属性 = '値' ]")で属性セレクタを取得できます。
属性セレクタの例
1 $("input[ type='radio' ]"); // のHTML要素を取得する

🔳removeClass()、addClass()
クラスを追加したり消す。最初に0を指定しなくても自動的に最初の要素を指定してくれる

🔳index()
配列に変換しなくても、集合したDOM要素から引数に指定(thisとか）したDOMと同じ要素番号を戻す

🔳eq()
引数に要素番号を取って、集合したDOM要素から選択できる

分からない事はいきなり検索しないで、紙に実装できる流れを仮説立ててから調べる！