// (1) DOMツリーが構築された = HTMLが読み込まれた時点（画像などはまだ読み込まれていないタイミング）で実行
$(function(){
  // ここに処理を書く（以下省略）
});
// 次の書き方でも代替可能（というよりも、jQuery 3.0以降では簡略化された上記の書き方が主流だが、本来は以下の書き方が正しい。$→jQueryでも同じ意味になる）
$(document).ready(function(){
});

// 【WordPressへの対応などで頻出】先頭の$→jQuery, function()→function($)に置換する必要あり（カプセル化）
// ※ また、あくまで個人的な肌感覚（経験）としては「jQueryのバージョンがかなり古い」「処理のタイミングに差がある」といった場合でも、上記の「おまじない」をこの書き方に置換したことで動かない→動く可能性が少なからず考えられる（気がする）
jQuery(function($){
  // 先頭の $ 宣言により「jQuery以外の他のJSライブラリの（グローバル〇〇といった）内容」が読み込まれてコンフリクト発生 → 動かない
  // このように「最初（先頭の宣言）に$が使えない環境」では、最初に「jQuery」の指定が必須
  // function()→function($)への置換は、中身の処理の記述で一般的な $() の書き方（関数）を使う上で必要。→function(hoge)とした場合は hoge() で対応できるが、誰も得しないため、とりあえず上記の「おまじない」を覚えておけばよい。
});


// (2) ロード完了後 → DOMツリー構築 + 画像などページ内のコンテンツ全体の読み込みが完了した時点で実行
$(window).on('load', function(){
});


// (3) ページ内でスクロール動作が行われたときに実行
$(window).on('scroll', function(){
});


// (4) ブラウザの表示域のリサイズが行われたときに実行
$(window).on('resize', function(){
});


// 補足：(2)〜(4)の記述は次のようにまとめて書くことも可能
// （なお、VanillaJS における addEventListener では、次のように複数の状況におけるイベントをまとめて記述することは不可能）
$(window).on('load resize', function(){
  // ページ内のすべての要素の読み込みが完了後に実行される + ブラウザの表示域のリサイズが行われた際に実行される処理
  // 使用例：そのときのブラウザの横幅（表示幅）を取得し、一定のサイズ以上（以下）でPC画面（パソコン）／タブレット画面／SP画面（モバイル）用の処理（切り替え等）を動的に行う際に活用することができる
});

// (1) DOMツリーが構築された = HTMLが読み込まれた時点（画像などは読み込まれていないタイミング）で実行
document.addEventListener('DOMContentLoaded', function(){
  // ここに処理を書く（以下省略）
});


// (2) ロード完了後 → DOMツリー構築 + 画像などページ内のコンテンツ全体の読み込みが完了した時点で実行
window.addEventListener('load', function(){
});


// (3) ページ内でスクロール動作が行われたときに実行
window.addEventListener('scroll', function(){
});


// (4) ブラウザの表示域のリサイズが行われたときに実行
window.addEventListener('resize', function(){
});


// 補足：即時関数 → DOMツリーの構築なども待たず、即座に処理を実行したい場合
(function(){
}());

<ul id="list-block">
  <li class="list">リスト</li>
  <li class="list">リスト</li>
  <li class="list">リスト</li>
</ul>

document.querySelector('.list');

document.querySelectorAll('.list');

document.getElementsById('list-block');

document.getElementsByClassName('list');

document.getElementsByTagName('li');

// 例：複数の <div class="item"> 要素を取得する場合
// このままの使用は【NG】
const itemList = document.querySelectorAll('.item');

let itemList = document.querySelectorAll('.item');  // 変数宣言：var でも代用可能
itemList = Array.from(itemList);

// 別解：const
const items = document.querySelectorAll('.item');
const itemList = Array.from(items); // 定数：const は再代入不可能 → 新たな宣言が必要

// 別解：一気に宣言
const itemList = Array.from(document.querySelectorAll('.item'));

const itemList = [...document.querySelectorAll('.item')];

<ul>
  <li>
    <div class="item">クリックすると親のliタグにクラス名のつけ外しイベント発生</div>
  </li>
  <li>
    <div class="item">クリックすると親のliタグにクラス名のつけ外しイベント発生</div>
  </li>
  <!-- 以下、反復 -->
</ul>

// jQuery依存で実装する場合
$('.item').each(function() {
  // ここに処理を書く
  $(this).on('click', function(){
    $(this).parent().toggleClass('is-clicked');
  });
});

// いっそ、このような単純なクリックのイベント等であれば、次のようにeach()メソッドすら無くても特に問題はない
$('.item').on('click', function(){
  $(this).parent().toggleClass('is-clicked');
});

// 上記の処理をjQuery無しで実装する場合
const items = [...document.querySelectorAll('.item')];
for ( let i = 0; i < items.length; i++ ) {
  items[i].addEventListener('click', function() {
    let parent = items[i].parentElement;
    parent.classList.toggle('is-clicked');
  });
}