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

1.基本文法

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

2.要素を取得する

・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( 属性名, 値 )

3.関数

・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");
 });

4.イベント

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

5.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()→ブラウザ側からサーバーへデータを送信する

6.その他

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

7.感想

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

この記事が参加している募集

この記事が気に入ったらサポートをしてみませんか?