初心者向け！jQueryの基本文法をゼロから学ぼう

jQueryを使ってHTMLドキュメントから特定の要素を選択し、その要素に対して何らかのアクション（メソッド）を実行します。

jQueryの利用開始

jQueryを使用するには、まずは以下のようなスクリプトタグをHTMLファイルに追加します。これにより、jQueryライブラリが読み込まれます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

$(selector).action()は、jQueryの基本的な構文です。

ここで：

$はjQueryを意味します。
selectorはHTML要素を指定します。これはCSSセレクタと同じ形式で指定します（例：'#myId'、'.myClass'、'p'など）。
action()は実行するjQueryメソッドを指定します。

例えば、以下のコードはIDがmyIdの要素を選択し、そのテキストを”Hello, world!”に変更します。

$("#myId").text("Hello, world!");

上記のコードはtextメソッドを使用していますが、他にも多くのjQueryメソッドがあります。これらのメソッドを使って、要素の表示状態を変更したり、新たな要素を追加したり、イベントハンドラを設定したりすることができます。

jQueryの機能を利用するためには、一般的に$(document).ready()関数の中にコードを書きます。

これは、すべてのDOM要素が読み込まれた後に、JavaScriptコードが実行されるようにするためのものです。

$(document).ready(function(){
  // ここにコードを書く
});

jQueryでは、HTML要素を「選択」するために「セレクタ」を使用します。セレクタは、基本的にはCSSのセレクタと同様です。

$("p") // すべての<p>要素を選択
$(".myClass") // "myClass"クラスを持つすべての要素を選択
$("#myId") // "myId" IDを持つ要素を選択

セレクタで選択した要素に対して、様々な「メソッド」（処理）を適用することができます。これにより、要素の内容を変更したり、イベントを追加したりすることが可能です。

$("p").hide() // すべての<p>要素を非表示にする
$("button").click(function(){ // ボタンがクリックされたときの処理を追加
  $("p").hide();
});