【jQuery~書き方と各メソッド~】勉強メモ①

jQueryについて学習中。
2015年、JavaScriptの使用が大きく改定され、JavaScriptでも
効率的にコードが書けるようなってから、余り使われなくなってという事だが、
それでも、jQueryで書かれているコードが多くあるとの事なので知識として知っておこうと思う。
ほぼ自分の勉強メモです。
過度な期待はしないでください。

jQuery

• jQueryとは
  　
  JavaScriptでできることを、より簡単な記法で実現できように設計されたJavaScriptライブラリ。
  2006年にリリースされ、JavaScriptライブラリのデファクトスタンダードであると言われている。
  特にjQueryは初心者にやさしい、とても有用なJavaScriptライブラリである。
  　
  ライブラリとは、汎用性の高い複数のプログラムを再利用可能な形でひとまとまりにしたものである。
  つまり、ライブラリを使えば、プログラムを一から作り直さなくても良く、手間なく早くプログラムが書けるという事。

• jQueryの特徴
  　
  -ブラウザの違いを意識せずに済む
  -HTMLのDOM操作が簡単にできる
  -Ajax処理が簡単に記述できる
  　
  などがあげられます。

• jQueryで、出来ないこと
  　
  -変数に格納した数値同士の足し算
  -配列データの操作
  -オブジェクト型データの操作
  -JavaScript内のループ処理

• JavaScriptとjQueryの違い
  　
  -プログラムの書き方の違い
  JavaScriptでもひとつのコードを書くにしても書き方は複数ある。書く人によって書き方が変わるが、　
  jQueryの場合、書き方がシンプルな為、誰が書いてもほぼ同じようなコードになる。なので、初心者にやさしいと
  言われている
  　
  -クロスブラウザの対応の違い
  jQueryの特徴の所でもあげたが、jQueryはどのブラウザにでも対応している。Googlecharm、
  Safari、InternetExplorer、どのブラウザでも意識せずにコードを書くことが出来る。
  代わって、JavaScriptではブラウザ事にテストをして動作の確認を行う必要がある。それに伴い、コードも
  各ブラウザ事に書き換えなくてはならない。
  　
  -実行速度の違い
  jQueryは、先程でも言った通り、どのブラウザにも対応している分、実行速度がやや遅くなりがちである。
  裏で相互性を確認しているが為に速度が落ちてしまうのである。
  ネットに置いて、速度が遅くなるというのは、致命的なのでWEBサイトを作る場合が余りオススメ出来ない。

jQueryの書き方

　-jQueryの書き方(使い方)は、
　①jQueryオブジェクトを作成
　②そのjQueryオブジェクトに対してメソッド（機能）を呼び出す
　という2つの形が基本

書き方

$('セレクタ').メソッド（引数）;

　①jQueryオブジェクトの作成
　jQueryオブジェクトは、$('セレクタ')とするだけで作成出来る。
　セレクタにはHTMLのタグ名やclass名などを指定し、それに合致したHTMLの要素がjQueryオブジェクトになる。
　②メソッドを呼び出す
　jQueryのメソッドは、前述のjQueryオブジェクトでしか利用出来ない。
　メソッドを使うと、jQueryオブジェクトの内容（HTMLの要素）を変更したり、アニメーションをつけたり
　することが出来る。メソッドは$('セレクタ').メソッドというように、ドットに続けて呼び出す。
　jQueryのメソッドとプロパティの一覧はこちらを参照
　⇨　[jQuery] メソッド・プロパティ一覧

　下記にコード例を記載

HTML

<h1>Hello, jQuery</h1>

jQuery

// hideメソッドを用いて<h1>要素を隠す
$('h1').hide();

class/id

　-classとidをセレクタにするには、
　class名の前にはドット（.）、id名の前にはシャープ（#）を使用。
　idは同一ページに一箇所しか存在しないので、jQueryの処理が高速化されるので、
　jQueryオブジェクトのセレクタにはできるだけidを使用した方が良い。

　下記にコード例を記載

HTML

<h1 class='jQ' id='jQy'>Hello, JQuery</h1>

jQuery

// classをセレクタで用いる
$('.jQ').hide();

// idをセレクタで用いる
$('#jQy').hide();

メソッド

• fadeOutメソッド

　-fadeOutメソッドは、要素を隠す際に、アニメーションを付けることが出来る。
　後ろの( )内に引数として、アニメーションの速度を指定する。ミリ秒での指定や、文字列での指定が可能。
　例：１５００ミリ秒で1.5秒となる
　　　slowは、速度をゆっくりに指定

jQuery

// fadeOutメソッドを用いて要素を隠す
$('セレクタ').fadeOut();

// 引数でアニメーションの速度を調整
$('セレクタ').fadeOut(1500);

• slideUpメソッド

　-slideUpメソッドは、要素を隠す際に、上から下へスライドするアニメーションを付けることが出来る。

jQuery

// slideUpメソッドを用いて要素を隠す
$('セレクタ').slideUp();

// 引数でアニメーションの速度を調整
$('セレクタ').slideUp(1500);

• fadeInメソッド

　-fadeInメソッドは、要素を表示する際に、徐々に表示させるアニメーションを追加を付けることが出来る。

jQuery

// fadeInメソッドを用いて要素を隠す
$('セレクタ').fadeIn();

// 引数でアニメーションの速度を調整
$('セレクタ').fadeIn('slow');

• slideDownメソッド

　-slideDownメソッド、要素を表示する際に、上から下へスライドするアニメーションを付けることが出来る。

jQuery

// slideDownメソッドを用いて要素を隠す
$('セレクタ').slideDown();

// 引数でアニメーションの速度を調整
$('セレクタ').slideDown('slow');

• CSSメソッド

　-CSSメソッドは、CSSを変更できるメソッド。
　1つ目の引数にCSSのプロパティを、2つ目の引数にプロパティの値をいれる。
　colorやwidth、font-size、displayなどのプロパティすべてcssメソッドで変更することが出来る。
　書き方は、$('セレクタ').css('プロパティ', '値');のように記述する。

下記にコード例を記載

HTML

<div class="btn" id="change-css">CSSを変更</div>  
<h1 id="text">Hello, jQuery!</h1>

jQuery

$(function() {
  $("#change-css").click(function(){
    // CSSメソッドを使って、#textのフォントを変更する
    $("#text").css("color","blue");
    $("#text").css("font-size","70px");
  });
    
});

• textメソッド

　-textメソッドを使用することで、HTMLそのものを変更することが出来る。
　書き方は、$('セレクタ').text('書き換える文字列');のように記述する。

HTML

<h1>Hello, World!</h1>

jQuery

// textメソッドを使って、HTMLを変更する
$("h1").text('Hello, jQuery!');

• htmlメソッド

　-htmlメソッドを使用することで、要素の中身のHTMLを書き換えることが出来る。
　textメソッドと違い、htmlメソッドの引数は、単なる文字列ではなく、HTMLだということです。
　htmlメソッドなら、<span>タグがHTMLタグと認識され、ブラウザには文字列だけ表示される。

HTML

<h1>Hello, jQuery!</h1>

jQuery

// textメソッドを使って、HTMLを変更する
$("h1").text('<span>Hello, jQuery!</span>');

// htmlメソッドを使って、HTMLを変更する
$("h1").html('<span>Hello, jQuery!</span>');

出力結果

// textメソッド場合
<span>Hello, jQuery!</span>

// htmlメソッド場合
Hello, jQuery!

• findメソッド

　-findメソッドは、全ての子孫要素(自分よりも下の階層の要素すべて）の中から、指定したセレクタを持つ要素を取得する。

HTML

<div class="btn" id= 'find-method'>findメソッド</div>

  <div id="wrapper">
    <a href="#">リンク1</a>
    <div>
      <a href="#">リンク2</a>
    </div>
  </div>

jQuery

$(function() {
  $('#find-method').click(function() {
    // findメソッドで、「#wrapper」の一階層下にある全ての「a」要素を取得し、
    // cssメソッドでフォントを変更する
    $('#wrapper').find('a').css("color","blue");
    
  });
});

　これで、リンク１、リンク２とも色が青になる。

• childrenメソッド

　-childrenメソッドは、指定したセレクタが持つ子要素（一階層だけ下）の中から指定したセレクタに合致した要素を取得する。

HTML

<div class="btn" id= 'children-method'>findメソッド</div>

  <div id="wrapper">
    <a href="#">リンク1</a>
    <div>
      <a href="#">リンク2</a>
    </div>
  </div>

jQuery

$(function() {
  $('#children-method').click(function() {
    // childrenメソッドで、「#wrapper」の一階層下にある「a」要素を取得し、
    // cssメソッドでフォントを変更する
    $('#wrapper').children('a').css("color","blue");

  });
});

　これで、リンク１のみ色が青になる。

イベント

　-イベントを用いると、ある処理を行うタイミングを設定出来る。
　WEBページ内で、例えば、「ブラウザ上のボタンをクリックした」「要素に値が入力された」「要素の上にマウスカーソルを乗せた」などの動作がイベントに当たる。
　イベントの構文は、$('セレクタ').イベント名(function(){ });のように書く。

書き方

$('セレクタ').イベント名(function(){
  // 実行したい処理
});

　下記にコード例を記載

HTML

<div class="btn" id="hide-text">説明を隠す</div>
<h1 id="text">Hello, jQuery!</h1>

jQuery

$(function() {
  // 「#hide-text」要素に対するclickイベントを作成
  $("#hide-text").click(function(){
    $("#text").slideUp();
  });
  
});

• hoverイベント

　-hoverイベントは、$('セレクタ').hover(マウスをのせた時の処理, マウスをはずした時の処理);
　のように書く。clickイベントとは異なり、引数を2つ書くことに注意する。引数の間はコンマで区切る。

書き方

$('div').hover(
  function(){
    // マウスを載せた時の処理
  },
  function(){
    // マウスを外した時の処理
  }
);

　-こっちで詳しく
【jQuery~hoverイベント~】勉強メモ④

変数

　-jQueryで変数宣言にはvarを使用する。
　変数には文字列や数値、jQueryオブジェクトなどを格納することができますが、
　jQueryオブジェクトを格納する時は、わかりやすいように変数の頭に$を付けるのが慣例となっている。

書き方

var $div = $('div')
// 変数にjQueryオブジェクトを格納する場合は、変数の頭に$を付ける

// 変数を使って書き換え
$div.css('color','red');
$div.text('Hello, jQuery!');

メソッドチェーン

　-メソッドチェーンとは1つのjQueryオブジェクトに連続してメソッドが利用できる構文。
　$('セレクタ').メソッド().メソッド()...のように書くことで、それぞれのメソッドが適用される。

書き方

$('div').css('color','red').text('Hello, jQuery!');