JavaScriptの勉強(2)

JavaScriptの便利なライブラリのjQueryについて勉強します。

 てっとり覚えたい人は、以下サイトの動画をみると、分かりやすいです。

http://dotinstall.com/lessons/basic_jquery_v2
http://dotinstall.com/lessons/basic_jquery_ui
http://dotinstall.com/lessons/basic_jquery_plugin


 ＜必要な知識＞
1) JavaScript
2) CSS
3) HTML

＜使い方＞
1) ダウンロードして、ダウンロードしたフォルダを指定する
2) ホストする
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
3)jQueryを読み込んだ 後にコードを記述する

＜学習する事＞
１、 セレクタ（処理対象となるDOM要素を指定する記法）
1) セレクタ要素
・HTML要素：p, h1, ul。例：$("p")
・id要素 : #をつける。例：$("#main")
・class要素 : .をつける。例：$(".item")

2) 要素の指定方法
　$("$main > .item") : $main要素内の.item要素を指定
　$("$main  .item")   : $main要素内の.item要素を指定（>でなく空白でも可能）
　$("p,  .item")      : 複数要素指定する場合は","を使用する
　$(".item + .item")  : itemの横にあるitemを使用する(隣接セレクタと呼ぶ)

3) フィルタ
 eq(), gt(), lth(), even, add, contains(),first,lastなどを使う
　　$("#sub > li:eq(2)") : id要素(sub)内のリスト要素（li)の2番目を選択する

4) 属性セレクタ
　HTML内にあるa要素 で、hrefで特定する場合
　例）$('a[href="http://google.com"]')

　"="で指定する場合以外に、"=","!="(異なる),"*="(含まれる),"^=" ,"$="(終わる文字指定）がある

２、 メソッド （処理）
1)使い方
　セレクタ.メソッドでjQueryはコードを作ります
　例）$('p').css('color','yellow'); // p要素の色を黄色にする
　　'p': セレクタ
　　css('color','yellow') : メソッド

2) DOM要素指定
　parent(), children() , next(), prev(), siblings()など
　siblingは兄弟要素を示し、同列にある要素を全て実行するのに使用します

3) css, addClass/removeClass
・メソッドチェーン(同時に二つ実行する)
　例）色と背景色を同時に変える
　　$('p').css('color','yellow').css('background','red');

  ※メソッドチェーンは、改行して、コード記載すると、分かりやすい！
　　$('p').css('color','yellow')
　　　　　.css('background','red');

・値の取得
　例）コンソールに色を表示
　　colsole.log($('p').css('color'));

・スタイルの設定
　　$('p').addClass('myStyle');

3) attar(属性取得設定),data(データ属性取得設定）

4) タグの中身を編集
　text, html, val, remove, emptyを使用する

5)要素の追加
　before(insertBefore), after(insertAfter), prepend(prependTo), append(appendTo)を使用する

 6) 要素のエフェクト
　hide, show, fadeOut, fadeIn, toggle(表示の場合は非表示、非表示の場合は表示)を使用する
　例）　0.8秒でid=box要素を 非表示にする
　　$('#box').hide(800);

7) イベントの追加
　click, mouseover, mousemoveなど
　例）　　　$('#box').click(funtion() { alert("Test"); } );

　※イベントオブジェクトを調べたい場合は、以下サイトを参照する
     http://api.jquery.com/category/events/event-object/

8) フォーム部品のイベント
 focus, blur(focusが外れた時), changeを使う

9) 動的に作られた要素に対しては、onメソッドを使う
   body内に動的に作られたクラス（item)に対して、クリック時に削除する処理(click=remove(） )を設定する
　$('body').on('click', '.item', function() { $(this).remove(); } );

３、その他
１）非同期の処理に注意する
非同期だと、サーバからのデータ取得前に次の処理を実行されてしまい、意図した処理にならない場合がある
　⇒Callback関数を使う（レスポンス後に、実行させる）

２）Ajaxの勉強
　load, $.get, $.postを使えるようにする

３）Jsonオブジェクトを使いこなす