macoril's diary

へたれプログラマーのリハビリな日々

jQueryを使うことになったからjQueryについて調べた

jQuery JavaScript

どうでもいい話 〜きっかけになったこと〜

先日HTML5+JavaScriptなフロントサイドお願いしたい、と言うお仕事いただいて、おいおい経験ないよ、と思いながらも、モックが必要な期日が迫っているとかで猫の手も借りたいみたいな感じのようだったので、モックの一部の画面の作成を勉強を兼ねて引き受けた。

まず作業着手初日。
引き受けた時点ではAugularJSを使うかも、ということだったのでその調査。あとそもそもこれまではサーバサイドをPHPやPerlでいじるばかりで、フロントサイドもHTML5もJavaScriptもちょっとした修正くらいの経験しかないので、それら全般の調査に充てた。 あと既存コードの確認もしたけど、これは中身が全然なかったので本当にちょっとだけ。

そして二日目。
最新のファイルが送られてきて、確認したら、ディレクトリやファイル名が事前に共有されていたものからまるっと変わっていて面食らったのだけど開いてみて更にビックリ。

「なにこれ、モック出来上がってんじゃん」

これは一体どうしたことか。私の仕事はどこへ行ってしまったのか。根本的に担当内容の認識が違っていたとでもいうのか？だとしたら凄いヤバい事態もありうるじゃん…
頭の中を飛び交いまくるはてなマークと鳴り響くアラート。

先方に確認したら、CSSを依頼した会社が作ってくれたとのことで、共有してなかったけど足りない機能があるからそこをやって欲しいとのことだった。足りない機能と言っても、大した内容ではなくて、ここまでやった人にちょろっと変更して貰えば済むようなこと。ここで私に引き継いだら、既存コードの調査から入ることになるし凄い非効率なのになぁ…

なにはともあれ、その会社が用意してくれたコードがjQuery使いまくりなので、jQueryの概要を急遽かけあしでさらうことになったのです。

jQueryとは

  • 2006年1月生まれ
  • JavaScriptを便利に使うための軽量なライブラリ

1系と2系

  • 基本的な機能は同じだが、2系はIE6,7,8をサポートしない*1

使い方

  • ダウンロードして使う または ホストされているスクリプトをscriptタグで読み込んで使う
  • スクリプトを書く場合にはjQueryを読んだあと
  • 「$(document).ready( function() {...} );」は省略記法で「$(function() {...} );」と書ける
  • 処理の対象となるDOM要素をしているする「セレクタ」と、行いたい処理「メソッド」
  • メソッドは複数繋げることができて、メソッドチェーンという

以下はホストされているスクリプトを読み込んで使う例

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>はじめてのjQuery</title>
</head>
<body>
  <p>とりあえず使ってみよう</p>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script>
    //この部分は次のように省略記法でシンプルに書ける
    //$(document).ready( function() {
    $(function() {
      // p がセレクタ、処理は .css('color', 'blue')
      // 「p要素の文字色を青色に」ということ
      // .hide('slow') 「ゆっくり消す」など別の処理を繋げて書くことができる
      $('p').css('color', 'blue');
      $('p').css('color', 'blue').hide('slow');
      // cssメソッドで色を指定すると変更する処理になるが、
      // 指定しないと現在の文字色の取得になる
      console.log($('p').css('color'));
    });
  </script>
</body>
</html>

要素の指定

セレクタによる指定
  • html要素: そのまま
  • id: #hoge
  • class: .piyo
  • 直下の子要素: >
  • それ以下の要素: 半角スペース
  • 複数の要素: ,
  • 隣接する要素: +
$(function() {
  // id='hoge' の要素直下の class='piyo' の要素
  $('#hoge > .piyo').css('color', 'green');
  // id='hoge' の要素以下（直下に限らない）の class='piyo' の要素
  $('#hoge .piyo').css('color', 'yellow');
  // li 要素と id='foo' の要素 と class='bar' の要素全部
  $('li, #foo, .bar').css('color', 'red');
  // id='foo' の要素の次の class='piyo'
  $('#foo + .piyo').css('color', 'blue');
});
フィルタによる指定
  • フィルタの指定で使う数字は0スタートなので、見た目の表示と1つズレることに注意
$(function() {
  // id='hoge' の要素直下の4番目の class='piyo' の要素
  $('#hoge > .piyo:eq(3)').css('color', 'green');
  // id='hoge' の要素直下の4番目より大きい（5番目以降の） class='piyo' の要素
  $('#hoge > .piyo:eq(3)').css('color', 'green');
  // id='hoge' の要素直下の奇数番目の class='piyo' の要素（ :odd は偶数）
  $('#hoge > .piyo:even').css('color', 'green');
  // id='hoge' の要素直下の「test」と言う内容を含む class='piyo' の要素（ :odd は偶数）
  $("#hoge > .piyo:contains('test')").css('color', 'green');
});
メソッドによる指定
  • 親要素: .parent()
  • 子要素: .children()
  • 兄弟（並列）の要素: .siblings()
  • 次の要素: .next()
  • 前の要素: .prev()
$(function() {
  // id='hoge' の要素直下の4番目の class='piyo' の要素の次の要素
  $('#hoge > .piyo:eq(3)').next().css('color', 'green');
});
属性セレクタによる指定

大括弧（'[' と ']'）を使って指定する 例: $('a[href="http://jquery.com"']').css('color', 'blue');

  • a要素のhoge属性がpiyoと等しい: a[hoge="piyo"]
  • a要素のhoge属性がpiyoと等しくない: a[hoge!="piyo"]
  • a要素のhoge属性がpiyoを含む: a[hoge*="piyo"]
  • a要素のhoge属性がpiyoから始まる（前方一致）: a[hoge^="piyo"]
  • a要素のhoge属性がpiyoで終わる（後方一致）: a[hoge$="piyo"]

HTML属性やカスタム属性の値の操作

HTML属性の場合
  • 取得: .attr('attribute_name')
  • 設定: .attr('attribute_name', 'new_value')
カスタム属性の場合

HTML5では data-custom_attr_name='value' の形でカスタム属性が設定できる

  • 取得: .data('custom_attr_name')
  • 設定: .data('custom_attr_name', 'new_value')

ただし、dataメソッドの取得と設定はjQuery内のキャッシュが対象であり、attrメソッドと挙動が違うので注意が必要*2

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>はじめてのjQuery</title>
</head>
<body>
  <a href="http://jquery.com" >とりあえずjQuery使ってみよう</a>
  <a href="http://google.com" data-test='hoge'>とりあえずググってみよう</a>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script>
    $(function() {
      // コンソールに「http://jquery.com」と表示される
      console.log($('a').attr('href'));
      // コンソールに「http://google.com」と表示される
      console.log($('a').next().attr('href'));
      console.log($('a:eq(1)').attr('href'));

      // 「とりあえずググってみよう」のhrefがyahooに変わる
      $('a:eq(1)').attr('href', 'http://yahoo.co.jp');

      // コンソールに「undefined」と表示される
      console.log($('a').data('test'));
      // コンソールに「hoge」と表示される
      console.log($('a').next().data('test'));


      console.log($('a').next().data('test', 'piyo'));
    });
  </script>
</body>
</html>

タグの中身の操作

  • テキストを設定: .text('new text')
  • HTMLタグを含むテキストを設定: .html('<a href="http://jquery.com">jQuery</a>')
  • inputタグのvalue属性を取得: .val()
  • inputタグのvalue属性を設定: .val('new value')
  • タグの中身の消去: .empty()
  • タグ自体の消去: .remove()

スタイルの適用と外し方

  • 適用: $('#hoge > .piyo').addClass('css_class_name');
  • 外す: $('#hoge > .piyo').removeClass('css_class_name');

要素の追加

不等号記号（ '<' と '>' ）で囲うと新しい要素を作成できる

  • 特定の要素の前に追加: .before(newElement) newElement.insertBefore(targetElement) とも書ける
  • 特定の要素の後ろに追加: .after(newElement) newElement.insertAfter(targetElement) とも書ける
  • 要素の先頭に追加: .prepend(newElement) newElement.prependTo(targetElement) とも書ける
  • 要素の最後尾に追加: .append(newElement) newElement.appendTo(targetElement) とも書ける

insertHoge や piyoTo のほうが英文ライクに読みやすい並びになって好みかも

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>はじめてのjQuery</title>
</head>
<body>
  <!-- ここに追加される <a href="test">新しいリンク</a> -->
  <a href="http://jquery.com">とりあえずjQuery使ってみよう</a>
  <!-- ここに追加される <a href="test">新しいリンク</a> -->
  <a href="http://google.com" data-test='hoge'>とりあえずググってみよう</a>
  <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
  <script>
    $(function() {
      var new_a = $('<a>').text('新しいリンク').attr('href', 'test');
      $('a').before(new_a);
    });
  </script>
</body>
</html>

要素を隠したり表示したりするエフェクトメソッド

  • 隠す: .hide()
  • 表示する: .show()
  • 徐々に隠す: .fadeOut()
  • 徐々に表示する: .fadeIn()
  • 表示⇔隠す: .toggle()

.hide(slow) や .show(500) （ミリ秒で指定）などが可能

クリックやマウスオーバーといったイベント

TODO: ドットインストール #13再確認してサンプル作成

フォームに関するイベント

TODO: ドットインストール #14再確認してサンプル作成

onメソッドの使い方（動的に操作する手段）

TODO: ドットインストール #15再確認してサンプル作成

ajax

ajaxとは
  • Asynchronous JavaScript + XML の略 TODO: ドットインストール #16,17,18再確認してサンプル作成

コールバック関数により、処理の順序を規定する（aのあとbを実行したいときに同時に処理されてaの完了より先にbが実行されないようにする）

TODO: getJSONについて調べる

20 JSONの扱い

*1:”jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7, or 8. All the notes in the jQuery 1.9 Upgrade Guide apply here as well. Since IE 8 is still relatively common, we recommend using the 1.x version unless you are certain no IE 6/7/8 users are visiting the site. Please read the 2.0 release notes carefully” - Download jQuery | jQuery

*2:jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件 - Qiitaがわかりやすい