eqメソッド
jQueryオブジェクトの
構造
配列jQueryオブジェクト
初級編でjQueryオブジェクトを学習しましたが、jQueryオブジェクトはどのような構造をしているのでしょうか？jQueryオブジェクトは、実は配列の「ような」構造をしており、右の図のようにセレクタに合致した要素が配列のように入っています（実際には配列とは異なるものです）。
インデックス番号
インデックス番号
左の図はJavaScript基礎編で学習した配列のイメージ図です。配列の要素には0から順にインデックス番号というものが割り振られています。jQueryオブジェクトも同様で、右の図のように0から順にインデックス番号がついています。
eqメソッド
eqインデックス番号
eqメソッドを用いると、jQueryオブジェクトの中から、eqの引数の数字と同じインデックス番号の要素を取得できます。右の図では$(‘li’)の中のインデックス番号が2のjQueryオブジェクト（3個目のli要素）を取得しています（インデックス番号が0から始まることに注意してください）。
$(function() {
// 「#hide-btn」要素のclickイベントをつくってください
$(‘#hide-btn’).click(function() {
$(‘.slide’).eq(1).fadeOut();
});
});
スライドの仕組み
スライド機能の実装の仕方を見てみましょう。
「.slide」要素は「display: none;」を用いて基本的に表示されないようにし、activeクラスがついた「.slide」要素だけが表示されるようにします。
このactiveクラスをjQueryによって付け替えることによって、表示されるスライドを変更していきます。
$(function() {
$(‘#second-btn’).click(function() {
// 「.active」要素からactiveクラスを取り除いてください
$(‘.active’).removeClass(‘active’);
// 2つ目の「.slide」要素にactiveクラスをつけてください
$(‘.slide’).eq(1).addClass(‘active’);
});
});
indexメソッド（１）
index
左の図の「active」クラスがついた要素のインデックス番号を取得するにはどうすればよいでしょうか？
これは、indexメソッドを用いると簡単にできます。
右の図のようにindexメソッドを用いると、「li」要素の中の「.active」要素のインデックス番号（1）を取得できます。
indexメソッド（２）
indexインデックス番号
少し応用して、clickイベントの中で、クリックされた要素のインデックス番号を取得してみましょう。初級編で学習したように、右の図の$(this)にはクリックした要素が入っています。それをindexメソッドの引数に指定することで、クリックした要素のインデックス番号を取得することができます。
$(function() {
$(‘.index-btn’).click(function() {
$(‘.active’).removeClass(‘active’);
// 変数clickedIndexを定義し、クリックしたボタンのインデックス番号を代入してください
var clickedIndex = $(‘.index-btn’).index($(this));
// eqの引数をclickedIndexに書き換えてください
$(‘.slide’).eq(clickedIndex).addClass(‘active’);
});
});
prevとnext
nextprev
prevメソッドとnextメソッドを用いて実装していきます。prevメソッドは、jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を、nextメソッドは1つ後ろの要素を取得することができます。
$(‘.change-btn’).click(function() {
// 変数$displaySlideを定義してください
var $displaySlide = $(‘.active’);
// 変数$displaySlideからactiveクラスを取り除いてください
$displaySlide.removeClass(‘active’);
// ifとelseを用いて、$displaySlideの前もしくは次の要素に
// activeクラスをつけてください
if ($(this).hasClass(‘next-btn’)) {
$displaySlide.next().addClass(‘active’);
} else {
$displaySlide.prev().addClass(‘active’);
}
});
ボタンを隠そう
最初のスライドが表示されている時は「前へ」ボタンを、最後のスライドが表示されている時は、「次へ」ボタンを隠した方がいいでしょう。下図のように、ボタンを隠すようにしてみましょう。
条件分岐
ボタンの表示を切り替えるために、下図のような条件分岐を行いましょう。スライドのインデックス番号や、JavaScript基礎編で学んだ「if, else if」を組み合わせて実装していきます。
// 1. 変数slideIndexに「.active」要素のインデックス番号を代入してください
var slideIndex = $(‘.slide’).index($(‘.active’));
// 3. change-btn要素を表示してください
$(‘.change-btn’).show();
// 2. ifとelse ifを用いて、「.change-btn」の表示/非表示をおこなってください
if (slideIndex == 0) {
$(‘.prev-btn’).hide();
} else if (slideIndex == 3) {
$(‘.next-btn’).hide();
}
});
// 「.index-btn」のクリックイベントと同様の処理を記述してください
var slideIndex = $(‘.slide’).index($(‘.active’));
$(‘.change-btn’).show();
if (slideIndex == 0) {
$(‘.prev-btn’).hide();
} else if (slideIndex == 3) {
$(‘.next-btn’).hide();
}
共通部分の関数化
function関数
先ほどのページで作った処理は2つのclickイベントで全く同じコードになっています。この処理を関数としてまとめてみましょう。左の図の共通部分を右の画像のtoggleChangeBtn()という関数にまとめていきましょう。
関数の呼び出し
定義した関数をそれぞれのclickイベントの中で呼び出します。関数を呼び出すには、その関数名を記述するだけです。
これで同じ処理を関数一箇所にまとめることができました。これ以降処理の内容が変わっても関数の定義部分を書き換えるだけで済むようになります
$(function() {
// toggleChangeBtn関数を定義してください
function toggleChangeBtn() {
var slideIndex = $(‘.slide’).index($(‘.active’));
$(‘.change-btn’).show();
if (slideIndex == 0) {
$(‘.prev-btn’).hide();
} else if (slideIndex == 3) {
$(‘.next-btn’).hide();
}
}
$(‘.index-btn’).click(function() {
$(‘.active’).removeClass(‘active’);
var clickedIndex = $(‘.index-btn’).index($(this));
$(‘.slide’).eq(clickedIndex).addClass(‘active’);
// 以下をtoggleChangeBtn関数にまとめ、関数を呼び出すようにしてください
toggleChangeBtn();
});
$(‘.change-btn’).click(function() {
var $displaySlide = $(‘.active’);
$displaySlide.removeClass(‘active’);
if ($(this).hasClass(‘next-btn’)) {
$displaySlide.next().addClass(‘active’);
} else {
$displaySlide.prev().addClass(‘active’);
}
// 以下をtoggleChangeBtn関数にまとめ、関数を呼び出すようにしてください
toggleChangeBtn();
});
});
length
スライドの枚数が変わっても動くようにしよう
スライド機能は一通り完成しました。
しかしまだ改善点があります。
今のままだとスライドの枚数が変わると、「次へ」ボタンを隠す機能が壊れてしまいます。これをスライドの枚数が変わっても壊れないようにしましょう。
function toggleChangeBtn() {
var slideIndex = $(‘.slide’).index($(‘.active’));
$(‘.change-btn’).show();
if (slideIndex == 0) {
$(‘.prev-btn’).hide();
// 「3」の部分を、lengthメソッドを用いて書き換えてください
} else if (slideIndex == $(‘.slide’).length – 1) {
$(‘.next-btn’).hide();
}
}
textメソッド
text
jQuery初級編では、textメソッドを学習しました。これは引数に指定した文字列を要素に「セット」するメソッドでした。textメソッドは引数を指定せずに用いることで、要素内の文字列を「ゲット（取得）」することもできます。
htmlメソッド, cssメソッド
htmlcss
jQueryで値をセットするメソッドは大抵ゲットにも使うことができます。
jQuery初級編で学習したhtmlメソッドとcssメソッドも、ゲットとして使うことができます。
script.js
$(function() {
// 変数titleに、「#title」要素のテキストを代入してください
var title = $(‘#title’).text();
// textメソッドを用いて、「#title-text」要素のテキストを書き換えてください
$(‘#title-text’).text(title);
});
index.html
<link href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css” rel=”stylesheet”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css”>
<link rel=”stylesheet” href=”https://fonts.googleapis.com/css?family=Dosis:300,400,500,600,700″>
<link rel=”stylesheet” href=”stylesheet.css”>
stylesheet.css
body {
margin: 0;
font-family: “Hiragino Maru Gothic ProN”, sans-serif;
font-size: 14px;
color: #888;
}
a {
text-decoration: none;
color: #323A45;
transition: all .3s;
}
8. 要素の値を取得しよう（１）
今回は見本のように、にんじゃわんこの説明ページからテキストを取得し、下の枠線内に表示してみましょう。
script.js
$(function() {
// 変数titleに、「#title」要素のテキストを代入してください
var title = $(‘#title’).text();
// textメソッドを用いて、「#title-text」要素のテキストを書き換えてください
$(‘#title-text’).text(title);
});
要素の値を取得しよう（２）
HTMLの属性
属性
HTMLのタグにはclassやid、srcといったものを指定できますが、これらを属性と呼びます。様々な属性がありますが、右の図に代表的なものを載せています。
attrメソッド
attr属性
HTMLの属性はattrメソッドを用いて「ゲット」と「セット」ができます。例えば、attr(‘id’, ‘title’)のように第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができます。そして、第二引数を指定しない場合は、その属性の値を取得できます。
$(function() {
var title = $(‘#title’).text();
// 2つの変数を定義してください
var id = $(‘.section-content p’).attr(‘id’);
var href = $(‘#link’).attr(‘href’);
$(‘#title-text’).text(title);
// textメソッドを用いて、それぞれ表示してください
$(‘#content-id’).text(id);
$(‘#link-href’).text(href);
});
入力値を取得しよう
ここでは下の画像のように、フォームに値を入力し送信ボタンを押すと、フォームの内容を取得して表示するようにしてみます。
inputタグの入力値
valselectinput
inputタグを用いると一行の入力欄を作ることができます。inputタグに入力されている値は、valメソッドで取得できます。formタグやinputタグの詳細はここでは気にしなくて大丈夫です。
submitイベント
submit
フォームが送信されたときのイベントとして、submitイベントがあります。submitイベントを用いると、送信ボタンがクリックされたときだけでなく、「Enter」キーでフォームが送信された場合もイベントが発生します。
$(function() {
// 「#form」要素のsubmitイベントを作成してください
$(‘#form’).submit(function() {
var textValue = $(‘#text-form’).val();
$(‘#output-text’).text(textValue);
return false;
});
});
セレクトボックスの入力値
selectvalueoptionval
selectタグを用いると選択肢式のセレクトボックスを作ることができます。selectタグとoptionタグからなり、各optionタグが選択肢になります。下図のように、selectタグはvalメソッドによって、選択中の値（optionタグのvalue属性の値）を取得できます。
$(function() {
$(‘#form’).submit(function() {
// 変数selectValueを定義してください。
var selectValue = $(‘#select-form’).val();
var textValue = $(‘#text-form’).val();
// 「#output-select」要素の文字列を変数selectValueの値で書き換えてください。
$(‘#output-select’).text(selectValue);
$(‘#output-text’).text(textValue);
return false;
});
});
フォームの入力チェック
val
ここでは、フォームが送信されたときに、フォームに値が入力されているかどうかをチェックする機能を実装します。valメソッドでフォームの値を取得し、フォームに値が入力されていなければ、下図のようにエラーを出します。
空文字列について
中身の無い文字列のことを「空文字列」と言います。空文字列は通常「”」（シングルクォーテーション２つ）で表記します。
フォームに値が入力されているかどうかは、valで取得した値が空文字列「”」かどうかで判断することができます。またtextメソッドで空文字列を要素内に挿入することなども可能です。
$(function() {
$(‘#form’).submit(function() {
var selectValue = $(‘#select-form’).val();
var textValue = $(‘#text-form’).val();
// textValueが空のとき、エラー文を表示してください
if (textValue == ”) {
$(‘#error-message’).text(‘理由を記入してください’);
} else {
$(‘#error-message’).text(”);
}
$(‘#output-select’).text(selectValue);
$(‘#output-text’).text(textValue);
return false;
});
});
フォームの自動入力
次はフォームの値を自動で設定できるようにしてみましょう。まずは下の画像のように、選択したボタンに応じて、理由の一部が書き込まれるようにしてみましょう。
// 「.option-btn」要素のclickイベントをつくってください。
$(‘.option-btn’).click(function() {
var optionText = $(this).text();
$(‘#text-form’).val(optionText + ‘が好きな理由は、’);
});
セレクトボックスの自動入力
selectval
次はセレクトボックスも自動で選択されるようにしましょう。selectタグもvalメソッドを用いて自動で選択させることができます。先ほどのinputタグとの違いは、selectタグの場合選択肢が限定されているということです。optionタグのvalue属性に合致する値をvalメソッドの引数に指定しましょう。
カスタムデータ属性
data
先ほどHTMLの属性を学習しましたが、属性は自分でつくることもできます。これをカスタムデータ属性といい、「data-」から始まる属性名を自由に設定できます。data属性は、何らかの情報をHTML内に指定しておくのに便利なため、jQueryではしばしば用いられます。
カスタムデータ属性を使おう
attrdata
ここでは、選択ボタンにdata-optionという属性を設定し、それぞれのdata-option属性にはselectタグの選択肢（option）のvalue属性に対応する値を指定しておきます。こうすることで、緑色の選択ボタンを押して自動的にセレクトボックスが選択されるようにしてみましょう。
$(‘.option-btn’).click(function() {
var optionText = $(this).text();
// 変数clickedOptionに、クリックした要素のdata-optionの値を代入してください。
var clickedOption = $(this).attr(‘data-option’);
$(‘#text-form’).val(optionText + ‘が好きな理由は、’);
// 変数clickedOptionを用いて、「#select-form」の値を自動で入力してください。
$(‘#select-form’).val(clickedOption);
});
アニメーションをつけよう
animateメソッド
animate
下の画像のように、マウスを乗せたらアイコンが大きくなるようなアニメーションをつくってみましょう。
アニメーションはCSSを使って実装することもできますが、今回はjQueryを使って実装してみましょう。
animateメソッドの使い方
animate
アニメーションをつけるにはanimateメソッドを用います。$(‘セレクタ’).animate({‘プロパティ’:’値’})のように、引数は連想配列で指定します。
2つ目の引数でアニメーションの時間を設定することができます。時間は下図のようにミリ秒で指定するか、’slow’や’fast’といった文字列で指定することができます。
hoverイベントの復習
hover
hoverイベントは初級編で使いましたが、復習しておきましょう。
hoverイベントはclickイベントと違い、引数を2つ書くことに注意しましょう。引数の間はコンマで区切ります。
$(function(){
// 「.social-icon」にマウスが乗ったときに
$(‘.social-icon’).hover(
function(){
// そのfont-sizeを30pxに変更し、
$(this).animate({
‘font-size’:’30px’
}, 300);
},
function(){
// 離れたときにはfont-sizeを24pxにしてください
$(this).animate({
‘font-size’:’24px’
}, 300);
}
);
});
ページ内リンクとは
ブログなどの縦に長いページでは、「トップに戻る」といったような名前で、ページの最上部に戻れるボタンが設置されていることがあります。今回は2ページに渡って、そのようなページ内リンクと呼ばれる機能をつけていきましょう。
aタグでのページ内リンク
<a>タグは他のページへのリンクだけでなく、ページ内のリンクを作ることもできます。リンクの飛び先にidを指定し、<a>タグのhref属性に”#id名”とすると、<a>タグをクリックするとそのidの要素が表示されている場所まで移動するようになります。
ページ内リンクをつくろう
scrollTopメソッド
scrollTop
ページ内リンクはjQueryでも実装できます。jQueryで実装するとリンク先への移動にアニメーションをつけたりすることが可能になります。scrollTopメソッドは、$(‘html, body’).scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができます。
scrollTopは通常$(‘html, body’)に対して用いるので、セットで覚えておきましょう。
// 「#top-btn」をクリックしたときに
// ページ最上部まで自動でスクロールするようにしてください
$(‘#top-btn’).click(function(){
$(‘html, body’).scrollTop(0);
});
アニメーションをつけてみよう
animatescrollTop
スクロールにアニメーションをつけてみましょう。animateメソッドでは、CSSの値だけでなく、scrollTopなどの値も変更できます。
$(‘html, body’).animate({‘scrollTop’: 0}, 時間); のように指定します。
$(‘#top-btn’).click(function(){
// animateメソッドを用いて、
// アニメーション付きでスクロールするようにしてください。
$(‘html, body’).animate({
‘scrollTop’: 0
}, 500);
});
ナビゲーションをつくろう
offsetメソッド
offset
offsetメソッドを使用することで、要素の表示位置を取得することができます。offsetメソッドは、右の図のようにページの上端からの距離とページの左端からの距離が連想配列の形で返ってきます。
offset().topとすると、ページの上端からの距離が取得できます。
attrメソッドで飛び先を取得しよう
attroffset
各ボタンはaタグにし、そのhref属性に飛び先のid名を指定しておきます。そしてクリックしたときにattrメソッドでhref属性の値を取得し、offsetメソッドでその要素の位置を取得することでページ内リンクを実装できます。
// 「header a」要素のclickイベントを作成してください。
$(‘header a’).click(function(){
var id = $(this).attr(‘href’);
var position = $(id).offset().top;
$(‘html, body’).animate({
‘scrollTop’: position
}, 500);
});