jQueryの基本(第1回)
■はじめに
jQueryを初めて学ぶ方、初心者の方を対象にしています。
jQueryの基礎である「セレクタ」、「メソッド」、「イベント」について解説していきます。
■前提知識
・HTMLとCSS
・JavaScriptも知っているとなお良いと思います。
■準備
CDN経由でjQueryファイルを読み込むことにします。
コードは下記urlから取得できます。
https://code.jquery.com/
ここでは下記コードを使用していきます。
1 |
■jQueryの概要
jQueryはJavaScriptのライブラリの1つで、JavaScriptをより容易に記述できるように設計されています。
基本的な構造は「セレクタ」、「メソッド」、「イベント」に分かれています。
以降の記事ではこの3項目の解説をテーマに取り上げていきます。
■jQueryの構造
今回は初めなので以下のコードを例に、「セレクタ」「メソッド」「イベント」について簡単に確認しておきます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <! DOCTYPE html> < html lang = "jp" > < head > < meta charset = "utf-8" > < title >jQueryの基本</ title > </ head > < body > < h2 >jQueryの基本(第1回)</ h2 > < ul > < li >セレクタ</ li > < li >メソッド</ li > < li >イベント</ li > </ ul > <!--ここからjQueryを記述--> < script > $(function(){ $('li').click(function() { $(this).css('color', 'red'); }); }); </ script > </ body > </ html > |
「セレクタ」「メソッド」「イベント」の説明と上記コードの該当箇所は以下の通りです。
・セレクタ:命令の対象となる箇所を記述します。 (例では「$(‘li’)」や「$(this)」)
・メソッド:セレクタに対して実行する命令を記述します。(例では「css(‘color’, ‘red’)」)
・イベント:命令を実行するタイミングを指定します。 (例では「click()」)
上記を踏まえてこのコードを読むと、
「<li>」タグの付いた要素をクリックすると、クリックした「<li>」要素の文字色を赤色に変更する
という記述となっています。ブラウザで実行して「セレクタ」の箇所をクリックすると以下の様になります。
※なお、jQueryを記述する際には、以下のように「scriptタグ」の「function」の中に記述します。
1 2 3 4 5 | <script> $( function (){ //この中に処理を記述 }); </script> |
今回は簡単な例でセレクタ、メソッド、イベントを確認しました。
それぞれどういった働きをしているかのイメージさえ持てれば良いと思います。
次回以降はそれぞれの項目について順に見ていこうと思います。