スタートページ＞ Javascript＞ jQueryの基礎

jQuery関数の起動

「jQueryの基礎：jQueryの構造」の実例です。
ボタンをクリックすると、右の文章が変わります。

注意：続けて実行するときは、先の実行結果が残ってしまうので、「再読み込み」や「最新の情報に更新」をしてください。

例１：ＨＴＭＬ起動型

ＨＴＭＬでのonclick="例１()"により、スクリプトが起動します。
h4タグの文を赤色にします。

<script>
　　function 例１() {
　　　　$("h4").css("color", "red");
　　}
</script>

<input type="button" value="例１"
        onclick="例１()">
</input>

例２：スクリプト起動型

$("#例２").clickとは、「id="例２"の個所がクリックされたら」の意味です。
class="aaa" を書き換えます。

<script>
    $(function(){
        $("#例２").click(
            function(){
                $(".aaa").text('class="aaa"を書き換えました');
            }
        );
    })
</script>

<input id="例２" type="button" value="例２">
</input>
Ａ：<div id="id1">の行

Ｂ：<h4> の行 </h4>

Ｃ：<h4 class="aaa"> の行 </h4>

Ｄ：</div>の行
Ｅ：<div id="id2">の行
Ｆ：<h5 class="acc"> の行 </h5>
Ｇ：<h5 class="bbb"> の行 </h5>
Ｈ：</div>の行
Ｉ：<mytag>（ユーザ独自タグ）の行

Ｊ：<h4 class="aaa"> の行 </h4>

Ｋ：<h5 class="aaa"> の行 </h5>
Ｌ：<h5>の内部に<span class="aaa">～</span>がある
Ｍ：</mytag>の行 
id="id1" の範囲：Ａ～Ｄ
id="id2" の範囲：Ｅ～Ｈ
<mytag> の範囲：Ｉ～Ｋ

   class="aaa"  "bbb"  なし
<h4>    Ｃ・Ｊ            Ｂ
<h5>    Ｋ(Ｌ)    Ｇ

例３：ページ表示時の自動起動型

<body onload="関数()"> で実行される関数のようなものです。
下の赤字個所が自動的に表示されました。

例３Ａ表示場所(「id="id1」の個所）

例３Ｂ表示場所（「<h4>」の個所）

<script type="text/javascript">
    $(function() {
        var 表示内容 = $("#id1").text();
        $("#例３Ａ表示場所").text(表示内容);
    } )

    $(function() {
        var 表示内容 = $("h4").text();
        $("#例３Ｂ表示場所").text(表示内容);
    } )
</script>
<div id="例３Ａ表示場所"></div>
<div id="例３Ｂ表示場所"></div>