JavaScript,jQuery,CSS,HTMLの達人

JavaScriptとjQueryとCSSとHTML の使い方を解説しているブログ

jQuery で要素にクリックイベントを設定する方法

jQueryで要素にクリックイベントを設定する

jQueryを使って要素にクリックイベントを設定するには「.click()」を使用します。()内には実行したいスクリプトを記述します。

要素.click();

例)$("#btn").click();  // id="btn"の要素にクリックイベントを設定

jQuery + JavaScript ソース

「btn」というIDが付いたボタン要素をクリックすると「tenki」というIDが付いた要素の内側のhtmlを書き換えます。

<script type="text/javascript">
    $(function(){
        $("#btn").click(function(){
        $("#tenki").html("<strong>晴れ</strong>");
        });
    });
</script>

HTML

HTMLは「input」ボタン要素と「div」要素で構成されています。 

<div id="tenki">今日の天気は?</div>
<input id="btn" type="button" value="クリック!" />

サンプルの実行 

ボタンを押すとボタン上部のテキストが変わります。 

結果
今日の天気は?

END