初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery イベント 1

さて前回までセレクターとメソッドについて書きました。再度おさらいですが jQueryを使うための流れは下記です。

  1. どの箇所に対して:セレクタ
  2. 何をさせる:メソッド
  3. どのタイミングで:イベント

今回は【どのタイミングで】のイベントについて書いていきたいと思います。

イベントでタイミングを設定

HTMLが読み込まれたタイミングで実行する

ready()イベント
これはすでに一番最初に出てきているイベントで、HTMLが読み込まれたで実行するイベントになります。 他のイベント処理でも、ready()イベントは必須

<script>
$(document).ready(function(){
//HTMLが読み込まれたときに、実行する処理を記述
});
</script>

上記の短縮記述が下記になります。 意味は「ドキュメントの準備が出来たら実行する」です。

<script>
$(function(){
//HTMLが読み込まれたときに、実行する処理を記述
});
</script>

click()イベント

特定の要素がクリックされたときに、何らかの処理を実行する命令です。

$( セレクター ).click(function(){
  //セレクターで指定した要素がクリックされたときに実行する処理
});

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>click()イベント</title>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$( 'button' ).click(function(){
$( 'img' ).attr( 'src', 'img/cat02.png' ).attr( 'alt', 'name is Anklet' );//アンクレットという猫の写真
});
});
</script>
<style>
button {
cursor: pointer;
}
</style>
</head>
<body>
<p><button>画像を変更</button></p>
<p><img src="img/cat01.png" alt="name is Bell"></p>//ベルという猫の写真
</body>
</html>

《実行結果》    実行前→実行後

f:id:bellsmarket:20150301180826p:plainf:id:bellsmarket:20150301180830p:plain

スクリプトを順に読み解きます。

  1. 通常のHTML記述でbody要素内にボタンと画像を表示させました。
  2. 次にCSSでボタンにカーソルが合ったときにポインターを変化するさせました。
  3. script要素内ですが、
    【どこ?】
    ボタン
    【いつ?】
    クリックした時
    【どうする?】
    imgタグの属性の'src'を'img/cat02.jpg'変更し、更に属性'alt'を'name is Anklet'に変更する
    するという処理をしています。

ボタンをクリックした時に属性値を変更することによって写真が変更される仕組みになっています。

topへ戻る