勉強備忘録：ドットインストールjQuery入門

１．基本文法

・bodyの終わりの直前で読み込む。読み込んでからスクリプト書く。
・全体を$(function(){})で囲う。
・$('セレクタ').メソッドで記載する。メソッドはつなげることができる。
　（メソッドチェーン）
　セレクタは、Javascript同様に"で囲ってもよい。
・コールバック関数→関数の引数として呼び出された関数。
　非同期処理の中で、決まった順序で処理を実行したい
　関数を渡す形にすることで、非同期処理を実行した後の処理の内容を
　自由に決めたい
　を理由に、jacascriptでは、使用される。
　setTimeout(関数,時間)の関数もコールバック関数といえるが、
　本当はもっと複雑であり、使う場合はもっと調べる必要あり。

２．要素を取得する

・eq()→インデックス番号を指定することで特定の要素だけを取得
　$('#sub > li'）.eq(2)
　セレクタに関数を含む場合は、以下のように記載。
　$('#sub > li:eq(2)')
　その他要素を取得する関数。
　gt()→指定したインデックスより大きい要素を取得
　lt()→指定したインデックスより小さい要素を取得
　even→偶数の要素を取得
　add→奇数の要素を取得。
　first→最初の要素を取得。
　last→最後の要素を取得。
　contains()→特定の文字列が含まれる要素を指定。
・要素同士の関係で指定する。
　parent(),children(),next(),prev(),sblings()
・属性を使って指定する。
　$('要素[属性="値"]')
　$('a[href="URL"]')
　 !=→一致しない　 *=→部分一致 ^=→前方一致 $=→後方一致
・attr html属性の取得
　→対象要素.attr( 属性, （変更する値） )
・data htmlカスタムデータ属性を取得
　→対象要素.data( 属性名, 値 )

３．関数

・addclass(クラス名)
　任意の要素にclass属性を追加する。
・removeclass(クラス名)
　任意の要素からclass属性を削除する。
・text()→テキストの取得・追加・変更。
・html()→htmlの取得・追加・変更。
・value()→value値の取得・追加・変更。
・empty→要素を空にする。
・remove→要素を削除する。
・それぞれの文法要注意。　
　before,insertBefore
　after,insertAfter
　prepend,prependTo
　append,appendTo　
・エフェクト系メソッド
　hide,show,fadeOut, fadeIn, toggle

　$('#box').fadeOut(800,function(){
　	alert("gone");
　});

４．イベント

・click,mouseover,mouseout,mousemove
・focus,blue,change
・on→ドキュメントが読み込まれた時点で、存在していない動的に
　つくられた要素にイベントをつける。
　$('body').on('イベント','要素指定',関数)

５．Ajax

・Ajax→Asynchronous JavaScript + XML
　JavaScriptとXMLを使って非同期にサーバとの間の通信を行うこと。
　XMLHttpRequesを使用する。
・非同期通信→ページ内でJSで通信、ページリロードしない。
　処理が終わる前に次の処理にうつる。
　loadが完了していなくても次の処理を見つける。
・JSON→JavaScript Object Notation
・load()→HTMLの任意の箇所へサーバーから取得したファイルの中身を
　出力できる。第二引数に関数（コールバック関数）を指定すると、
　読み込みが終わった後に、処理が実行される。

　$('#button').click(function(){
　　$('#result').load('more.html',function(){
　　　処理　
　　});
　});

・get()→サーバーからデータを取得する。
　greet.phpに、nameを渡して、resultに結果を表示する。
　取得した値を関数の引数に指定して使用できる。

　$('#greet').click(function(){
　　$.get('greet.php',{
　　　　name: $('#name').val()
　　　},function(data){
　　　$('#result').html(data);
　　　処理　
　　});
　});

・post()→ブラウザ側からサーバーへデータを送信する

６．その他

・buttonタグ→inputタグのtype属性buttonと異なり、子要素を持てるため、
　内側に好きなだけかけるので、CSSでカスタマイズしやすい。
　::beforeや::afterなどの擬似要素が使用できる
・vagrant→VirtualBoxなどを利用した仮想環境を作るソフト。

７．感想

・addclass（〇〇）は、classlist.add(〇〇)でもいいのでは思ったり？
　簡単に書けたほうが（jquery）楽かなと思ったり。
・非同期通信が使えて、初めてjavascriptのスタートラインに立てるん
　だろうなと思った。
・Ajaxは、jqueryを使うのが楽そう。