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="クリック！" />

サンプルの実行 

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

結果

今日の天気は？

備考・その他

ダブルクリックイベントの設定方法はこちらです。

javascript-style.hatenablog.com

END