JavaScript

/*-----------------------------------
セレクター
------------------------------------*/
//html
$("html")
document.documentElement;

//body
$("body")
document.body;

//id
$("#hoge");
document.getElementById("hoge");

//class
$(".hoge");
document.querySelector(".hoge");

//要素 単体
$("hoge");
document.querySelector("hoge");

//要素 複数
$("hoge");
document.querySelectorAll("hoge");

//複数
$(".hoge,.fuga");
document.querySelectorAll(".hoge,.fuga");

//子孫
$(".hoge fuga");
document.querySelectorAll(".hoge fuga");

//親
$(".hode").parents(".fuga");
elem.closest(".fuga");

//兄弟
/*1つ前の要素*/
$(".hode").siblings(".fuga");
document.querySelector("hoge").previousElementSibling;

/*1つ後の要素*/
$(".hode").siblings(".fuga");
document.querySelector("hoge").nextElementSibling;

/*要素を指定*/
$(".hode").siblings(".fuga");
const hoge29 = document.querySelector(".hoge");
const hogeSiblings = hoge29.parentElement.querySelector(".fuga");

//:擬似class
$("hoge:first-child");
document.querySelectorAll("hoge:first-child");
/*
css擬似classはこの形でJavaScript上での使用が可能
querySelectorAll("p:first-child")　では「全ての要素の先頭の<p>が取得される」
querySelector("p:first-child")　では「<p>を持つ一番最初の要素の<p>」が取得される
*/

//:否定擬似class
$("hoge:not(:first-child)");
document.querySelectorAll("hoge:not(:first-child)");

/*-----------------------------------
生成
------------------------------------*/
const hoge28 = document.querySelector(".hoge");
const hoge29 = document.createElement("p");
hoge29.textContent = "hoge";
hoge28.insertAdjacentElement("beforeend", hoge29);

/*実行結果
<div class="hoge">
</div>
↓
<div class="hoge">
  <p>hoge</p>
</div>
*/

/*-----------------------------------
取得
------------------------------------*/
$("#hoge").html();
document.getElementById("hoge").innerHTML; //　#hogeのhtmlを取得

$("hoge").eq(1).html();
document.querySelectorAll("hoge")[1].innerHTML; // 2番目のhogeのhtmlを取得

/*-----------------------------------
存在チェック
------------------------------------*/
if (document.querySelector("hoge") != null) {
  //処理を記述
}

/*-----------------------------------
書き換え
------------------------------------*/
// .html() idの場合
$("#hoge1").html("<span>hoge</span>");
document.getElementById("hoge1").innerHTML = "<span>hoge</span>";

// .html() classの場合
$(".hoge1").html("<span>hoge</span>");
let hoge1 = document.querySelectorAll("hoge");
for (let i = 0; i < hoge1.length; i++) {
  hoge1[i].innerHTML = "<span>hoge</span>";
}

//.text() idの場合
$("#hoge").text("hoge");
document.getElementById("hoge").textContent = "hoge";

//.text() classの場合
let hoge2 = document.querySelectorAll("hoge2");
for (let i = 0; i < hoge2.length; i++) {
  hoge2[i].textContent = "hoge";
}

//val()
$(".hoge3").val("hoge3");
let hoge3 = document.querySelector(".hoge3");
hoge3.value = "hoge3";

/*-----------------------------------
挿入
------------------------------------*/
/* HTMLを挿入する場合は、insertAdjacentElement部分を */
insertAdjacentHTML("挿入位置", '<div class="' + hoge + '"></div><div class="' + fuga + '"></div>');
/* 上記に書き換える */

/* Elementを挿入 */

//before() 起点要素外側の前に挿入
$("#hoge").before($("#fuga"));
let hoge23 = document.querySelector(".hoge");
let fuga3 = document.querySelector(".fuga");
hoge23.insertAdjacentElement("beforebegin", fuga3);

/*出力結果
<div class="hoge">
  <h1>hoge</h1>
</div>

<p class="fuga">fuga</p>
↓
<p class="fuga">fuga</p>
<div class="hoge">
  <h1>hoge</h1>
</div>
*/

//after() 起点要素外側の後に挿入
$("#hoge").after($("#fuga"));
let hoge24 = document.querySelector(".hoge");
let fuga4 = document.querySelector(".fuga");
hoge24.insertAdjacentElement("afterend", fuga4);

/*出力結果
<p class="fuga">fuga</p>
<div class="hoge">
  <h1>hoge</h1>
</div>
↓
<div class="hoge">
  <h1>hoge</h1>
</div>
<p class="fuga">fuga</p>
*/

//prepend() 起点要素内の最初に挿入
$("#hoge").prepend($("#fuga"));
let hoge25 = document.querySelector(".hoge");
let fuga5 = document.querySelector(".fuga");
hoge25.insertAdjacentElement("afterbegin", fuga5);

/*出力結果
<div class="hoge">
  <h1>hoge</h1>
</div>
<p class="fuga">fuga</p>
↓
<div class="hoge">
  <p class="fuga">fuga</p>
  <h1>hoge</h1>
</div>
*/

//append() 起点要素内の最後に挿入
$("#hoge").append($("#fuga"));
let hoge26 = document.querySelector(".hoge");
let fuga6 = document.querySelector(".fuga");
hoge26.insertAdjacentElement("beforeend", fuga6);

/*出力結果
<div class="hoge">
  <h1>hoge</h1>
</div>
<p class="fuga">fuga</p>
↓
<div class="hoge">
  <h1>hoge</h1>
  <p class="fuga">fuga</p>
</div>
*/

//wrap() 対象要素の親要素として追加
$(".hoge").wrap("<div></div>");
let hoge19 = document.getElementById("hoge");
hoge.outerHTML = "<div>" + hoge19.outerHTML + "</div>";

/*出力結果
<div>
  <p id="hoge">hoge</p>
</div>
↓
<div>
  <div>
    <p id="hoge">hoge</p>
  </div>
</div>
*/

//wrapInner() 対象要素の子要素を別の親要素で囲む
$("#hoge").wrapInner("<span></span>")
let hoge20 = document.getElementById("hoge");
hoge20.innerHTML = "<span>" + hoge.innerHTML + "</span>";

/*出力結果
<div>
  <p id="hoge">hoge</p>
</div>
↓
<div>
  <p id="hoge"><span>hoge</span></p>
*/

//wrapAll() 全対象要素の親要素として追加
$(".hoge").wrapAll("<div></div>");

let hoge20 = document.querySelectorAll(".hoge"),
  wrapElement = document.createElement("div");

hoge20[0].parentNode.insertBefore(wrapElement, hoge20[0]);
hoge20.forEach(function (element, index) {
  wrapElement.appendChild(element);
});

/*出力結果
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>
<p class="hoge">hoge</p>
↓
<div>
  <p class="hoge">hoge</p>
  <p class="hoge">hoge</p>
  <p class="hoge">hoge</p>
</div>
*/

/*-----------------------------------
除去
------------------------------------*/
//unWrap()
$("p").unwrap();

let target3 = document.querySelector("p");
let parent3 = target3.parentNode;
let grand = parent3.parentNode;
grand.innerHTML = target3.outerHTML;

/*出力結果
<span><p>hoge</p></span>
↓
<p>hoge</p>
*/

//remove()
$("p span").remove();
let target1 = document.querySelector("p");
target1.remove();

//子要素をremove()
$("p span").remove();

let target2 = document.querySelector("p");
let nest = target.querySelector("span");
target.removeChild(nest);

/*出力結果
<p><span>fuga</span>hoge</p>
↓
<p>hoge</p>
*/

/*-----------------------------------
置換
------------------------------------*/
//prependTo() 起点要素内の最初に置換
$("#hoge").prependTo($("#fuga"));
let hoge21 = document.getElementById("hoge");
let fuga2 = document.getElementById("fuga");
hoge21.insertBefore(fuga2, hoge21.firstElementChild);

/*出力結果
<ul id="hoge">
  <li>hoge1</li>
  <li>hoge2</li>
  <li id="fuga">fuga</li>
</ul>
↓
<ul id="hoge">
  <li id="fuga">fuga</li>
  <li>hoge1</li>
  <li>hoge2</li>
</ul>
*/

//appendTo() 起点要素内の最後に置換
$("#hoge").appendTo($("#fuga"));
document.getElementById("hoge").appendChild(document.getElementById("fuga"));

//replaceWith()
$("p").replaceWith("<h1>fuga</h1>");
document.querySelector("p").outerHTML = "<h1>fuga</h1>";

/*出力結果
<p>hoge</p>
↓
<h1>fuga</h1>
*/
/*-----------------------------------
絞り込み
------------------------------------*/
//eq()
$(".hoge8").eq(2);
document.querySelectorAll(".hoge8")[2];

//not()
$(".menu").not(".fuga");
let hoge9 = document.querySelectorAll("hoge");
for (let i = 0; i < hoge9.length; i++) {
  if (!hoge9[i].classList.contains("fuga")) {
    //処理内容
  }
}

//children()
$("#hoge").children().text("hoge");
let hoge10 = document.getElementById("hoge").children;
for (let i = 0; i < hoge10.length; i++) {
  hoge10[i].textContent = "hoge";
}

//children() class名で抽出
$("#hoge").children(".fuga").text("fuga");
let hoge11 = document.getElementById("hoge").children;
for (let i = 0; i < hoge11.length; i++) {
  if (hoge11[i].classList.contains("fuga")) {
    hoge11[i].textContent = "fuga";
  }
}

//parent()
$("#hoge").parent().text("hoge");
document.getElementById("hoge").parentNode.textContent = "hoge";

//next()
$("#hoge").next().text("hoge");
document.getElementById("hoge").nextElementSibling.textContent = "hoge";

//prev()
$("#hoge").prev().text("hoge");
document.getElementById("hoge").previousElementSibling.textContent = "hoge";

//find
//タグ
$("#hoge").find("a");
document.getElementById("hoge").querySelector("a");

//class
$("#hoge").find(".hoge");
document.getElementById("hoge").querySelector(".hoge");

//複数
$("#hoge").find(".hoge12,ul");
document.querySelectorAll(".hoge,li");

//id
$("#hoge").find("#fuga");
document.getElementById("hoge").querySelector("#fuga");
// getElementByIdはdocument.から記述開始しなければならないためquerySelectorで代用

//:first
$(".hoge:first").text("hoge");
document.querySelectorAll("hoge14")[0].textContent = "hoge";

//:last
$(".hoge:last").text("hoge");
let hoge14 = document.querySelectorAll("hoge");
hoge14[hoge14.length - 1].textContent = "hoge";

/*-----------------------------------
css
------------------------------------*/
//取得
$("#hoge").css("color");
getComputedStyle(document.getElementById("hoge"), null).color;
  
/*getComputedStyle()は、「スタイルの値に同的に含まれる可能性のある計算を解決」した後に
要素に適用されているスタイルが格納されたオブジェクトを返す
第一引数：styleを取得したい要素
第二引数：擬似要素に相当する文字列
  例：document.defaultView.getComputedStyle(hoge, ":after").width;
*/


//書き換え
$("#hoge").css("color", "#000");
document.getElementById("hoge").style.color = "#000";

/*
background-color等の「-」を含むプロパティは
backgroundColorの様に「-」直後を大文字に変えて「-」は削除する
*/

/*-----------------------------------
animate
------------------------------------*/
$(".hoge").animate({property:value});
const animationSample = document.querySelector(".hoge");
animationSample.addEventListener("click", function () {
  this.animate(
    [
      { /*変化前の状態*/ backgroundColor: "red", transform: "scale(1)", offset: 0.2 /* 0.2 = 20% */ },
      { /*変化後の状態*/ backgroundColor: "blue", transform: "scale(1)", offset: 0.4 /* 0.4 = 40% */ },
      { /*変化後の状態*/ backgroundColor: "green", transform: "scale(2)", offset: 1 /* 1 = 100% */ },
    ],
    {
      duration: 3000, //アニメーションスピード
      easing: "ease-in-out", //イージングを設定
      fill: "forwards", //アニメーション終了状態を維持
      iterations:Infinity // 繰り返しの回数を指定。数値で回数、Infinityで無限
    }
  );
});


/*-----------------------------------
class
------------------------------------*/
//追加
$("#hoge").addClass("fuga");
document.getElementById("hoge").classList.add("fuga");

//削除
$("#hoge").removeClass("fuga");
document.getElementById("hoge").classList.remove("fuga");

//判定
$("#hoge").hasClass("fuga");
document.getElementById("hoge").classList.contains("fuga");

//toggle
$("#hoge").toggleClass("fuga");
document.getElementById("hoge").classList.toggle("fuga");

/*-----------------------------------
属性
------------------------------------*/
//取得
/*　属性　*/
$("#hoge").attr("src");
document.getElementById("hoge").getAttribute("src");

/*　カスタムデータ属性　*/
$("#hoge").data("fuga");
document.getElementById("hoge").dataset.fuga;

/*
<p id="hoge" data-fuga="fuga"></p>
*/

//書き換え
$("#hoge").attr("src", "assets/images/fuga.png");
document.getElementById("hoge").setAttribute("src", "assets/images/fuga.png");

//削除
$("a").removeAttr("target");
document.querySelector("a").removeAttribute("target");

//prop()
$(".hogedl input[type='radio']:nth-child(1)").prop("checked", true);
document
  .querySelector(".hogedl input[type='radio']:nth-child(1)")
  .setAttribute("checked", "checked");

/*-----------------------------------
イベント
------------------------------------*/
// .click() ※click以外のトリガーはclick部分を書き換え
$("#hoge").on("click", function () {
  //処理内容
});
document.getElementById("hoge").addEventListener(
  "click",
  function () {
    //処理内容
  },
  false
);

//スクロールイベント
document.getElementById("hoge").addEventListener(
  "scroll",
  function () {
    //処理内容
  },
  //passive:true で、この関数ないでevent.preventDefault()を呼んでいない事を宣言 = 処理が軽くなる
  { passive: true }
);

//.on() ※動的に生成された要素をトリガーにする
const hoge = document.querySelector(".hoge");

// クラス属性の値で判定
document.addEventListener("click", function (event) {
  if (event.target && event.target.classList.contains("fuga")) {
    hoge.insertAdjacentHTML("beforeend", "<li class='fuga'>fuga</li>");
  }
});

// id属性の値で判定
document.addEventListener("click", function (e) {
  if (event.target && event.target.id === "fuga") {
    hoge.insertAdjacentHTML("beforeend", "<li id='fuga'>fuga</li>");
  }
});

/*実行結果
<ul class="hoge">
  <li class="fuga">fuga</li>　←トリガー
</ul>
↓
<ul class="hoge">
  <li class="fuga">fuga</li>　←トリガー
  <li class="fuga">fuga</li>　←トリガー
</ul>
*/

//trigger()
//イベントターゲットを設定
const eventTarget = document.querySelector(".hoge");
//イベント処理を設定
eventTarget.addEventListener("click", function () {
  this.style.color = "red";
});
//任意のイベントを作成(click部分を任意のイベントタイプに変更)
const createEvent = new Event("click");

//希望のタイミングでイベントターゲットに対してイベントを強制発火
window.addEventListener("load", function () {
  eventTarget.dispatchEvent(createEvent);
});


/*-----------------------------------
要素幅
------------------------------------*/
//width
$("#hoge").width();
//border + スクロールバーまで取得
document.getElementById("hoge").offsetWidth;

//paddingまで取得
document.getElementById("hoge").clientWidth;

//height
$("#hoge").height();
//border + スクロールバーまで取得
document.getElementById("hoge").offsetHeight;

//paddingまで取得
document.getElementById("hoge").clientHeight;

//ウィンドウサイズ
$(window).width();

//スクロールバーを含んだウィンドウの幅
window.innerWidth;
//スクロールバーを含んだウィンドウの高さ
window.innerHeight;
//サイドバーなどを含んだブラウザ全体の幅
window.outerWidth;
//タブやブックマークバーなどを含んだブラウザ全体の高さ
window.outerHeight;

/*-----------------------------------
offset
------------------------------------*/
//top
let hogeTop1 = $("#hoge").offset().top;

let hoge15 = document.getElementById("hoge");
let rect1 = hoge15.getBoundingClientRect();
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
let hogeTop2 = rect1.top + scrollTop;

// hoge.offsetTopとすると、ページ上部からの絶対的な距離を取得できる(リロード時のスクロール量に影響されない)

//left
let hogeLeft1 = $("hoge").offset().left;

let hoge16 = document.getElementById("hoge");
let rect2 = hoge16.getBoundingClientRect();
let scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
let hogeLeft2 = rect2.left + scrollLeft;

/*-----------------------------------
scroll
------------------------------------*/
//取得
let hogeSrollTop1 = $(window).scrollTop();
let hogeScrollTop2 =
  document.documentElement.scrollTop || document.body.scrollTop;

//書き換え
//scrollTo
$(window).scrollTop(300);
window.scrollTo(0, 300);
//(0,300)部分は(x軸,y軸)
/*オプション例
  window.scrollTo({
    top: 0,
    left: 0,
    behavior: "smooth", //スムーススクロール
  });
*/

/* safari iOS Edgeではsmoothオプションが使用できないためsmoothscroll-polyfillの読み込みが必要(CDN可)*/

//scrollIntoView
let hoge18 = document.querySelector(".hoge");
hoge18.scrollIntoView({
  behavior: "smooth",
  block: "start", // center end
});

/*-----------------------------------
読み込み
------------------------------------*/
//DOMが読み込まれたら発火
$("document").ready();
document.addEventListener("DOMContentLoaded", function () {
  //処理内容
});

//ページのデータが全て読み込まれたら発火
$("window").load();
window.addEventListener("load", function () {
  //処理内容
});

//即時関数 引数なし
(function () {
  //処理内容
})();

//即時関数 引数あり
(function (param1, param2) {
  //処理内容
})("hoge", "fuga");

/*-----------------------------------
each
------------------------------------*/
//$.each()
let arr1 = ["hoge1", "hoge2", "hoge3", "hoge4", "hoge5"];
$.each(arr, function () {
  console.log(this);
});

let arr2 = ["hoge1", "hoge2", "hoge3", "hoge4", "hoge5"];
for (let i = 0; i < arr2.length; i++) {
  console.log(arr2[i]);
}

//$("hoge").each()
$(".hoge").each(function (i, elem) {
  $(this).text(i + "処理内容" + elem);
});

let hoge17 = document.querySelectorAll("hoge");
hoge17.forEach(function (elem, index) {
  elem.textContent(index + "処理内容" + elem);
});