jQuery入門

参考：http://dotinstall.com/lessons/basic_jquery_v2

# jQuery
JavaScriptを便利に扱うためのライブラリ
書く量を少なくできる

公式サイト
jquery.com

## jQueryの読み込み

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> // jQureryの読み込み
     <script>
         $(function() {  // このドキュメントを読み込んだら次の処理を行う 
             $('p').css('color', 'red').hide('slow');
            });
     </script>
  </body>
</html>
```
※スクリプトはjQueryを読み込んだ後に書く
※(document).ready(function() = (function() 

## jQueryで覚えること

* セレクタ：処理対象となるDOM要素を指定する記法（p）
* メソッド：処理（.css('color', 'red') ）
* メソッドチェーン：メソッドをつなげて書くこと

#セレクタ
## セレクタの書き方
> $('')の中に書く
html要素：p,h1,ul
id：#main
class：.item

`<script>
　$(function() {  
　$("#sub").css('color', 'red');
  });
</script>`

## 細かく指定する
* >：直下の子要素（#mainの直下のitem 3-2,3-3には及ばない）
*  ：それ以下の要素（#main以下のitem）
* ,：複数の要素（pとitem）
* +：隣接する要素（itemの横にあるitem = 2,3-3 ）

隣接セレクタ
`<script>
　$(function() {
  $(".item + .item"),css('color', 'red');
});
</script>`

### フィルタ

subの中から2番目を赤くする
`<script>
　$(function() {
  $("#sub > li:eq(2)"),css('color', 'red');
});
</script>`
※2→0,1,2番目

* :eq()：イコール
* :gt(), :lt()：何々より大きいもの、小さいもの
* :even, :odd：偶数、奇数
* :contains()：中身のものを指定
* :first, :last

subの中から中身に4の入っているものを赤くする
`<script>
　$(function() {
  $("#sub > li:contains('4')"),css('color', 'red');
});
</script>`

## メソッドを使ったDOM要素指定

* parent(), children()
* next(), prev()
* siblig() ：兄弟要素

subとその親要素を指定して赤くする
`<script>
　$(function() {
  $("#sub").parent().css('color', 'red');
});
</script>`

subの2番目の次の要素を指定して赤くする
`<script>
　$(function() {
  $("#sub > li:eq(2)").css('color', 'red');
});
</script>`

その要素の同列の要素を指定して赤くする
`<script>
　$(function() {
  $("#sub" > li:eq(2)").sibling().css('color', 'red');
});
</script>`

## 属性セレクタ
HTMLに含まれる属性でセレクタを指定していく

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <p><a href="http://google.com">Google</a></p>
     <p><a href="http://yahoo.co.jp">Yahoo!</a></p>
     <p><a href="http://dotinstall.com">Dotinstall</a></p>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
       $(function() {  
       $('a[href="http://google.com"]').css('background', 'red');
       });
     </script>
  </body>
</html>
```

* =：等しい
* !=：等しくない
* *=：含む
* ^-：先頭から始まる
* $-：終わりがそうである

`<script>
　$(function() {
    $('a[href*="dotinstall"]').css('background', 'red');
  });
</script>`


# メソッド
## CSS
pの色の設定
`<script>
　$(function() {
　　$('p').css('color', 'red');.css('background', 'blue');
　});
</script>`

pの色データの取得
`<script>
　$(function() {
　　$('p').css('color', 'red');.css('background', 'blue');
　　console.log($('p').css('color'));
　});
</script>`

### addClass/removeClass
スタイルをまとめたものを利用する

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      .myStyle {
      border:5px solid green;
      font-size:48px;
    　}
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
        $('p').addClass('myStyle');
        });
     </script>
  </body>
</html>
```

## attr,data 
attr：HTMLの属性の値を取得したり変更したりする

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <a href="http://google.com">Google</a>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          console.log($('a').attr('href'));
          $('a').attr('href', 'http://google.co.jp')
        });
     </script>
  </body>
</html>
```

data：何らかのカスタム属性をつけておきその値を取得する

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <a href="http://google.com" data-sitename="google">Google</a>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          console.log($('a').data('sitename'));
        });
     </script>
  </body>
</html>
```

## タグの中身を操作する

* text
* html
* val
* remove,empty

### textメソッド
文字の変更
`<script>
$(function() {
$('p').text('just changed');
});
</script>`
値の取得
`<script>
$(function() {
console.log($('p').text());
});
</script>`

### htmlメソッド
ただのテキストでなくhtmlタグを含めたものを作る
`<script>
$(function() {
$('p').html('<a href="">click me!</a>');
});
</script>`

### valメソッド

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <a href="http://google.com" data-sitename="google">Google</a>
     <input type="text" value="hello"> //ここ
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          console.log($('input').val()); //取得
          $('input').val('hello, again!'); //変更
        });
     </script>
  </body>
</html>
```

### emptyメソッド
p要素を空にする
`<script>
$(function() {
$('p').empty();
});
</script>`

### removeメソッド
p要素を消去する
`<script>
$(function() {
$('p').remove();
});
</script>`

## 要素を追加する

* before, after（= insertBefore, insertAfter）
* prepend, append（= prependTo, appendTo）

before,after

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <ul>
       <li>0</li>
       <li>1</li>
       <li>2</li>
     </ul>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          var li = $('<li>').text('just added'); //liという要素を追加する
          $('ul > li:eq(1)').before(li); //追加する場所を指定する
        });
     </script>
  </body>
</html>
```

insertBefore,insertAfter
`<script>
$(function() {
var li = $('<li>').text('just added');
li.insertBefore($('ul > li:eq(1)'));
});
</script>`

prepend：子要素の先頭に追加する
append：子要素の末尾に追加する
`<script>
$(function() {
var li = $('<li>').text('just added');
  $('ul').append(li);
});
</script>`

prependTo, appendTo
`<script>
$(function() {
var li = $('<li>').text('just added');
li.appendTo($('ul'));
});
</script>`

## エフェクトを使う

* hide, show (消す、現す)
* fadeOut, fadeIn（ふわっと消す、ふわっと現す）
* toggle（消えたり現れたり）

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <div id="box" style="width:100px;height:100px;background:red;"></div>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          $('#box').hide(); //hide(slow),hide(800)なども可能
        });
     </script>
  </body>
</html>
```

toggleで消えたり現れたりを繰り返す
`<script>
$(function() {
  $('#box').toggle(800);
  $('#box').toggle(800);
  $('#box').toggle(800);
  $('#box').toggle(800);
});
</script>`

第2引数に関数を持つことができる
→コールバック関数
`<script>
$(function() {
  $('#box').fadeOut(800, function() {
    alert("gone!");
  });
});
</script>`
※fadeOutの処理後に行われる

## イベントを使う

* click
* mouseover, mouseout, mousemove

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <div id="box" style="width:100px;height:100px;background:red;"></div>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          $('#box').click(function() {
            alert("hi!");
            }); 
          $('#box')
            .mouseover(function() {
              $(this).css('background', 'green'); //最初は#boxをthisで表せる
            })
            .mouseout(function() {
              $(this).css('background', 'red');
            })
            .mousemove(function(e) { //引数にイベントオブジェクトを追加
              $(this).text(e.pageX); //マウスのx座標を表示する
            });
        });
     </script>
  </body>
</html>
```
※イベントオブジェクト→jQuary API Documentation

## focus,blur,change
フォームで使えるメソッド

* focus, blur （フォーカスしたとき、フォーカスをはずしたとき）
* change（値が変わったとき）

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <input type="text" id="name">
     <select id="members" name="members">
       <option>taguchi</option>
       <option>fkoji</option>
       <option>dotinstall</option>
     </select>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {
          $('#name')
          .focus(function() {
            $(this).css('background', 'red');
            })
          .blur(function() {
            $(this).css('background', 'white');
            })
          $('#members').change(function() {  //よくセレクトボックスと一緒に使われる
            alert('changed!'); //他には、次のセレクトボックスを表示するなど
            });
          });
     </script>
  </body>
</html>
```

## onメソッド
動的に作られた要素にイベントを設定する

ボタンを押すごとに前に文字を挿入する

```lang:html
<!DOCTYPE html>
<html lang="ja">
  <head>
      <meta charset="utf-8">
      <title>jQueryの練習</title>
      <style>
      </style>
  </head>
  <body>
     <p>jQueryの練習</p>
     <button>Add!</button>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
     <script>
      $(function() {

          $('button').click(function() { // クリックされたとき
            var p = $('<p>').text('vanish!').addClass('vanish'); // 新しくpを作る
            $(this).before(p); // buttonの前に
            });

         });
     </script>
  </body>
</html>
```

挿入された文字をクリックするたびに消したい
`$('.vanish').click(function() {
  $(this).remove();
});`
では消えない！
→ドキュメントが読み込まれた時点ではclass vanishは存在していないから

→読み込まれた時に存在していない動的に作られた要素に対してイベントをつけるには<b>onメソッド</b>を使う
`$('body').on('click', '.vanish', function() {
  $(this).remove();
});`