jQuery入門したのでメモ

最近jQueryをよく使うようになったのでまとめる
とりあえず良く使いそうな使い方を想定してざっくり理解

何がイケてるのか

javascriptに比べると、記述が直感的で楽に書ける

見たand役立った

https://dotinstall.com/lessons/basic_javascript_v2
基本の文法をざっと見た

https://dotinstall.com/lessons/basic_jquery_v2
ざっくりと雰囲気を理解した

同じカテゴリの画像は1ファイルにまとめて、background-position で表示を制御 | hijiriworld Web
具体的な書き方がわかったのでありがたい

About jQuery | jQuery Learning Center
最初からEffectsまで読んだ
Ajaxも余裕出てきたら読む

基本の書き方

$(function() {
  $(selector).method(function() {
    $(selector).method();
  });
});

先頭で処理を囲う理由は2つ

• ページが全て読み込まれてから実行したい
• 関数内に閉じ込めて他の変数や関数とのコンフリクトを避ける

セレクター

$(selector);
指定した箇所のjQueryオブジェクトを返す
以下、新しく知ったものをメモ

// 子要素指定
$( "#contents > ul" );
// 子孫要素指定
$( "#contents ul" );
// 属性指定
$( "input[name='first_name']" );
// formのタイプ指定 
$( "form:button" )

メソッド

4種類に分けられる(ajaxは学んでないので除外)

• each
• on / one
• セレクター
• 値の処理(属性やタグ内テキスト等)

each

foreach
callback関数にて処理を書く

$("ul").each(function(){
    処理
});

JSのforeachのようにbreakやcontinueは使えない
替わりにreturn falseとreturn trueを使う

on

ユーザーのアクションで発火するメソッド
callback関数にて処理を書く

• よく使いそうなイベント
  • change
  • click

$("body").on(イベント, function(){
    処理
});

セレクター

jQueryオブジェクトに対してセレクター検索して、jQueryオブジェクトを返す
callback関数内にて使う

• よく使いそう
  • find()
  • parent()
  • children()

callback関数内の$(this)とターゲットが異なる場合、再度document全体からセレクター指定するよりも良さそう
ただ、多用するなら書き方変えるほうが良さそう

値の処理

セレクターに対して処理をする
単一で指定しないと狙ったところに処理できないので注意

• よく使いそう
  • show() / hide()
  • addClass() /removeClass()
  • attr() / removeAttr()
  • data() / removeData()
  • val()
  • css()
  • text()