【プロゲート】jQuery 初級編の学習内容まとめ

jQuery 初級編

1.jQueryに触れてみよう

jQueryとは
・jQueryはJavaScriptのライブラリの1つ
・ユーザーのクリックに反応して表示されるフォームや、アニメーションなど、HTMLとCSSだけでは実現できなかった様々な動きを表現することができる

2.メソッドを使ってみよう

jQueryの書き方
・jQueryの操作は非常に直感的かつシンプル
・jQueryの使い方は、
①jQueryオブジェクトを作成し、
②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す、
という2つが基本になる
・jQueryはJavaScript（JS）なので、文末にセミコロンが必要
・またコメントもJS同様に//を用いる

jQueryオブジェクト
・jQueryオブジェクトは、図のように$('セレクタ')とするだけで作成できる
・セレクタにはHTMLのタグ名やclass名などを指定し、それに合致したHTMLの要素がjQueryオブジェクトになる
・セレクタはCSSセレクタ（CSSで使用するセレクタ）と同じなので、CSSの知識さえあれば直感的に操作できる

hideメソッドを使ってみよう
・メソッドとは、便利な機能のこと
・jQueryのメソッドは前述のjQueryオブジェクトでしか利用できない
・メソッドを使うと、jQueryオブジェクトの内容（HTMLの要素）を変更したり、アニメーションをつけたりすることができる
・メソッドは$('セレクタ').メソッドというように、ドットに続けて呼び出す
・要素を隠すhideというメソッドを使ってみよう

3.アニメーションを使おう

アニメーション付きで要素を隠す（1）
・hideメソッドに似たものとしてfadeOutメソッドがある
・fadeOutメソッドを用いると、要素を隠す際に、アニメーションを付けることができる
・fadeOutメソッドは、後ろの()内に引数として、アニメーションの速度を指定できる
・ミリ秒での指定や、文字列での指定が可能

アニメーション付きで要素を隠す（2）
・slideUpメソッドを用いてもアニメーション付きで要素を隠すことができる
・fadeOutと異なるアニメーションを実現できる
・また、slideUpメソッドも後ろの()内に引数として、アニメーションの速度を指定できる

classとid
・HTMLのタグに名前を付ける方法として、HTMLコースでclassを学習したが、これと同様にidというものがある
・idはclassと同じように使うが、classとの違いとして、１つのページ内で同じid名を複数回使うことはできない
・idはclassと同様に指定する

classとidをセレクタにする
・CSSのセレクタと同様にclass名の前にはドット（.）、id名の前にはシャープ（#）を用いる
・idは同一ページに一箇所しか存在しないのでjQueryの処理が高速化される
・jQueryオブジェクトのセレクタにはできるだけidを用いるようにする

5.要素を表示しよう

displayプロパティ
・CSSにはdisplayプロパティというものがある
・「display: none;」とすると要素を隠すことができる
（displayプロパティに関して、詳しくはHTML&CSS中級編を参照）

隠れた要素を表示しよう
・隠れた要素を表示するメソッドとして、showメソッドがある
・表示したい要素に対し、$('セレクタ').show();と指定することで隠れた要素を表示できる
・hideメソッドと合わせてセットで覚えると良い

アニメーション付きで要素を表示
・fadeOutの反対としてfadeInメソッド、slideUpメソッドの反対としてslideDownメソッドがある
・どちらもアニメーション付きで隠れた要素を表示することができる

6.clickイベント

イベントとは
・イベントを用いると、ある処理を行うタイミングを設定できる
・WEBページ内で、ユーザーによってクリックなどの操作が行われた時、あらかじめイベント内に指定した処理を実行する
・イベントの構文は、$('セレクタ').イベント名(function(){ });のように書く

clickイベント
・clickイベントを用いると、「セレクタがクリックされた時に処理をする」ことができる
・例えば、ボタンをクリックしたときに関連する文章を表示する、といったイベントを設定できる

7.cssメソッド

CSSメソッドとは
・CSSメソッドは、CSSを変更できるメソッド
・1つ目の引数にCSSのプロパティ、2つ目の引数にプロパティの値を入れる

cssメソッドで色を変えよう
・cssメソッドの具体例
・cssメソッドで要素の文字の色を変更したいときは、$('セレクタ').css('color', 'red');のように記述する
・widthやfont-sizeなど他のプロパティもすべてcssメソッドで変更することができる

cssメソッドで要素を隠す、表示する
・cssメソッドでdisplayプロパティの値を変更することもできる
・$('セレクタ').css('display', 'none');はhideメソッドと全く同じ
・このようにhideメソッドやshowメソッドは、実はdisplayプロパティの値を変更しているだけだということを覚えておく

8.textメソッドとhtmlメソッド

HTMLを変更する(1)- textメソッド
・jQueryではCSSだけでなく、textメソッドを用いることでHTMLそのものを変更することも出来る
・textメソッドは、$('セレクタ').text('書き換える文字列');のように記述する

HTMLを変更する(2)-htmlメソッド
・htmlメソッドは、要素の中身のHTMLを書き換えることが出来る
・textメソッドと違い、htmlメソッドの引数は、単なる文字列ではなくHTMLだということ
・例えばtextメソッドで行うと、<span>タグもそのまま文字列としてブラウザに表示されるが、htmlメソッドなら<span>タグがHTMLタグと認識され、ブラウザには「こんばんは」とだけ表示される

9.this

thisの構文
・$(this)はイベントの中で、そのイベントが起こった要素を取得することができる
・$()の中でthisをクォーテーション（"や'）で囲まないことに注意
・$(this)は非常に重要な概念なので覚えておく

thisの使い方
・thisはイメージしにくいので、具体例を見てみよう
・例えば複数のli要素にclickイベントが設定されていた場合、クリックされた時に、実際にクリックされたli要素にだけ処理を行いたい場合がある
・このようなときはthisを用いて実際にイベントが起こった要素を取得する

10.変数とメソッドチェーン

変数を使おう
・同じjQueryオブジェクトを複数回使用する時は変数にする
・コードが見やすくなる上、jQueryの処理が高速化される
・JavaScriptと同じく、jQueryで変数宣言にはvarを用いる
・変数には文字列や数値、jQueryオブジェクトなどを格納することができるが、jQueryオブジェクトを格納する時は、わかりやすいように変数の頭に$を付けるのが慣例となっている

メソッドチェーンを使おう
・同じjQueryオブジェクトを複数回使用する時は、メソッドチェーンを使うことでも処理速度を高速化できる
・メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文
・$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用される

11.find・children

子要素を取得しよう(1)-findメソッド
・findメソッドは、すべての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得したいときに用いる
・<div id="wrapper">から</div>の中にあるすべての<a>要素を取得することができる

子要素を取得しよう(2)-childrenメソッド
・childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得したいときに用いる
・<div id="wrapper">の子要素は<a>タグと<p>タグが1つずつなので、<a>タグが1つ取得される

12.hoverイベント

hoverイベントを作ろう
・hoverイベントとは、要素にマウスが乗った時、外れた時に指定した処理を行うイベント
・「jQueryとは？」にマウスが乗った時にだけ、説明文が表示されるようにしてみる

hoverイベント
・hoverイベントは、 $('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);のように書く
・clickイベントと違い、引数を2つ書くことに注意
・引数の間はコンマで区切る