Progate jQuery - kino-3’s blog

jQuery 初級編

jQuery は JavaScript の構文で書く。
例: $('h1').hide();
構成:
- jQueryオブジェクトを作成する。
  - CSS のセレクタを利用
- そのjQueryオブジェクトに対してメソッドを呼び出す(jQueryのメソッドはjQueryオブジェクトでしか利用できない)

<head>
  <link rel="stylesheet" type="text/css" href="stylesheet.css">
  <!-- jQueryライブラリの読み込み。ライブラリはインターネット経由で読み込むのが一般的 -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
  <h1>Hello, World</h1>
  <!-- jQuery ファイルである script.js の読み込み
  </body>の直前に書くことで、WEBページの表示速度を速くできる -->
  <script src="script.js"></script>
</body>

// ./script.js
$(function() {
  $("h1").hide(); // h1 の要素を隠す
});

id と class

HTMLのタグに名前を付ける方法として、class の他に id がある。classとの違いは 1つのページ内で同じid名を複数回使えないこと。よって, id のほうが jQueryの処理が高速であり, jQuery のセレクタとしては極力 id を使うべき。
class のセレクタは .hoge
id のセレクタは #hoge

メソッド

.fadeOut(): フェードアウトする。引数にミリ秒を指定してその時間を指定可能。
.slideUp(): 下から上に消えていく。fadeOut に近い仕様。
.show() : CSS で display: none; された要素を表示
.fadeIn() : 表示
.slideDowm() : 表示
.css("color", "red") : color プロパティを red に(変更)する
- .css('display', 'none') と, .hide() は等価
.text("文字列") : 開始タグと終了タグの間の内容を引数の文字列にする
.html('<a href="/index">Hoge</a>') : 開始タグと終了タグの間の内容を引数のHTMLにする。クォーテーションに注意。
.find("セレクタ"): すべての子孫要素(自分よりも下の階層の要素すべて)の中から、指定したセレクタを持つ要素を(さらに後ろにつけたメソッドの)対象とする。
.children(): findの子要素のみ(孫は含まない)バージョン
イベント
$('セレクタ').イベント名(function(){ }); : イベント発生時の処理
- メソッドとの違いは, 引数が function かただの変数か ?

$(function() {
  $("#hide-text").click(function(){ // #hide-text 要素をクリックしたとき
    $("#text").slideUp(); // #text 要素を slideUp する
  });  // なお, #hide-text と #text の位置関係は不問
});

イベント内の function における $(this) はイベント要素とおなじ要素(セレクタではない)

$(function() {
  $("li").click(function(){ // 複数の li 要素があるときでも
    $(this).slideUp(); // 「クリックした」 li 要素だけが対象となる
    $("li").css("color", "red"); // これは全てのliが対象になる
  });
});

hoger イベント

$("セレクタ").hover(
  function(){
    // マウスを乗せた時の処理(乗せた後ずっと有効)
  }, (function(){
    // マウスを外した時の処理(外した後ずっと有効)
  })
);

変数

var $div = $("div"); // 変数名は慣例で先頭に $ を付ける

メソッドチェーン

$("h1").css("font-size", "20px").text("hoge"); // 同じ要素に複数メソッドを適用

jQuery 中級編

これまでの延長

jQuery は HTML の中身を操作するため、HTMLの読み込みが完了してから操作を開始する。そのため、ready イベントを使用して $(document).ready(); の中身に処理を書く。この構文の省略形が $();
モーダル: clickイベントなどに基づいて、表示/非表示が行われる要素。
- モーダルを開く
  1. モーダルを作成して, CSSで非表示(display:none;)にする
  2. 開くボタンに jQuery でクリックイベントを設置して　fadeIn 等でモーダルを表示させる。
- モーダルを閉じる
  1. モーダル内に閉じるボタンを置いて, クリックイベントを設置して, fadeOut 等でモーダルを閉じる。
複数のセレクタに対して同じcssの{}を適用する場合は, セレクタをカンマで区切る。
hover時のみ表示する
- デフォルトを display:none; にする
- .hovering { display:none; } をCSSに追加する。
- hover イベントの最初の関数で $("セレクタ").addClass("hovering") とする。($(this).find("text").addClass("hovering"))
  - addClass: 指定した要素にクラスを追加
- hover イベントの2つ目の関数で $("セレクタ").removeClass("hovering") とする。
  if文

 $(".faq-list-item").click(function(){
    var $answer = $(this).find(".answer")
    if ($answer.hasClass("open")){ // if (条件式) {}
      $answer.removeClass("open");
      // クリックした要素が open クラスを持っていれば外す
    } else {
      $answer.addClass("open");
      // 持っていなければ与える
    }
  })

条件式になりうるメソッド
- hasClass("クラス名") メソッド: オブジェクトがそのクラスを持っていればtrue, 持っていなければfalseを返す。
- js 的な条件式

jQuery 上級編

要素のindex

eqメソッド: $('li').eq(2) で, $('li') のうち, インデックス番号が 2 すなわち, 3番目の li 要素を示す。
indexメソッド: $('li').index($('.active')) で. li 要素のうち, .active でもあるもののインデックス番号を返す。つまり, $('li').index($(this)) で li のうち現在対象となっているもののインデックス番号が分かる。この番号は変数(この変数はただの整数なので先頭に$をつけない)などに格納して使用するのがよい。
prevメソッド: jQueryオブジェクトの兄弟要素（同じ階層の要素）の中から1つ前の要素を返す。(一つ後は next メソッド)

<ul>
  <li>1</li> <!-- これは $('.selected').prev() -->
  <li class="selected">2</li> <!-- これは $('.selected') かつ $('li').eq(1) すなわち, $('li').index($('.selected')) は 1 である。-->
  <li>3</li> <!-- これは $('.selected').next() -->
</ul>

lengthメソッド: $('li').length で li の要素数を返す。length の後ろに括弧はつけない。

関数

js と同じ

値のget, set

textメソッド: (html, css など, 引数をセットするメソッドは大抵同様)
- $("h1").text("hoge"); : 引数に指定した文字列を(<h1></h1>の間)にセットする(前述)
- var txt = $("h1").text(); : 引数を与えないと, 要素の持つ文字列を取得して返す。
attrメソッド:
- $("h1").attr("id", "title");: 引数2つのときは id="title" という属性をセットする
- var url = $("img").attr("src"); : 引数1つのときはその属性名の属性値を取得して返す
valメソッド:
- var value = $("input").val();: input に入力されている値を返す
- 引数を与えれば, デフォルトで値を指定できる。
- 多分 value 属性の値を返すやつ
submitイベント

$(function() {
  // 送信ボタンがクリックされたとき, Enter キーでフォームが送信されたときにイベントが発生
  $("#form").submit(function(){
    var textValue = $("#text-form").val();
    $("#output-text").text(textValue);
    return false;
  })  
});

選択肢式のセレクトボックス

<!-- $("#select-form").val() で male または female の選択されているほうを取得できる -->
<select id="select-form" class="select-form">
  <option value="male">男性</option>
  <!-- val("male") のようなデフォルト値指定は select でも有効-->
  <option value="female">女性</option>
</select>

カスタムデータ属性: html ではdata-から始まる属性名を自由に使用可能。
animation メソッドは hover 等の関数として使う。

$(this).animate({
  "font-size":"30px"
},300); // 300 ミリ秒のアニメーション。時間は 'slow'や'fast'といった文字列で指定することもできる。

ページ内リンク

<!-- 方法1: html の href による実装 -->
<a href="#hoge">idがhogeである要素に飛ぶ</a>
<!-- #hoge は id が hoge である要素のセレクタ -->

// jQuery による実装1
$('html, body').scrollTop(500); // ページ最上部から 500 pxの位置に移動

// jQuery による実装2
$('html, body').animate({
  'scrollTop': 500
}, 1000); // 上の 1000ミリ秒での移動 ver.

offsetメソッド: 要素の表示位置(ページの上端からの距離とページの左端からの距離)がピクセル単位で連想配列の形で返される。

var offset = $("h1").offset(); // -> {top:240,left:100}
// h1の位置に移動
$('html, body').scrollTop($("h1").offset().top);

jQuery 初級編

id と class

メソッド

イベント

変数

メソッドチェーン

jQuery 中級編

これまでの延長

if文

jQuery 上級編

要素のindex

関数

値のget, set