スポンサーサイト





上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

  • Comments (Close): -
  • TrackBack (Close): -

イベント

  • Posted by: javascriptmania
  • 2011-05-16 Mon 21:04:21
  • jQuery




通常のJavaScriptにも、onclick などのイベントハンドラがありますが、jQueryでもクリックしたときなど、指定した要素に対する何らかの操作が発生したときに、HTMLやCSSを操作できます。

書式は以下の通り。

$('セレクタ').イベント(function(){
   処理;
)};



では、ボタンをクリックすると「Hello」の文字が「Yes」に変わるコードを書きます。

<html>

<head>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.setOnLoadCallback(function() {
$('button').click(function() {
$('p').html('Yes');
});
});

</script>

</head>

<body>

<button>ここをクリック</button>

<p>Hello</p>

</body>

</html>


実行前 :
20110516_3


実行後 :
20110516_4

「クリックしたとき」のイベントを表すのは click です。

形式上、ready()関数 $(function(){}); にセレクタとイベントを加えるとイベント処理になります。覚えやすいですね。

では、イベントに慣れるために、ボタンをクリックすると画像が変化するプログラムを書いてみます。

<html>

<head>


<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

google.load("jquery", "1");
google.setOnLoadCallback(function() {
$('img').mouseover(function() {
$('img').attr('src','http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/20110516_1.jpg');

});
});

</script>

</head>

<body>

<button>ここをクリック</button><br />

<img src="http://blog-imgs-35.fc2.com/j/a/v/javascriptmania/20110516_2.jpg">

</body>

</html>


イベントは mouseover です。マウスをのせると画像が変わります。

画像を変えるには、attr()メソッドを使います。

attr(属性名, 属性値)

指定した属性の値を変更します。

セレクタは img です。

実行前 :
20110516_7

実行後 :
20110516_8
関連記事

タグ :

   印刷ボタン       この記事に拍手する       このエントリーをはてなブックマークに追加

Return to page top

Comments:

Comment Form
Only inform the site author.

Trackback+Pingback:

TrackBack URL for this entry
http://javascriptmania.blog111.fc2.com/tb.php/40-bee39420
  • 閉じるボタン
月別アーカイブ
リンク
カテゴリ
RSSリンクの表示
QRコード
QR
最新コメント
最新トラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。