jQuery基礎メモその3

#eqメソッド
jQueryオブジェクトは、配列のような構造をしており、セレクタに合致した要素が配列のように入っている(実際に配列とは異なるものである)。
>```html:index.html
<ui>
  <li>HTML</li>
  <li>CSS</li>
  <li>jQuery</li>
</ui>
```

>```javascript:script.js
$('li')
/*
=> [
      <li>HTML</li>,    インデックス番号 0
      <li>CSS</li>,     インデックス番号 1
      <li>jQuery</li>,  インデックス番号 2
    ]
    セレクタに合致した要素が、配列のように並んでいる
*/
```

eqメソッドを用いると、jQueryオブジェクトの中からeqの引数の数字と同じインデックス番号の要素を取得できる。
>```html:index.html
<ui>
  <li>インデックス 0</li>
  <li>インデックス 1</li>
  <li>インデックス 2</li>
</ui>
```
```javascript:script.js
$('li').eq(2).css('color', 'red');
// インデックス2がcolor: red;になる
```

#indexメソッド
indexメソッドは要素のインデックス番号を取得できる。
>```html:index.html
<ui>
  <li>インデックス 0</li>
  <li class="active">インデックス 1</li>
  <li>インデックス 2</li>
</ui>
```

>```javascript:script.js
$('li').index($('.active'));
//　li要素における.active要素のインデックス番号（1）を取得する
```

例
>```html:index.html
<ui>
  <li>インデックス 0</li>
  <li>インデックス 1</li>
  <li>インデックス 2</li>
</ui>
```
```javascript:script.js
$('li').click(function() {
// クリックした要素のインデックス番号が代入される
  var index = $('li').index($(this));
});
```

var indexは数値を格納しているため$は付けない。

#prevとnext
prevメソッドは、ｊQueryオブジェクトの兄弟要素（同じ階層の要素）中から1つ前の要素を、
nextメソッドは1つ後ろの要素を取得できる。
>```html:index.html
<ui>
  <li>prev</li>
  <li id="center">center</li>
  <li>next</li>
</ui>
```
```javascript:script.js
$('#center').prev().css('color', 'red');
$('#center').next().css('color', 'blue');
```

結果
prev（赤色）
next（青色）
#共通部分の関数化
関数を使うことで同じ処理をまとめることができる。
>```javascript
// 呼び出される関数
function changeBtn() {
  // 処理
}
>
$('index-btn').click(function() {
  changeBtn();
  // 関数名で呼び出す
});
```

#値の取得
textメソッドは引数を指定せずに用いることで、要素内の文字列を『ゲット（取得）』することができる。
>```javascript
// 文字列を書き換える場合
$('h1').text('こんばんは');
>
// 文字列を取得する場合
var text = $('p').text();
// p要素内の文字列を取得
```

htmlメソッド、cssメソッドもゲットとして使うことができる。
>```javascript
// HTMLを取得する場合
var html = $('#main').html();
>
// cssプロパティを取得する場合
var fontSize = $('h1').css('font-size');
```

attrメソッド
HTMLの属性はattrメソッドを用いてゲット、セットできる第一引数に属性名、第二引数にその属性値を指定することで属性をセットすることができる。
第二引数を指定しない場合はその値を取得できる。
>```javascript
// 属性をセットする場合
$('h1').attr('id', 'title');
// h1要素にtitleというidをセット
>
// 属性の値を取得する場合
var url = $('a').attr('href');
// a要素のhalf属性の値を取得

#入力値の値の取得
inputタグを用いると一行の入力欄を作ることができる。inputタグに入力されている値は、valメソッドで取得できる。
>```html:index.html
<form>
  <div>名前</div>
  <input id="name" type="text">
</form>
```

>```javascript:script.js
var name = $('#name').val();
```

フォームが作成されたときのイベントとして、submitイベントがある。
submitイベントを用いると、送信ボタンがクリックされた時だけではなく、Enterキーでフォームが送信された場合もイベントが発生する。
>```javascript:script.js
$('form').submit(function() {
  // フォームの値を取得
});

# セレクトボックス
selectタグを用いると選択技式のセレクトボックスを作ることができる。
selectタグとoptionタグからなり、各optionタグからなり、各optionタグが選択技になる。
>```html:index.html
<form>
  <div>性別</div>
  <select id="gender">
    <option value="male">男</option>
    <option value="female">女</option>
  </select>
</form>
```

>```javascript:script.js
var gender = $('#gender').val();
// selsct要素の選択されているoptionのvalue属性を取得
```

#エラーメッセージ
>```javascript
                         // '' 空文字
if ($('#text-form').val() == '') {
  // エラーメッセージを表示
} else {
  // エラーメッセージを隠す
}
```

#アニメーション
アニメーションをつけるにはanimateメソッドを用いる。
$('セレクタ').animate({'プロパティ':'値'})のように、引数は連想配列で指定する。
2つ目の引き数でアニメーションの時間を設定することができる。
時間はミリ数で指定するか'slow''fast'といった文字列で指定することができる。
>```javascript
$('h1').animate({
  'font-size': '50px'
// 変更するプロパティ: 変更後の値
}, 1000);
// アニメーションのミリ数
```

hoverイベントの復習
>```javascript
$('h1').hover(
  function() {
    // マウスを乗せた時の処理
  },
  function() {
    // マウスを外した時の処理
  }
);
```

#ページ内リンク
＜a＞タグは他のページへのリンクだけではなく、ページ内のリンクを作ることができる。
リンクの飛び先にidを指定し、＜a＞タグのhref属性に"#id名"とすると、＜a＞タグをクリックするとそのidの要素が表示されている場所まで移動するようになる。
>```html
<!-- hrefの値を"# + id名"とする -->
<a href="#contact">
  お問い合わせ
</a>
>
<div id="contact">
>
</div>
```

ページ内リンクはjQueryでも実装できる。
jQueryで実装するとリンク先への移動にアニメーションをつけたりすることが可能になる。
scrollTopメソッドは、＄('html, body').scrollTop(値); のように指定し、ページ最上部から値pxの位置に移動することができる。
scrollTopは通常$('html', 'body')に対して用いるため、セットで覚えておく。
>```javascript
$('#top-btn').click(function() {
  $('html, body').scrollTop(0);
  // スクロールされている部分の距離が0 = ページの最上部
});
```

＄('html, body').scrollTop(0);は 
＄('html').scrollTop(0);
＄('body').scrollTop(0);の2行と同じ

#スクロールにアニメーションをつける
animateメソッドでは、CSSの値だけではなく、scrollTopなどの値も変更できる。
$('html, body').animate({'scrollTop': 0}, 時間);のように指定する。
>```javascript
$('html, body').animate({
  'scrollTop': 0
// 変更するプロパティ: 値
>
}, 'slow');
// アニメーションの速さ
```

#offsetメソッド
offsetメソッドを使用することで、要素の表示一を取得することができる。
offsetメソッドは、ページの上端からの距離とページの左端からの距離が連想配列の形で返ってくる。
>```javascript
// h1の要素の表示位置を取得
$('h1').offset();
>
// ページ最上部からの、h1要素の距離を取得
$('h1').offset().top;
```

#attrメソッドで飛び先を取得
>```html:index.html
<!-- href の値を"# + id名" とする -->
<a class="scroll-btn" href="#html">
HTML
</a>
  ・・・
<div id="html">
  ・・・
</div>
```
>
```javascript:script.js
$('.scroll-btn').click(function() {
  var id = $(this).attr('href');
  // ①クリックしたボタンの飛び先を取得
>
  var position =$(id).offset().top;
  // ②飛び先の最上部からの距離を取得 
// ・・・
});