JavaScriptの基礎とjQuery入門

Posted at 2026-09-20

この記事では、まず JavaScriptの基礎について説明し、その後、HTMLやCSSを動的に操作するためのJavaScriptライブラリである jQuery について紹介します。

JavaScriptは、Webページに動きやインタラクティブな機能を追加できるプログラミング言語です。

Google Chromeを用いたJavaScriptの実行方法
値と変数について
制御文について
関数について
オブジェクト指向について
配列とオブジェクトについて
インスタンスについて
組み込みオブジェクトについて
コンストラクタ関数
クラスについて
モジュールについて
jQueryの基礎について
jQueryを使う準備
jQueryの書き方
$ について
jQueryオブジェクトについて
メソッドについて
参考資料

Google Chromeを用いたJavaScriptの実行方法

JavaScriptは、Webブラウザがあれば簡単に実行できます。

本格的な開発環境を構築しなくても、Google Chromeなどのブラウザに搭載されている開発者ツールを利用することで、JavaScriptのコードをすぐに試すことができます。

プログラミングを始める際には、開発環境の構築が最初のハードルになることがあります。

その点、ブラウザだけでJavaScriptを実行できることは、初心者にとって大きなメリットです。

ここでは、Google Chromeを使ってJavaScriptを実行する方法を紹介します。

まず、Chromeブラウザを起動し、開発者ツールを開きます。

開発者ツールを開いたら、「Console」タブを選択します。

ConsoleにJavaScriptのコードを入力します。

例えば、

console.log("Hello JavaScript!");

と入力してEnterキーを押します。

すると、実行結果がConsoleに表示されます。

コードにエラーがある場合は、エラーメッセージもConsoleに表示されます。

このように、JavaScriptはブラウザだけでも気軽に試すことができます。

値と変数について

値について

プログラムで扱うデータを値といいます。

例えば、

123
0.32
"あいう"
"This is NEMLOG"

などがあります。

JavaScriptでは、数値や文字列だけでなく、真偽値、オブジェクト、配列など、さまざまな種類の値を扱うことができます。

文字列は、シングルクォートまたはダブルクォートで囲んで記述できます。

"Hello"
'Hello'

変数について

変数とは、値を一時的に保存しておくための名前付きの領域です。

JavaScriptでは、主に let と const を使って変数を宣言します。

let x;
const y = 10;

変数に値を代入する場合は、

let x = 1;

のように記述します。

ここで、

は「右辺の値を左辺の変数に代入する」という意味です。

例えば、

let x = 1;
let y = 3;

とすると、変数 x に 1、変数 y に 3 が代入されます。

数学における「等しい」という意味のイコールとは役割が異なるため、注意してください。

letとvarの違い

JavaScriptには、以前から var という変数宣言もあります。

var x = 1;

var と let には、変数のスコープや再宣言などについて違いがあります。

例えば、同じスコープで、

var a = 1;
var a = 2;

と書くことはできます。

一方、

let a = 1;
let a = 2;

と同じスコープで再宣言するとエラーになります。

そのため、現在のJavaScriptでは、基本的に let と const を使用し、var は必要な場合を除いて使わない という書き方が一般的です。

この記事でも、基本的に let と const を使用します。

定数について

一度代入した値を再代入できない変数を定数として扱う場合は、const を使います。

const z = 5;

この状態で、

z = 10;

とするとエラーになります。

ただし、const は「値そのものが完全に変更できない」という意味ではありません。

例えば、オブジェクトの場合、

const person = {
  name: "YUTO"
};

person.name = "ゆと";

のように、オブジェクトの中身を変更することはできます。

const は、変数そのものへの再代入を禁止するものだと考えると分かりやすいでしょう。

四則演算について

JavaScriptでは、数値を使って計算することができます。

let x = 1 + 4 - 2 * 3;
let y = 10 / 2;

JavaScriptでは、

演算子	意味
`+`	足し算
`-`	引き算
`*`	掛け算
`/`	割り算
`%`	余り

を表します。

文字列を + で連結することもできます。

let x = "abc" + 123;

console.log(x);

実行結果：

abc123

制御文について

制御文とは、プログラムの実行順序や繰り返しなどを制御するための構文です。

ここでは、代表的なものとして if 文と for 文を紹介します。

if文

if 文は条件分岐を行うための構文です。

条件に応じて、実行する処理を変更できます。

基本的な書き方は、

if (条件式) {
  条件を満たした場合の処理
} else {
  条件を満たさなかった場合の処理
}

です。

例えば、

let x = 15;

if (x >= 10) {
  console.log("変数xは10以上です");
} else {
  console.log("変数xは10未満です");
}

この例では、x が10以上なので、

変数xは10以上です

と表示されます。

条件を満たさなかった場合の処理が必要ない場合は、else を省略できます。

if (x >= 10) {
  console.log("変数xは10以上です");
}

比較演算子

条件式では、比較演算子を使用します。

ここでは A と B を値として考えます。

演算子	意味
`A == B`	AとBは等しい
`A != B`	AとBは等しくない
`A < B`	AはB未満
`A <= B`	AはB以下
`A > B`	AはBより大きい
`A >= B`	AはB以上

ただし、JavaScriptでは型まで含めて比較する === と !== もよく使われます。

1 === 1

は true になります。

一方、

1 === "1"

は、数値と文字列で型が異なるため false になります。

そのため、現在のJavaScriptでは、特別な理由がない限り === や !== を使うことが一般的です。

for文

for 文は、同じ処理を繰り返し実行するときに使用します。

基本的な書き方は、

for (初期化; 条件式; 更新処理) {
  繰り返す処理
}

です。

例えば、

for (let x = 8; x < 10; x++) {
  console.log("xの値は" + x);
}

とします。

実行結果：

xの値は8
xの値は9

処理の流れは、

初期化
 ↓
条件を確認
 ↓
繰り返し処理
 ↓
更新処理
 ↓
条件を確認
 ↓
繰り返し処理
 ↓
...

となります。

この例では、

x = 8 から開始
x < 10 を確認
x が8なので処理を実行
x++ によって9になる
x < 10 を確認
x が9なので処理を実行
x++ によって10になる
x < 10 が false になる
処理終了

となります。

ここで、

x++;

は、

x = x + 1;

とほぼ同じ意味です。

関数について

関数とは、ある処理をひとまとめにしたものです。

関数に値を渡して処理を行い、その結果を受け取ることができます。

関数を呼び出す場合は、

関数名(引数);

と書きます。

戻り値を変数に代入することもできます。

let result = 関数名(引数);

関数を定義する

関数は function を使って定義できます。

function 関数名(引数) {
  処理内容
}

例えば、

function hello() {
  console.log("Hello NEMber!");
}

hello();

とすると、

Hello NEMber!

と表示されます。

引数について

関数に渡す値を引数といいます。

例えば、

function hello(name) {
  console.log("Hello!! " + name);
}

hello("YUTO");

とすると、

Hello!! YUTO

と表示されます。

この場合、

name

が引数です。

戻り値について

関数では、処理結果を呼び出し元へ返すことができます。

この値を戻り値といいます。

戻り値は return を使って指定します。

function add(x, y) {
  return x + y;
}

let result = add(3, 5);

console.log(result);

実行結果：

この場合、

add(3, 5)

という関数呼び出しによって 3 + 5 が計算され、その結果である 8 が戻り値として返されています。

関数を料理に例えるなら、

材料 → 関数 → 完成した料理

のように考えると分かりやすいでしょう。

アロー関数

JavaScriptでは、関数を短く記述する方法としてアロー関数があります。

例えば、

const hello = () => {
  console.log("Hello NEMber!");
};

hello();

と書けます。

引数を取る場合は、

const hello = (name) => {
  console.log("Hello!! " + name);
};

hello("YUTO");

のように記述できます。

オブジェクト指向について

JavaScriptでは、データとそれを操作する処理をまとめて扱うために、オブジェクトという仕組みを利用します。

オブジェクトには、

プロパティ
メソッド

などを持たせることができます。

配列とオブジェクトについて

配列

変数をいくつも定義すると、プログラムが複雑になることがあります。

そこで、複数の値をまとめて管理するために**配列（Array）**を利用できます。

let x = [1, 2, 3, 4];

配列には、先頭から 0、1、2……というインデックスが割り当てられます。

例えば、

console.log(x[2]);

とすると、

と表示されます。

これは、

x[0] → 1
x[1] → 2
x[2] → 3
x[3] → 4

となっているためです。

オブジェクト

配列が「番号」で値を管理するのに対して、オブジェクトでは**キー（プロパティ名）**を使って値を管理できます。

例えば、

const ob = {
  utopian: 1,
  future: 3
};

とします。

この場合、

utopian
future

がプロパティ名です。

値を取得するには、ドット記法を使用できます。

console.log(ob.utopian);
console.log(ob.future);

実行結果：

1
3

ブラケット記法を使用することもできます。

console.log(ob["utopian"]);

こちらも 1 と表示されます。

オブジェクトのメソッド

オブジェクトのプロパティには、関数を入れることもできます。

このような関数を、そのオブジェクトのメソッドと呼びます。

例えば、

const riji = {
  zemzem: function () {
    console.log("Hello!");
  },
  essan: 5
};

この場合、

riji.zemzem();

とすると、

Hello!

と表示されます。

また、現在のJavaScriptでは、メソッドを次のように簡潔に記述することもできます。

const riji = {
  zemzem() {
    console.log("Hello!");
  },
  essan: 5
};

console.log()について

ここで、JavaScriptの学習でよく使う、

console.log(値);

について考えてみます。

console はオブジェクトで、log はメソッドです。

つまり、

console.log("Hello");

は、console オブジェクトの log メソッドを呼び出していると考えることができます。

ブラウザの開発者ツールのConsoleに値を表示するため、JavaScriptの動作確認などで非常によく使われます。

プロパティとメソッド

ここまでをまとめると、

プロパティは、オブジェクトが持つデータや状態を表すもの、

メソッドは、オブジェクトに対して何らかの処理を行う関数、

と考えると分かりやすいでしょう。

例えば、

const person = {
  name: "YUTO",

  sayHello() {
    console.log("Hello!");
  }
};

では、

name      → プロパティ
sayHello  → メソッド

となります。

このように、データと処理をオブジェクトとしてまとめて扱う考え方が、オブジェクト指向につながります。

インスタンスについて

オブジェクト指向では、クラスなどを元にして具体的なオブジェクトを作成することがあります。

このとき作成された具体的なオブジェクトをインスタンスと呼びます。

インスタンスを作成するときには new を使用します。

const 変数名 = new クラス名(引数);

例えば、

class Person {
  constructor(name) {
    this.name = name;
  }
}

const person = new Person("YUTO");

console.log(person.name);

実行結果：

YUTO

ここで、

new Person("YUTO")

によって Person クラスからインスタンスが作成されています。

組み込みオブジェクトについて

JavaScriptには、最初からさまざまなオブジェクトや機能が用意されています。

これらを組み込みオブジェクトと呼びます。

代表的なものには、

Object
Array
Number
Function
Symbol
Math
Date

などがあります。

ここで、Symbol という名前が登場しました。

JavaScriptには Symbol という組み込みのプリミティブ型が存在します。

一方、ブロックチェーンの Symbol も同じ名前を使用しています。

そのため、JavaScriptのコードを書くときには、文脈によって「JavaScriptのSymbol」なのか「ブロックチェーンのSymbol」なのかを区別する必要があります。

同じ名前が別の技術分野で使われることがあるのは、プログラミングでは珍しいことではありません。

コンストラクタ関数

JavaScriptには、クラスが一般的になる以前から、コンストラクタ関数と new を利用してオブジェクトを生成する方法がありました。

コンストラクタ関数とは、new と組み合わせてインスタンスを作成するための関数です。

基本的には、

function 関数名(引数) {
  this.プロパティ = 値;
}

のように定義します。

そして、

const 変数 = new 関数名(引数);

としてインスタンスを作成します。

コンストラクタ関数の例

function Obj(nem, sym) {
  this.xem = nem;

  this.xym = function () {
    console.log(sym);
  };
}

const com = new Obj("eco", "mov");

console.log(com.xem);
com.xym();

実行結果：

eco
mov

この例では、

Obj

がコンストラクタ関数です。

new Obj("eco", "mov")

によって新しいインスタンスが作成されます。

その際、

nem → "eco"
sym → "mov"

として引数が渡されます。

その結果、

this.xem = nem;

によって、

com.xem

には "eco" が入ります。

また、

this.xym = function () {
  console.log(sym);
};

によって、com.xym() を実行すると "mov" が表示されます。

ここで this は、new によって作成されるインスタンスを指します。

クラスについて

JavaScriptでは、class 構文を使ってオブジェクトを生成する仕組みを分かりやすく記述できます。

なお、JavaScriptの class は、内部的にはプロトタイプベースの仕組みを利用しています。

基本的な書き方は、

class クラス名 {
  constructor(引数) {
    // 初期化処理
  }

  メソッド名() {
    // 処理
  }
}

です。

そして、

const 変数 = new クラス名(引数);

としてインスタンスを作成します。

クラスの例

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log("Hello, " + this.name);
  }
}

const person = new Person("YUTO");

console.log(person.name);
person.sayHello();

実行結果：

YUTO
Hello, YUTO

このように、クラスの中にコンストラクタやメソッドをまとめることができます。

getterとsetter

JavaScriptのクラスでは、get と set を使ってプロパティへのアクセス方法を定義できます。

例えば、

class Test {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  get distance() {
    return Math.sqrt(this.x * this.x + this.y * this.y);
  }

  set coordinate(point) {
    this.x = point.x;
    this.y = point.y;
  }
}

このクラスからインスタンスを作成します。

const test1 = new Test(3, 4);

console.log(test1.distance);

test1.coordinate = {
  x: 6,
  y: 8
};

console.log(test1.distance);

最初の距離は、

となります。

その後、

test1.coordinate = {
  x: 6,
  y: 8
};

によって x と y が変更されます。

すると距離は、

になります。

get を使った distance は、メソッドのように distance() と呼び出すのではなく、

test1.distance

というプロパティのような書き方で取得できます。

一方、set を使った coordinate は、

test1.coordinate = { x: 6, y: 8 };

のように値を代入すると処理が実行されます。

このような仕組みを利用することで、プロパティへのアクセス時に独自の処理を追加できます。

モジュールについて

JavaScriptでは、コードを複数のファイルに分割して管理できます。

この仕組みを**JavaScript Modules（ES Modules）**と呼びます。

大きなプログラムを一つのファイルに書いてしまうと、コードが長くなり、管理が難しくなります。

そこで、機能ごとにファイルを分けます。

export

他のファイルから利用できるようにするには、export を使用します。

例えば、

export function sayMessage(message) {
  alert(message);
}

とします。

この関数を別のファイルから読み込む場合は、

import { sayMessage } from "./sample-alert.js";

sayMessage("こんにちは世界");

とします。

export default

export default を使用すると、デフォルトとして1つの値を公開できます。

例えば、

export default function sayMessage(message) {
  alert(message);
}

読み込む側では、

import sayMessage from "./sample-alert.js";

sayMessage("こんにちは世界");

とできます。

デフォルトエクスポートでは、読み込む側で任意の名前を付けることができます。

例えば、

import hello from "./sample-alert.js";

hello("こんにちは世界");

のように書くこともできます。

HTMLからJavaScriptモジュールを読み込む

HTMLからJavaScriptのモジュールを読み込む場合は、script 要素に、

type="module"

を指定します。

例えば、

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">

  <script type="module">
    import { sayMessage } from "./sample-alert.js";

    sayMessage("こんにちは世界");
  </script>
</head>

<body>
</body>
</html>

のように記述できます。

また、JavaScriptを別ファイルに分けることもできます。

HTML：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script type="module" src="./index.js"></script>
</head>

<body>
</body>
</html>

JavaScript：

import { sayMessage } from "./sample-alert.js";

sayMessage("こんにちは世界");

このように、HTMLとJavaScriptを分離して管理できます。

jQueryの基礎について

JavaScriptでは、**DOM（Document Object Model）**を利用してHTMLの要素を操作したり、CSSを変更したりできます。

例えば、JavaScriptだけでもHTMLを変更できますが、処理によってはコードが長くなることがあります。

そこで登場したのが jQuery です。

jQueryは、JavaScriptでHTMLやCSS、イベントなどを扱いやすくするために広く利用されてきたライブラリです。

例えば、

$("#target").hide();

のように、短いコードでDOM操作を記述できます。

なお、現在のJavaScriptにはDOM APIが充実しているため、jQueryを必ず使用しなければならないわけではありません。

既存のWebサイトや古いシステムなどでは、現在でもjQueryが利用されているケースがあります。

この記事では、jQueryの基本的な仕組みを学んでいきます。

jQueryを使う準備

jQueryを利用する方法には、主に次のようなものがあります。

jQueryのファイルをダウンロードして利用する
CDNから読み込む

ここでは、比較的簡単なCDNを利用する方法を紹介します。

jQueryの公式サイト：

HTMLの head 要素などで、jQueryを読み込みます。

例えば、

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

のように記述します。

これで、HTMLからjQueryを利用できるようになります。

jQueryの書き方

jQueryの基本的な書き方は、

$("セレクタ").メソッド("引数");

です。

ここで、

$() → jQueryオブジェクトを取得する
セレクタ → 操作対象となるHTML要素
メソッド → 実行したい処理
引数 → メソッドに渡す値

と考えることができます。

例えば、

$("h1").css("color", "red");

とすると、h1 要素の文字色を赤色に変更できます。

`$` について

$ は、jQueryが提供している関数です。

jQueryでは、

$()

と、

jQuery()

は基本的に同じものを指します。

例えば、

$("#target").hide();

と、

jQuery("#target").hide();

は同じような処理になります。

通常は短く書ける $ がよく利用されます。

ただし、他のライブラリなどでも $ が使われる場合があります。

そのような場合には、jQuery() を使ったり、jQueryの noConflict() を利用したりする方法があります。

jQueryオブジェクトについて

jQueryでHTML要素を取得する場合は、

$("セレクタ");

と記述します。

例えば、

<div id="cat">
  Hello!
</div>

というHTMLがあった場合、

let cat = $("#cat");

とすると、#cat に該当する要素をjQueryオブジェクトとして取得できます。

そのため、

cat.hide();

のように、jQueryのメソッドを利用できます。

メソッドについて

jQueryオブジェクトに対して、さまざまな処理を実行できます。

基本的には、

jQueryオブジェクト.メソッド名(引数);

という形です。

例えば、

$(".text").css("color", "red");

とすると、text クラスを持つ要素の文字色を赤色にできます。

CSS()メソッド

css() は、CSSの値を取得したり、変更したりするためのメソッドです。

CSSを設定する

$("セレクタ").css("プロパティ", "値");

例えば、

$(".text").css("color", "#ff0000");

とすると、text クラスを持つ要素の文字色が赤色になります。

複数のCSSを設定する

複数のCSSプロパティをまとめて設定することもできます。

$(".text").css({
  color: "#0000ff",
  "font-size": "2em"
});

この場合、

文字色 → 青色
文字サイズ → 2em

となります。

CSSを削除する

CSSの値を空文字列にすると、そのインラインスタイルを削除できます。

$(".test").css("color", "");

ただし、CSSファイルなどで指定されているスタイルまで削除されるわけではありません。

マウスイベント

jQueryでは、ユーザーの操作に応じて処理を実行できます。

click()

要素がクリックされたときに処理を実行します。

$(".click").click(function () {
  alert("Hello NEMber!");
});

これで、click クラスを持つ要素をクリックすると、

Hello NEMber!

と表示されます。

hover()

マウスカーソルが要素に入ったり、要素から出たりしたときの処理を設定できます。

$(".hvr").hover(function () {
  alert("Hello NEMber!");
});

ただし、現在のjQueryでは、より細かくイベントを扱いたい場合は mouseenter や mouseleave などを利用することもできます。

クラスの追加と削除について

jQueryでは、HTML要素の class 属性を動的に変更できます。

addClass()

クラスを追加する場合は addClass() を使用します。

$("#target").addClass("show");

例えば、実行前のHTMLが、

<div id="target"></div>

だった場合、

<div id="target" class="show"></div>

のようになります。

removeClass()

クラスを削除する場合は removeClass() を使用します。

$("#target").removeClass("show");

toggleClass()

クラスの有無を切り替える場合は toggleClass() を使用します。

$("#target").toggleClass("border");

border クラスがなければ追加し、すでに存在していれば削除します。

このような処理をトグルと呼びます。

要素の内容を変更する

text()

text() は、要素のテキスト内容を取得・変更するためのメソッドです。

例えば、

<p>こんにちは</p>

というHTMLがあった場合、

$("p").text("おはよう");

とすると、

<p>おはよう</p>

となります。

empty()

要素の中身を空にする場合は empty() を使用します。

<p>こんにちは</p>

に対して、

$("p").empty();

を実行すると、

<p></p>

となります。

remove()

要素そのものを削除する場合は remove() を使用します。

例えば、

$("p").remove();

とすると、対象となる p 要素そのものがDOMから削除されます。

html()

html() は、要素の中にHTMLを設定したり取得したりするためのメソッドです。

例えば、

<div></div>

に対して、

$("div").html("<p>こんにちは</p>");

とすると、

<div>
  <p>こんにちは</p>
</div>

のようになります。

また、

console.log($("div").text());

とすると、div 内のテキストを取得できます。

なお、外部から取得した文字列をそのまま html() に渡す場合は、意図しないHTMLが挿入される危険性があるため注意が必要です。

単純なテキストを設定する場合は text() の利用が安全です。

イベントリスナー

Webページでは、

クリックされた
マウスが移動した
キーが押された
フォームが送信された

など、さまざまなイベントが発生します。

イベントが発生したときに実行する処理を登録することを、イベントリスナーの登録と呼びます。

jQueryでは、

$("セレクタ").on("イベント名", function (e) {
  // イベント発生時の処理
});

という書き方ができます。

例えば、

$("#btn").on("click", function () {
  console.log("clicked");
});

とすると、IDが btn の要素をクリックしたときに、

clicked

とConsoleへ表示されます。

イベントオブジェクト

イベントハンドラには、イベントに関する情報を持ったイベントオブジェクトを受け取ることができます。

例えば、

$("#btn").on("click", function (e) {
  console.log(e);
});

とすると、イベントに関する情報を確認できます。

イベントの種類によっては、

マウスの座標
押されたキー
イベントが発生した要素

などの情報を取得できます。

イベントハンドラの中でイベントオブジェクトを使用しない場合は、引数を省略できます。

jQueryの代表的なイベント

jQueryでは、さまざまなイベントを扱うことができます。

イベント	概要
`click`	要素をクリックしたとき
`dblclick`	要素をダブルクリックしたとき
`mousedown`	マウスボタンを押したとき
`mouseup`	マウスボタンを離したとき
`mouseenter`	要素にマウスカーソルが入ったとき
`mouseleave`	要素からマウスカーソルが出たとき
`mouseover`	要素にマウスカーソルが乗ったとき
`mouseout`	要素からマウスカーソルが外れたとき
`mousemove`	マウスカーソルが移動したとき
`focus`	要素がフォーカスされたとき
`blur`	要素からフォーカスが外れたとき
`focusin`	要素がフォーカスされたとき
`focusout`	要素からフォーカスが外れたとき
`change`	入力値などが変更されたとき
`select`	テキストが選択されたとき
`submit`	フォームが送信されたとき
`keydown`	キーが押されたとき
`keyup`	キーが離されたとき
`resize`	ウィンドウサイズが変更されたとき
`scroll`	ページなどがスクロールされたとき
`contextmenu`	コンテキストメニューを開こうとしたとき

なお、元々jQueryには keypress イベントもありましたが、現在ではキーボード入力を扱う場合は keydown や keyup を使うことが一般的です。

まとめ

今回は、JavaScriptの基本からjQueryまでを紹介しました。

JavaScriptでは、

変数
定数
条件分岐
繰り返し
関数
配列
オブジェクト
クラス
インスタンス
モジュール

など、プログラミングの基本となる仕組みを利用できます。

また、ブラウザのDOMを操作することで、HTMLやCSSをJavaScriptから動的に変更することもできます。

jQueryを利用すると、

$(".text").css("color", "red");

のように、DOM操作やイベント処理を比較的簡潔に記述できます。

ただし、現在のJavaScriptではDOM APIも充実しているため、jQueryだけに頼る必要はありません。

既存のWebサービスを理解したり、jQueryを利用しているプロジェクトを保守したりする場合には、jQueryの基本を知っておくと役立ちます。

JavaScriptとDOMの仕組みを理解したうえでjQueryを学ぶと、「jQueryが裏側で何をしているのか」も理解しやすくなります。

参考資料

『ノンプログラマのためのJavaScriptはじめの一歩』外村和仁（技術評論社）
jQueryとは
イベントに応じて処理を実行するには？（イベントメソッド）

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

JavaScriptの基礎とjQuery入門

目次

Google Chromeを用いたJavaScriptの実行方法

値と変数について

値について

変数について

letとvarの違い

定数について

四則演算について

制御文について

if文

比較演算子

for文

関数について

関数を定義する

引数について

戻り値について

アロー関数

オブジェクト指向について

配列とオブジェクトについて

配列

オブジェクト

オブジェクトのメソッド

console.log()について

プロパティとメソッド

インスタンスについて

組み込みオブジェクトについて

コンストラクタ関数

コンストラクタ関数の例

クラスについて

クラスの例

getterとsetter

モジュールについて

export

export default

HTMLからJavaScriptモジュールを読み込む

jQueryの基礎について

jQueryを使う準備

jQueryの書き方

$ について

jQueryオブジェクトについて

メソッドについて

CSS()メソッド

CSSを設定する

複数のCSSを設定する

CSSを削除する

マウスイベント

click()

hover()

クラスの追加と削除について

addClass()

removeClass()

toggleClass()

要素の内容を変更する

text()

empty()

remove()

html()

イベントリスナー

イベントオブジェクト

jQueryの代表的なイベント

まとめ

参考資料

`$` について