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

今すぐコースを受講しましょう

今すぐ登録して、23,200件以上登録されている、業界エキスパート指導のコースを受講しましょう。

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

jQueryでマウスイベントを利用する - jQueryのチュートリアル

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

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

このレッスンでは 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 の要素を指定します それが こちらの部分です まず $ と書いて その中に…

目次