WebデザイナーのためのJavaScript & jQuery入門

イベントを使ってみよう

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryでのイベントの設定方法、JavaScriptとの記述方法の差を確認してみましょう。
講師:
08:05

字幕

このレッスンでは jQuery によるイベントの使い方を学びます。イベントを学ぶとユーザーのクリックやマウスのホバーといったきっかけに応じて色々なインタラクションを起こすことができます。まず final のファイルをブラウザで見てみましょう。ブラウザで見ましたらこのように CLICK と HOVERというボタンがありますのでまず CLICK というボタンを押してみます。このようにスライドで閉じました。もう一度押すと戻ってきます。そして HOVER の方ですがマウスを重ねるとこのように横幅が縮みます。そしてマウスを放すとまた戻ります。このようなアニメーションを作っていきましょう。それでは begin のファイルもブラウザで開きます。そして begin のファイルをSublime Text で編集していきます。まず HTML の下までスクロールして「イベントを使ってみよう」.click と書いてあるところで記述を始めていきます。それでは $ そして ( )そしてクォーテーションでセレクタを書きましょう。今回はボタンにクラスが振ってあります。class ="btn1"そして HOVER の方にはclass = "btn2"というクラスがついているのでこれをセレクタに利用しましょう。 .btn1 そしてここからイベントです。.click そしてクリックの中身には( ) を付けた後に functionそして function 自身も引数を持つことができるので ( )そしてこの ( ) は空のままで1つ右に移動した後に { }そして { } の中で改行します。少しややこしいですがどのカッコがどの閉じカッコなのか確認しながら進めていきましょう。それではまたセレクタを書きますので$ そして ( )そしてクォーテーションそして箱の名前はbox1 という名前が振ってあります。ですので、この box1 というクラス名をセレクタに使います。box1 そしてこのセレクタにかけるメソッドは.slideToggle です。Toggle は T が大文字であることに注意しましょう。そして ( ) を空にしてそして行末をセミコロンでそしてこの click のイベントの行末にもセミコロンを打っておきましょう。そして上書き保存をしてブラウザを更新。そして CLICK のボタンをクリックしてみましょう。無事に slideToggle で閉じました。もう一度押すと出てきます。この Toggle というメソッドは対象のセレクタが消えていれば表示そして現れていれば隠す、という風にスイッチの役目を持っています。 そしてこの ( ) の中にはパラメーター値を持つことができますので数字を入れれば、そのスピードでスライドするということが可能です。では hover のイベントも記述していきましょう。書き方はこの click に似ていますのでこの click の部分をコピーしてそして hover の所にペーストしましょう。そして click の部分がまずhover に変わります。これでマウスがホバーした時という風に変わりますがホバーというのは2つ値を持つことができます。つまりマウスが触った時とマウスが対象から外れた時2つのイベントを持つことができます。つまりこの function を2つ持てるということにもなっています。ですので、この function という所をコピーしましょう。function から この } をコピーしてこの } の後ろにカンマを入れてそして Enter を押してからペーストしましょう。このように1つ目の function がマウスがホバー(かぶさった)時そして2つ目の function がマウスが外れた時を表しています。slideToggle ではなくて他のメソッドに変えてみましょう。 こちらを animate に変えましてanimate のパラメータの中に{ } を入れてEnter を押します。そして width という属性を100 に縮めるというアニメーションを書きました。またマウスが外れた時は.animate に代えてやはりパラメータの中に{ } を入れて Enterそして width 同じ属性ですね。こちらを 510 にするというような命令を書いてみました。ここまで書き終えたら最後に btn1 のままになっていますのでbtn1 ではなくホバーのボタンは class="btn2"と割り振られているのでこのように 1 を 2 に変えておきます。そして上書き保存をしてブラウザを更新。そして HOVER にマウスを触れてみるとこのようにアニメーションするようになりました。ただ、何回も連続で触れてしまうとその触れた数だけアニメーションしてしまいますのでこちらを変えてみたいと思います。では Sublime に戻りbox1 animate の手前に.stop ( ) というメソッドを追加します。これは止まっている状態のものに対してという風に命令を加えることができます。同様にこちらの box1 の後ろにも.stop ( ) としてあげます。 そして上書き保存をします。そしてブラウザを更新します。そうしますとHOVER をアニメーションの途中で触った場合はそこでアニメーションが中断されるような形になります。このようにイベントとメソッドチェーンを使いこなすことで様々なインタラクション要素を加えることが可能です。このレッスンでは jQuery のイベントについて学びました。

WebデザイナーのためのJavaScript & jQuery入門

jQueryはJavaScriptをあまりよく知らない人でも効率良く記述できるように作られたライブラリです。jQueryを使用すると、インタラクティブな演出や仕掛けを効率良くウェブサイトに実装することができます。このコースではJavaScriptとjQueryの基本を学んだうえで、それぞれの実際の応用の仕方について学んでいきます。

2時間49分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年03月02日
再生時間:2時間49分 (27 ビデオ)

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。