24.jQueryってなんだ？② ～書き方と使い方～
昨日に引き続きjQueryについて整理していきます。
jQueryがどんなものか、どんなメリットがあるかという事を昨日はまとめました。
本日は書き方のルールと、使い方についてまとめていきます。
jQueryの書き方
JavaScriptを使いやすく簡単にしたものがjQueryでしたね。
jQueryで書けるものは、当然JavaScriptで書けるということですね。
それぞれ比較しながら見ると理解が深まるかと思います。
それではやっていきましょう。
まずはjQueryの基本の型から
デイトラでは
$('主語').動詞('補語')の文法ルールで書く
と説明されています。
そもそも英語が苦手な私は下記のようなイメージでざっくり捉えています。
$('操作・監視対象').やりたいこと('補足')
では、要素の指定方法から見ていきましょう。
要素の指定方法
早速コードを書いて見ていきます
JavaScriptの場合は
document.getElementById('test')
jQueryの場合は
$('#test')
ブラウザで読み込んだHTMLを指定するのがJavaScriptだと
document
の部分です。jQueryでは
$
だけです。
条件を指定して要素を取得するのは
getElementById('test')
です。
jQueryでは
('#test')
ですね。
JavaScriptは指定する要素や属性に合せてコードを書き分ける必要があります。
- 要素なら「getElementsByTagName(要素名)」
- クラスなら「getElementsByClassName(クラス名)」
- Idなら「getElementById(Id名)」
というように、書き分けます。
それがjQueryでは
- 要素なら('要素名')
- クラスなら('.クラス名')
- Idなら('#Id名')
というように、形は同じで名前の最初に判別記号をつけるだけで良いのです。
分かっていると非常に楽にかけますね。
ただJavaScriptの方が、コードを見た時に意味は伝わりやすい気もします。
getElementsByTagName「タグ名に基づいて要素を取得」ってわかりやすいですよね。
メソッドを使う
では、jQueryの代表的なメソッドを少し紹介します。
いやいやいや、メソッドって何？初めて聞いたんですけど！
と思ったそこのあなた。私も同じでした。
メソッド ＝ 関数のことだそうです。
こうした細かい違いも統一されておらず、独学にとっては混乱の元だと思います。
処理をまとめ、その「まとまり」に名前を付けて再利用できるようにしたもの。
という理解でいいかと。
わかりやすいwebページがありましたので、紹介します。
今日のまとめ
今日はjQueryの書き方について整理しました。
JavaScriptと比べながら見ていくのは、わかりやすいなと思います。
では、また。
