A Little Each Day

note to self

jQueryでclickイベントをつくってみる

こんにちは。本日はjQueryである要素をクリックした時に文字列が消えるようにしてみたいと思います。

jQueryではclickイベントと呼ばれていて、基本的でかつ簡単なよく使うテクニックです。

バージョン

HTML5
CSS 3
jQuery '2.1.4'


htmlファイルの編集

まずはhtmlファイルを編集していきましょう。
今回はシンプルに上にボタン、下に文字列というレイアウトにします。

※各自事前にjQuery本体とjsファイルを読み込んでおいてください。

<!-- sample.html -->
<div id="click-btn">ボタン</div>
<h1 id="text">上のボタンをクリックしたら</br>下の文字列が消えるよ!</h1>

cssファイルの編集

次にcssファイルです。
こちらもシンプルです。

/* sample.css */
#click-btn{
  display: inline-block;
  padding: 20px;
  background-color: orange;
  color: white;
  cursor: pointer;
}


この段階で以下のようになってます。

f:id:chi_kun:20160528223009p:plain


次にjsファイルを編集していきましょう。


jsファイルの編集

最後にjsファイルです。
今回はclickイベントを作成して、ボタンを押したら文字列が消えるようにします。

// sample.js
$(function(){
  $('#click-btn').click(function(){
    $('#text').fadeOut();
  });
});


消えるメソッドはfadeOutを使いました。


これでボタンを押すとテキストが消えるようになりました。

f:id:chi_kun:20160528223455p:plain


今回は簡単ですがjQueryでよく使クリックイベントを用いたテクニックをみてきました。

今回のTipsを使えばメッセージやダイアログを自動で消すといった、サイトに動きをもたらすことができます。



本日は以上です。