WebデザイナーのためのjQuery実践講座

jQueryでマウスイベントを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryでマウスイベントを利用するにあたり、その主な種類のご紹介と使い方について、解説致します。
講師:
06:10

字幕

このレッスンでは jQuery で マウスイベントを利用するにあたりー その主な種類のご紹介と使い方について 簡単に解説していきます まずは ダウンロードしてきたこちらのー mouse-event という フォルダーの中に入っているこちらの― index.html ファイルと こちらの js フォルダーの中に入っている― この javascript.js ファイルをエディッターで開いてください そして これがそれらのファイルを 開いた状態です そして こちらの右側には この index.html ファイルを ブラウザで開いた状態のものを 表示させています これらのファイルを使って 今回の レッスンの解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう マウスイベントとは ユーザーが マウスで何か操作を行ったときに― その操作を感知して 指定した処理を 行わせる機能のことを指します 今回は jQuery でその機能を 利用する方法についてみていきたいと思います まずは こちらの index.html ファイルの方を見てみましょう こちらの index.html ファイルには三つの div タグ― で囲まれたテキストがあります そして 上から順番に click mouseenter― doubleclick という ID が 付けられています このそれぞれの div タグに スタイルを付けたものが― こちらの右に表示されているかたちとなります それでは 次に こちらの  javascript.js ファイルを― 開いてみましょう すると このような画面が 表示されてきましたね こちらも上から クリック マウスエンター ダブルクリックという順番で― マウスイベントを使った 処理の実行を行っています ではまず click の方から 見ていきましょう まずこちらのブラウザの方を見てください そして こちらの click と書かれた この青いボックスの中をクリックすると― このようにアラートが表示されてきましたね 今回は このクリックイベントについて 見ていきたいと思います 注目していただきたい部分は こちらの部分ですね まず マウスイベントを登録するための HTML の要素を指定します それが こちらの部分です まず $ と書いて その中に div#click と書いていますね この #click は ID = click を意味します 要するに ID = click が 付いた div タグに― マウスイベントを付けるよ という意味ですね そして その後に on と書きます この on は イベントを 登録するためのものになります そして その後に click と書いていますね そして カンマで区切って その後に function と書きます そして 括弧 括弧閉じる そして 波括弧 そして 波括弧閉じるの 括弧閉じるの セミコロン と書いて1つの文章を閉めます そして こちらの function の 波括弧の間に実行したい処理を書きます 今回はアラート文を使って クリックしました!とダイアログを― 表示させるようにします こうすることによって ID click が 付いた div タグをクリックしたときに― こちらの function の中の波括弧の 間に書かれているこちらの処理を― 実行するという意味になります このようにすることで 先ほど ブラウザの方で確認した― こちらの青いボックスをクリックしたときに― このように JavaScript の アラートが表示されてくるようになります こちらがクリックイベントとなります では 続きまして mouseenter というイベントについて― 見ていきたいと思います こちらは このブラウザで 見ると この黄色の部分ですね この mouseenter は その名の通りマウスカーソルが― この領域の中に入ってきたときに 発動させるという意味になります それでは この黄色いボックスの中に マウスカーソルを入れてみましょう すると このように アラートが表示されてきましたね OK を押して閉じます mouseenter の書き方も 基本的には click と同じです 違う部分は こちらの部分ですね 先ほどclick と書いたところに mouseenter と書きます こうすることによって マウスのカーソルが その領域に入った時に― 今回はその領域というのは ID mouseenter が付いた― div タグですね この div タグの中に入ったら こちらの処理を実行するという意味になります 最後に doubleclick について 見ていきたいと思います こちらも基本的には click や mouseenter のときと同じですね 違うのは こちらの部分となります この on の後に dblclick と 書いてあげることによって― ダブルクリックに反応するようになります 今回は ID = ダブルクリックが 付いた div タグに― そのイベントを登録したいと思います それがこちらの赤い枠の部分ですね それでは こちらを ダブルクリックしてみましょう するとこのように ダブルクリックしました!ということで― JavaScript のアラートが 表示されてきましたね これが jQuery を使って マウスイベントを登録する方法となっています このマウスイベントですが ここに記載のもの以外にもあります 例えば 先ほどの mouseenter とは逆で― 要素からマウスカーソルが出て行ったときに― 反応させることができる mouseleave というものもあります このマウスイベントは JavaScript や― jQuery を使って 制作していくにあたり必ず― 覚えておいた方が良いものとなっていますので しっかりとマスターしておきましょう 以上でレッスンは終了です 今回は jQuery でマウスイベントと 利用するにあたり― その主な種類のご紹介と 使い方について解説いたしました 以降のレッスンでは jQuery で 既存の CSS の値を取得 変更する方法― 及び 新たにスタイルを追加する方法について 解説していきますので そちらも合わせてご覧ください

WebデザイナーのためのjQuery実践講座

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

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

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

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