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();