jQueryの書き初め

HTMLの読み込みが終わった後にjQueryが実行されるように，以下のように記述する．実際のjQueryの処理はこの中に記述していく．

$(function(){
	//ここにjQueryの処理を書く
});

jQueryの基本形

//イベントの設定
$('セレクター').イベント(function(){
		
})

//メソッドの設定
$('セレクター').メソッド();

jQueryの処理は以下の３つの基本要素によって記述する．
・セレクター
操作するHTMLの要素を指定する．→　"何を"操作するのか
・イベント
jQueryによる操作するタイミングを指定する．→　"いつ"操作するのか
・メソッド
セレクタによって指定した要素に行う操作の内容を指定する．→ "どのような"操作するのか

イベントとメソッドはあらかじめ用意されているものを記述することで，使うことができる．
この３つの具体的な記述方法を以下にまとめる．

セレクター：要素の選択

操作するHTMLの要素は以下のように指定することができる．

// タグ名による要素の指定
$('tagName')

// idによる要素の指定
$('#elementID')

// クラスによる要素の指定
$('.elementClass')

HTML要素の特定にはタグ名・id名・クラス名が利用でき，セレクターの指定方法はCSSと同じである．

要素の選択を変数に格納

//変数に格納
const variable = $('selector');

variable.eventName(function(){
	//処理
});

jQueryでは選択した要素を変数に格納することができる．格納した変数に対して，イベントやメソッドを別に設定することも可能である．

イベント：タイミングの選択

要素にイベントを設定する方法は２つある．直接的にイベント設定する方法とonメソッドを利用してイベントを設定する方法である．

１．直接的にイベントを設定する方法

// イベントの追加
$('selector').eventName(function() {
  // イベントが発生したときの処理
});

２．onメソッドでイベントを設定する方法

// イベントの追加
$('selector').on('eventName', function() {
  // イベントが発生したときの処理
});

２つの設定方法の違いは以下に示す．
○直接的なイベント設定

簡潔な構文で記述することができる．
JavaScriptによって動的に追加された要素にはイベントが追加できない．

○onメソッドのイベント設定

要素に対して複数のイベントの設定ができる．
JavaScriptによって動的に追加された要素でもイベントを追加できる．

動的に追加した要素のイベント指定
子要素を持つ(と予想される)親要素にonメソッドを指定することで，子要素が追加されても，実質的に子要素にイベントを指定できるという仕組みとなる．
したがって，動的に追加した要素にイベント指定をするためには，セレクタに"追加される親要素"，onメソッドの第二引数に"追加される小要素"を指定する必要がある．

//例
$('parentElement').on('eventName','childElement',function(){
    //イベントの処理
});

イベントの削除
offメソッドを利用することで，付与したイベントの設定を削除することができる．

// イベントの削除
$('selector').off('eventName');

これは，イベントの設定方法に関わらずイベントの削除をすることができる．

メソッド：操作の設定

以下のように記述することで，要素に操作の設定をすることができる．

//　要素に行う操作の指定
$('selector').methodName("parameters");

メソッドには指定したCSSを操作するものや，指定した要素を削除するものなど，たくさんのメソッドが用意されている．

メソッドチェーンとは

メソッドチェーンとは，同じ要素に対して複数の操作の指定を行うために，メソッドをチェーン(鎖)のように繋いで記述する方法である．

$('selecotor').method1().method2().method3();

１つの要素に対してピリオド.で繋ぐことで複数のメソッドを指定することができる．

メソッド一覧

jQueryには数多くのメソッドが用意されている．以下のように分類されるが，それぞれ別の記事にまとめる．

HTML系メソッド
HTMLに関する操作を指定するメソッド

CSS系メソッド
要素のCSSに関する操作を指定するメソッド

属性系メソッド
要素の属性に関する操作を指定するメソッド

エフェクト系メソッド
要素にアニメーションなど，エフェクトを加えるためのメソッド

イベント系メソッド
要素の操作を「いつ」実行させるかを設定するためのメソッド

これらの記事には基本的なメソッドをまとめた．他にもまとめきれなかったものもあるため，必要に応じて調べる．