jQueyの基本　〜いじる要素を実際にいじる(処理/取得/書き換え/要素の追加)〜


爆速でマスターするため、専門的なことはハショってます！
はい！覚え書きです！

# 要素をいじってみる

いじるにはメソッドを使います。

#メソッドとは？
オブジェクトを操作する関数、命令文のことです。


# メソッドチェーンとは？
複数処理を同時に行えます。その書き方のことをメソッドチェーンと言います。
ドットシンタックスでいくらでも要素にメソッド（処理）を追加できます。
なお、先頭から順番に処理されていきます。

```
//htmlひな形サンプル

  <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="vhttp://dotinstall.com">Dotinstall</a></p>
  
```
```
//scriptサンプル
$('a[href*="com"]').css('color', 'white').css('background-color', 'blue');
```

# 「処理」と「取得」

上記cssメソッドを例に取って解説してみますー

```
//★処理のサンプル
	//cssメソッドで要素に文字色と背景色をメソッドチェーンでもって連結して同時に追加してる
	$('a[href*="com"]').css('color', 'white').css('background-color', 'blue');
```

```
//★取得のサンプル
	//cssメソッドで、値を指定しないと、メソッドに応じて要素の状態を取得できる。
	$status = $('a[href*="com"]').css('color');

//コンソールに書き出し
	console.log($status);
```

初めはメソッドで
値を指定してやれば書き換えたりする処理ができて、
値を指定しなければ状態が取得できるって感じに気づけると
ファーストステップが巧く踏み出せそうです。

# 新しく要素を追加する

```
//こんなhtmlがあったとして
  <ul>
    <li>0</li>
    <li>1</li>
    <li>2</li>
  </ul>

```
```
// jQuery部分はこうだったり

　// $(document).ready(function (){
  $(function () {

    //指定したものより前に、新しく要素を追加する①
    $('ul > li:eq(1)').before('<li>before追加</li>');

    //指定したものより前に、新しく要素を追加する②
    var $hoge = $('<p>').text('insertBefore追加');
        $hoge.insertBefore('ul');

    //指定したものより後に、新しく要素を追加する①
    $('ul > li:eq(1)').after('<li>after追加</li>');

    //指定したものより後に、新しく要素を追加する②
    var $hoge = $('<p>').text('insertAfter追加');
        $hoge.insertAfter('ul');
  });
```
```
//　こんなのだったり

    //prepend() ある子要素の先頭に要素を追加する①
    var $hoge = $('<li>').text('prepend()追加');
    $('ul').prepend($hoge);

    //prependTo() ある子要素の先頭に要素を追加する②
    var $hoge = $('<li>').text('prependTo()追加');
        $hoge.prependTo('ul');

    //append() ある子要素の末尾に要素を追加する①
    var $hoge = $('<li>').text('append()追加');
    $('ul').append($hoge);

    //appendTo() ある子要素の末尾に要素を追加する②
    var $hoge = $('<li>').text('appendTo()追加');
        $hoge.appendTo('ul');
```

よくある指定だそうです。
覚えておくとよさそうです。

# 取得、書き換えメソッド


## addClass()とremoveClass()

```
    // classをつけるメソッド
      $('p:first(), p:last()').addClass('myStyle');

    // classを消すメソッド
      $('p:last()').removeClass('myStyle');
```

## attr()とdata()
```
//attr()

      //取得してみよう
        var $joutai_shutoku = $('p:eq(1) > a').attr('href');
        console.log($joutai_shutoku);

      //書き換えてみよう
       var $joutai_shutoku2;
        $('p:eq(2) > a').attr('href', 'http://yahooooooooooooo.com'); //書き換え
        $joutai_shutoku2 = $('p:eq(2) > a').attr('href'); //書き換えたやつを取得
        console.log($joutai_shutoku2);
```
```
// data()
    // data() htmlの属性としては必要ないけど、アプリケーションで使う都合上、名前をつけときたい時に使用
      //取得してみよう
        console.log($('p:eq(1) > a').data('sitename'));

```

## text()とhtml()

```
    //text() 要素で囲まれた文字列の取得
    console.log($('p:eq(1)').text());

    //text() 要素で囲まれた文字列の書き換え
    $('p:eq(1)').text('just changed!!');
    
    //text() 要素で囲まれた文字列の追加
    	var $hoge = $('<p>').text('insertBefore追加');
        $hoge.insertBefore('ul');
    
```

```
    //html() html要素を含んだ取得
    console.log($('p:eq(1)').html());
    
    //html() html要素を含んだ書き換え
    $('p:eq(1)').html('<span>hoge</span>');
```

## val() 

```
    //val() フォームの部品にあるvalueの値を取得
    console.log($('form input').val());

    //val() フォームの部品にあるvalueの値を書き換え
    $('form input').val('書き換えました！');
```


## empty()とremove()
```
    //empty()　タグでか囲まれた文字列を消し去りたいとき！
    $('p:first').empty();

    //remove()　html要素ごと消し去りたいとき！
    $('p:eq(2)').remove();
```