【プロゲート】jQuery 上級編の学習内容まとめ
jQuery 上級編
1.eqメソッド
スライドを作ろう
・ここから5つの演習で、スライドをつくっていく
・様々な知識の組み合わせが必要だが、１つ１つ学んでいくので安心して進める
jQueryオブジェクトの構造
・初級編でjQueryオブジェクトを学習たが、jQueryオブジェクトはどのような構造をしているのか？
・jQueryオブジェクトは、実は配列の「ような」構造をしており、セレクタに合致した要素が配列のように入っている
（実際には配列とは異なるもの）
インデックス番号
・配列の要素には0から順にインデックス番号が割り振られている
・jQueryオブジェクトも同様で、0から順にインデックス番号がついている
eqメソッド
・eqメソッドを用いると、jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できる
・$('li')の中のインデックス番号が2のjQueryオブジェクト（3個目のli要素）を取得している
（インデックス番号が0から始まることに注意）
2.表示するスライドを切り替えよう
スライドを作ろう
・まずボタンの部分を作っていく
・番号のついたボタンを押すと、それに対応したスライドが表示されるようになっている
スライドの仕組み
・スライド機能の実装の仕方
・「.slide」要素は「display: none;」を用いて基本的に表示されないようにし、activeクラスがついた「.slide」要素だけが表示されるようにする
・このactiveクラスをjQueryによって付け替えることによって、表示されるスライドを変更していく
3.indexメソッド
indexメソッド（１）
・「active」クラスがついた要素のインデックス番号を取得するにはどうすればよいか？
・これは、indexメソッドを用いると簡単にできる
・indexメソッドを用いると、「li」要素の中の「.active」要素のインデックス番号（1）を取得できる
indexメソッド（２）
・少し応用して、clickイベントの中で、クリックされた要素のインデックス番号を取得してみる
・初級編で学習したように、右の図の$(this)にはクリックした要素が入っている
・それをindexメソッドの引数に指定することで、クリックした要素のインデックス番号を取得することができる
変数の$の有無を復習しよう
・今回登場した変数indexの頭には$を付けない
・変数の頭に$を付けるのはjQueryオブジェクトが格納されていることをわかりやすくするため
・文字列や数値を格納する時は$を付けない
4.prevとnext
一枚送りで表示しよう
・先ほど作ったスライドに「前へ」ボタンと「次へ」ボタンを実装し、一枚送りで表示できるようにする
prevとnext
・prevメソッドとnextメソッドを用いて実装していく
・prevメソッドは、jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を、nextメソッドは1つ後ろの要素を取得することができる
5.ボタンの表示/非表示
ボタンを隠そう
・最初のスライドが表示されている時は「前へ」ボタンを、最後のスライドが表示されている時は、「次へ」ボタンを隠した方が良い
条件分岐
・ボタンの表示を切り替えるために、下図のような条件分岐を行う
・スライドのインデックス番号や、JavaScript基礎編で学んだ「if, else if」を組み合わせて実装していく
6.関数を使おう
共通部分の関数化
・先ほどのページで作った処理は2つのclickイベントで全く同じコードになっている
・この処理を関数としてまとめてみる
・共通部分を右の画像のtoggleChangeBtn()という関数にまとめていく
（関数がわからない人はJavaScriptを復習）
関数の呼び出し
・定義した関数をそれぞれのclickイベントの中で呼び出す
・関数を呼び出すには、その関数名を記述するだけ
・これで同じ処理を関数一箇所にまとめることができる
・これ以降処理の内容が変わっても関数の定義部分を書き換えるだけで済む
7.length
スライドの枚数が変わっても動くようにしよう
・スライド機能は一通り完成したが、まだ改善点がある
・今のままだとスライドの枚数が変わると、「次へ」ボタンを隠す機能が壊れてしまう
・これをスライドの枚数が変わっても壊れないようにする
length
・lengthを用いると、jQueryオブジェクトの要素の個数を取得できる
・これはJavaScript基礎編で学んだlengthに似ている
・これを活用して、スライドの枚数が変わっても、関数の内容を書き換えなくて済むようにする
8.要素の値を取得しよう（１）
フォームを操作しよう
・ここから6つの演習を通して、以下の様な機能を作っていく
・この演習では、jQueryを使ってHTMLから情報を取得することを学ぶ
textメソッド
・jQuery初級編で学習したtextメソッドは引数に指定した文字列を要素に「セット」するメソッド
・textメソッドは引数を指定せずに用いることで、要素内の文字列を「ゲット（取得）」することもできる
htmlメソッド, cssメソッド
・jQueryで値をセットするメソッドは大抵ゲットにも使うことができる
・jQuery初級編で学習したhtmlメソッドとcssメソッドも、ゲットとして使うことができる
9.要素の値を取得しよう（２）
HTMLの属性
・HTMLのタグにはclassやid、srcといったものを指定できるが、これらを属性と呼ぶ
attrメソッド
・HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができる
・例えば、attr('id', 'title')のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができる
・そして、第二引数を指定しない場合は、その属性の値を取得できる
10.入力欄の値を取得しよう
入力値を取得しよう
・フォームに値を入力し送信ボタンを押すと、フォームの内容を取得して表示する
inputタグの入力値
・inputタグを用いると一行の入力欄を作ることができる
・inputタグに入力されている値は、valメソッドで取得できる
・formタグやinputタグの詳細はここでは気にしなくて大丈夫
submitイベント
・フォームが送信されたときのイベントとして、submitイベントがある
・submitイベントを用いると、送信ボタンがクリックされたときだけでなく、「Enter」キーでフォームが送信された場合もイベントが発生する
11.選択ボックスの値を取得しよう
セレクトボックスの入力値
・selectタグを用いると選択肢式のセレクトボックスを作ることができる
・selectタグとoptionタグからなり、各optionタグが選択肢になる
・selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できる
12.フォームの入力チェックをしよう
フォームの入力チェック
・ここでは、フォームが送信されたときに、フォームに値が入力されているかどうかをチェックする機能を実装する
・valメソッドでフォームの値を取得し、フォームに値が入力されていなければ、下図のようにエラーを出す
エラーメッセージの仕組み
エラーメッセージを表示するために、条件分岐を行う
空文字列について
・中身の無い文字列のことを「空文字列」と言う
・空文字列は通常「''」（シングルクォーテーション２つ）で表記する
・フォームに値が入力されているかどうかは、valで取得した値が空文字列「''」かどうかで判断することができる
・またtextメソッドで空文字列を要素内に挿入することなども可能
13.入力欄への自動入力
フォームの自動入力
・次はフォームの値を自動で設定できるようにする
・まずは選択したボタンに応じて、理由の一部が書き込まれるようにする
入力欄への自動入力
・入力欄に自動で値を入力できるようにする
・valメソッドは値を取得することもできるが、反対に引数に値を指定することで、フォームに値をセットすることもできる
14.選択ボックスの自動選択
セレクトボックスの自動入力
・次はセレクトボックスも自動で選択されるようにする
・selectタグもvalメソッドを用いて自動で選択させることができる
・先ほどのinputタグとの違いは、selectタグの場合選択肢が限定されているということ
・optionタグのvalue属性に合致する値をvalメソッドの引数に指定する
カスタムデータ属性
・先ほどHTMLの属性を学習したが、属性は自分でつくることもできる
・これをカスタムデータ属性といい、「data-」から始まる属性名を自由に設定できる
・data属性は、何らかの情報をHTML内に指定しておくのに便利なため、jQueryではしばしば用いられる
カスタムデータ属性を使おう
・ここでは、選択ボタンにdata-optionという属性を設定し、それぞれのdata-option属性にはselectタグの選択肢（option）のvalue属性に対応する値を指定しておく
・こうすることで、緑色の選択ボタンを押して自動的にセレクトボックスが選択されるようにする
15.アニメーションをつけよう
animateメソッド
・マウスを乗せたらアイコンが大きくなるようなアニメーションをつくる
・アニメーションはCSSを使って実装することもできるが、今回はjQueryを使って実装する
animateメソッドの使い方
・アニメーションをつけるにはanimateメソッドを用いる
・$('セレクタ').animate({'プロパティ':'値'})のように、引数は連想配列で指定する
・2つ目の引数でアニメーションの時間を設定することができる
・時間はミリ秒で指定するか、'slow'や'fast'といった文字列で指定することができる
hoverイベントの復習
・hoverイベントは初級編で使ったが、復習しておく
・hoverイベントはclickイベントと違い、引数を2つ書くことに注意
・引数の間はコンマで区切る
16.ページ内リンクをつくろう
ページ内リンクとは
・ブログなどの縦に長いページでは、「トップに戻る」といったような名前で、ページの最上部に戻れるボタンが設置されていることがある
・今回は2ページに渡って、そのようなページ内リンクと呼ばれる機能をつけていく
aタグでのページ内リンク
・<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできる
・リンクの飛び先にidを指定し、<a>タグのhref属性に"#id名"とすると、<a>タグをクリックするとそのidの要素が表示されている場所まで移動するようになる
scrollTopメソッド
・ページ内リンクはjQueryでも実装できる
・jQueryで実装するとリンク先への移動にアニメーションをつけたりすることが可能になる
・scrollTopメソッドは、$('html, body').scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる
・scrollTopは通常$('html, body')に対して用いるので、セットで覚えておく
17.スクロールにアニメーションをつけよう
アニメーションをつけてみよう
・animateメソッドでは、CSSの値だけでなくscrollTopなどの値も変更できる
・$('html, body').animate({'scrollTop': 0}, 時間); のように指定する
18.ナビゲーションをつくろう
ナビゲーションをつくってみよう
・今回は、前回のページを応用して、ページ内ナビゲーションを作る
・押したボタンに応じて任意の場所まで自動でスクロールする
offsetメソッド
・offsetメソッドを使用することで、要素の表示位置を取得できる
・offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる
・offset().topとすると、ページの上端からの距離が取得できる
attrメソッドで飛び先を取得しよう
・各ボタンはaタグにし、そのhref属性に飛び先のid名を指定しておく
・そしてクリックしたときにattrメソッドでhref属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できる