jQueryの標準的な構文

posted : 2022.12.02 updated : 2022.12.02

jQueryの文は、通常、ドル記号（$）で始まり、セミコロン（;）で終わります。

jQueryでは、ドル記号($)はjQueryの別名に過ぎません。jQueryの最も基本的なステートメントを示す次のコード例について考えてみましょう。

<script>
    $(document).ready(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

上記の例では、単にユーザーにアラートメッセージ “Hello World!

$(document).ready(handler); – このステートメントは、一般的にreadyイベントとして知られています。ハンドラは基本的にready()メソッドに渡される関数で、ドキュメントが操作可能な状態になったとき、つまりDOM階層が完全に構築されたときに安全に実行されるようにするためのものです。

jQueryのready()メソッドは、通常、無名関数で使用されます。ですから、上の例は次のような省略記法で書くこともできます。

<script>
    $(function(){
        // Some code to be executed...
        alert("Hello World!");
    });
</script>

さらに、イベントハンドラ関数の内部には、基本的な構文に従って、以下のように任意のアクションを実行するjQueryステートメントを記述することができます。(セレクタ).action();

ここで、$(selector) は基本的に DOM ツリーから HTML 要素を選択して操作できるようにし、action() は選択した要素に対して CSS プロパティの値を変更したり、要素の内容を設定したりといった処理を適用するものです。DOMが準備できた後に、段落のテキストを設定する別の例を考えてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery standard syntax</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("p").text("Hello World!");
        });
    </script>
</head>
<body>
    <p>Cyber-bridge</p>
</body>
</html>

上の例のjQuery文のpはjQueryのセレクタで、ドキュメント内のすべての段落（つまり<p>要素）を選択し、後でtext()メソッドで段落のテキスト内容を “Hello World!”のテキストにセットしています。

上記の例では、段落のテキストはドキュメントの準備ができたときに自動的に置き換えられます。しかし、段落のテキストを置き換えるjQueryのコードを実行する前に、ユーザーに何らかのアクションを実行してもらいたい場合はどうしたらよいでしょうか。最後にもうひとつ例を考えてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery standard syntax</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $("p").text("Hello World!");
            });            
        });
    </script>
</head>
<body>
    <p>Not loaded yet.</p>
    <button type="button">click me</button>
</body>
</html>

上の例では、「click me」<ボタン>にクリックイベントが発生したときだけ、つまりユーザーがこのボタンをクリックしたときだけ、段落のテキストが置き換えられるということです。

これで、jQueryの基本的な動作は理解できたと思います。

この記事を書いた人

その他記事はこちら