基本

$('セレクタ').メソッド(パラメータ);

例：

$('p').css('color', 'red');

メソッドチェーン：メソッドをつなげて書いたもの（例：$('p').css('color', 'red').hide('slow');

セレクタ / フィルタ

セレクタ指定

$('#main')

$('.sub')

> + , ~ [] [=""] [!=""] [*=""] [^=""] [$=""]などが使用可能。

ここで得られるオブジェクトはjQuery独自のものである。

getElement...と同じオブジェクトを得るには、$("#foo").get(0);または$("#foo")[0];とする。

指定個目の要素

$('#main > li:eq(2)');

nは0から始まる。

最初 / 最後

$('#main > li:first');

$('#main > li:last');

nより大きい / 小さい

$('#main > li:gt(2)');

$('#main > li:lt(2)');

nは0から始まる。

偶数 / 奇数

$('#main > li:even');

$('#main > li:odd');

個数のカウントは0から始まるため、1個目の要素は偶数となる。

要素の内容に含まれている

$('#main > li:contains("foo")');

nは0から始まる。

メソッド - CSS / 属性

要素のCSSを取得 / 変更

CSSを取得：

$('#sub').css('color');

CSSを変更：

$('#sub').css('color', 'red');

CSSを変更（複数）：

$('#sub').css({'color': 'red', 'text-decoration': 'none' });

幅を取得 / 変更

幅を取得：

$('#sub').width();    // 150

幅を変更：

$('#sub').width(150);

$('#sub').width('150px');

$('#sub').css('width');ではpx付きの数値が返される。

classを追加

$('#sub').addClass('nav');

スペースで区切って複数指定できる。

classを削除

$('#sub').removeClass('nav');

classの追加 / 削除を交互に行う

$('#sub').toggleClass('nav');

指定classがあるかどうか

if ($('p').hasClass('text'))

属性を取得 / 変更

属性を取得：

$('#sub').attr('href');    // foo.html

$('#sub').attr('checked');    // undefind / "checked"

属性を変更：

$('#sub').attr('href', 'foo.html');

$('#sub').attr('checked', 'checked');

プロパティを取得 / 変更

プロパティを取得：

$('#sub').prop('href');    // http://www.example.com/foo.html

$('#sub').prop('checked');    // false / true

プロパティを変更：

$('#sub').prop('href', 'foo.html');

$('#sub').prop('checked', true);

attrとpropの違い

要素のdata属性を取得

<div data-foo="bar"></div>

console.log($('a').data('foo'));

暗黙の型変換がされる（"007"→7）。

data属性を変更するときは、ネイティブのJavaScriptで行う。例：

var d = e.dataset.foo;

e.dataset.foo = 'hoge';

datasetはキャメルケース（data-dog-breed→ dogBreed）を使用する。

メソッド - 要素指定

親要素 / すべての子要素

$('#sub').parent();

$('#sub').children();

前 / 次の要素

$('#sub li:eq(2)').prev();

$('#sub li:eq(2)').next();

最初 / 最後の要素

$('#sub li').first();

$('#sub li').last();

指定要素以外の同階層の要素すべて

$('#sub li:eq(2)').siblings();

メソッド - DOM操作

タグの中身を取得 / 変更

$('p').text();    // タグは削除して表示される

$('p').text('foo');    // <, >, &はエスケープされる

タグの中身を取得 / 変更

$('p').html();    // タグもそのまま表示される

$('p').html('<a href="#">foo</a>')    // エスケープされずに変更される;

input, textareaの値を取得 / 変更

$('input').val();

$('input').val('foo');

タグの中身を削除

$('p').empty();

要素を削除

$('p').remove();

カレント要素の前 / 後に指定要素を追加

$('.foo').before($('<p>').text('foo'));

$('.foo').after($('<p>').text('foo'));

.fooの前 / 後に<p>foo</p>が挿入される。

指定要素をカレント要素の前 / 後に追加

$('<p>').text('foo').insertBefore($('.foo'));

$('<p>').text('foo').insertAfter($('.foo'));

<p>foo</p>が.fooの前 / 後に挿入される。

カレント要素の子要素として、指定要素を先頭 / 末尾に追加

$('div').prepend($('<p>').text('foo'));

$('div').append($('<p>').text('foo'));

div内の前 / 後に<p>foo</p>が挿入される。

指定要素を子要素として、カレント要素を先頭 / 末尾に追加

$('<p>').text('foo').prependTo('div');

$('<p>').text('foo').appendTo('div');

<p>foo</p>がdiv内の前 / 後に挿入される。

カレント要素を1つずつ指定要素で囲む

$('p').wrap('<div></div>');

すべてのカレント要素を1つの指定要素で囲む

$('p').wrapAll('<div></div>');

カレント要素の子要素を指定要素で囲む

$('p').wrap('<b></b>');

メソッド - エフェクト

要素を表示 / 非表示

$('p').show();

$('p').hide();

slow, fastを指定したり、数値（ミリ秒）を指定したりできる。

表示 / 非表示を切り替える

$('p').toggle();

slow, fastを指定したり、数値（ミリ秒）を指定したりできる。

要素をアニメーションしながら表示 / 非表示

$('p').fadeIn();

$('p').fadeOut();

slow, fastを指定したり、数値（ミリ秒）を指定したりできる。

CSSをアニメーションしながら変更

$('img').animate({ "height" : "100px" });

$('img').animate({ "height" : "100px" }, "slow");

$('img').animate({ "height" : "100px" }, "swing");

第2引数にslow, fastを指定したり、数値（ミリ秒）を指定したりできる。

第3引数にlinear, swingを指定できる。

メソッド - イベント

イベント実行時に実行

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

$().on({
  イベント1: function() {
    // 処理
  }, イベント2: function() {
    // 処理2
}
});

イベント一覧はHTMLのページを参照

Ajax

カレント要素にファイル内容を読み込む

$('#result').load('more.html');

$('#result').load('more.html', function() {
  // 終了後の処理（コールバック関数）
});

ファイル内容を読み込む（get）

$.get('greet.php', {
  name: $('#name').val()
}, function(data) {
  $('$result').html(data);
});

JSONファイルを読み込む

$.getJSON('greet.php', {
  name: $('#name').val()
}, function(data) {
  $('$result').html(data);
});

ファイル内容を読み込む

$.ajax({
  url:"greet.php",
  type: "POST",    // 通信方法（デフォルト："GET"）
  data: {"id": 8},    // JSON形式 または GET形式（"key1=value1&key2=value2"）
  cache: false,    // キャッシュ（デフォルト：true）
  async: false    // 非同期通信にする（デフォルト：true）
})
  .done(function(data) {
    alert('Success!');
  })
  .fail(function() {
    alert('Error!');
  });

CDN

jQuery

Google Hosted Libraries

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jQueryプラグインCDN

cdnjs

jsDelivr

プラグイン

leanModal

モーダルダイアログを表示

<script src="http://cdn.jsdelivr.net/jquery.leanmodal/1.1/jquery.leanmodal.min.js"></script>

<a href="#foo" rel="leanModal"></a>
<div id="foo">
  <p>test</p>
</div>

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

$(function() {
  $("a[rel*=leanModal]").leanModal();
});

$(function() {
  $("a[rel*=leanModal]").leanModal({ top: 50 }); // 上からの距離を指定
});

MathJax

数式を表示

ダブルクォーテーションでLaTex式を囲む。

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>

デモ

デモ2

Flowplayer

HTML5ビデオプレーヤー

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/flowplayer/5.4.6/skin/minimalist.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/flowplayer/5.4.6/flowplayer.min.js"></script>

<div class="flowplayer">
  <video>
    <source type="video/webm" src="movie.webm">
    <source type="video/mp4"  src="movie.mp4">
  </video>
</div>

速度の変更

再生中に Shift と左右矢印キーを押す

Videoタグの属性

<video autoplay loop>

divのclass

JavaScriptのconf

flowplayer.conf = {
  tooltip: false,    // ツールチップを非表示
  splash: true,    // コントローラーを再生するまで非表示
  fullscreen: false    // フルスクリーンボタンを非表示
};

スキン

• http://cdnjs.cloudflare.com/ajax/libs/flowplayer/5.4.6/skin/minimalist.min.css
• http://cdnjs.cloudflare.com/ajax/libs/flowplayer/5.4.6/skin/functional.min.css
• http://cdnjs.cloudflare.com/ajax/libs/flowplayer/5.4.6/skin/playful.min.css

ロゴを非表示

a[href="http://flowplayer.org"] {
  visibility: hidden;
}

Highcharts

グラフを表示

デモ

ドキュメント

APIドキュメント

<script src="http://cdnjs.cloudflare.com/ajax/libs/highcharts/4.0.4/highcharts.js"></script>

グラフで順序が逆になったときに戻す

legend: { reversed: true }