JSとjQueryそれぞれのマウスクリック処理

JSとjQueryそれぞれのマウスクリック処理 – メディアデザイン実習JJavaScriptとjQueryの違いが、いまいちわかっていない方もまだ多いかもしれません。

マウスで何かをクリックしたときの処理を例に、書き方の違いを見てみましょう。

JavaScriptだけで書く場合

jQueryを使って(読み込んだ状態で)書く場合

javaScriptでまずクリックする対象を取得するには、
getElementById
getElementByName
getElementByTagName
などを使います。
クラス名では取得できません。また、ID指定以外で複数の対象を取得したら、配列に格納される点も面倒です。

jQueryでは
$(‘#id’)
$(‘.class’)
といった具合にかんたんに取得できて、しかも配列を意識することなく複数の対象を扱える点もスマートです。

 

クリックイベントを処理するには、
javaScriptだけだと「イベントリスナー」を使わなければいけないので、イベントハンドラと実行関数が別のところに分かれます。
jQueryであれば、一カ所にまとめて書けます。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です