◆基本書式
・外枠
$(function() {
（実行したい処理）
}):
・省略前の記述
$(document).ready(function() {
（実行したい処理）
}):
・実行文
$('セレクタ').メソッド();
$('.weather').css('color', '#ff7c89');
・セレクタ（要素の取得）
・$('セレクタ') ←対象が複数の場合、すべての要素が対象
・$('セレクタ１, セレクタ2') ←複数のセレクタを選択
・セレクタ（要素の詳細指定）
・> 直下 $('ul > li') ul直下のli
・, 複数 $('ul, li') ulとli
・+ 隣接 $('ul + li') ulに隣接したli
・Space 子要素 $('ul li') ulの子要素以下のli
・セレクタ（メソッドによる指定）
・.parent() 親要素
・.children() 子要素
・.next() 次の要素
・.prev() 前の要素
・.siblings() 同列の兄弟要素
$('.weather').parent.css('background-color', 'pink'); ←.weatherの親要素
・クラス名を用いたメソッド
・.hasClass() 引数に指定したクラス名を持っているかの判断
・.removeClass() 引数に指定したクラスの削除
・.addClass() 引数に指定したクラスの追加
・.toggleClass() 引数に指定したクラスの追加または削除
if($(this).hasClass('open'){
$(this).removeClass)('open');
} else {
$(this).addClass)('open');
}
・.eq()メソッド（equal・特定の要素を簡単に選択）
・:nth-child()のように動的に要素を選択。
・jQueryオブジェクトが保持している要素のリストから、指定したインデックスにある要素だけを選択するために使用。
・複数の要素が同じクラスを持っている場合や、ドキュメントの特定の部分から特定の要素を選び出したい場合に有用。
・複数のスライドやタブがある場合、ユーザーの操作に応じて特定のスライドやタブの内容を表示/非表示にするときなどに便利。
・.eq(index)メソッドは、引数として0から始まる整数のインデックスを受け取り、選択したい要素の位置を指定する。
・負の数値を指定すると、リストの末尾からの位置を指定したことになる（-1は最後の要素を選択）。
$('li').eq(1).css('color', 'red');・
・タブになっている画像ギャラリーで、ユーザーがタブ（button）をクリックすると対応する画像が表示。
最初に、全ての画像を非表示にし、次に.eq(index)で選択した画像だけを表示している。
$('.nav-buttons button').click(function() {
var index = $(this).index();
$('.images img').hide().eq(index).show();
});
・アコーディオンメニュー
$('.menu-title').click(function() {
// すべてのコンテンツを非表示にする
$('.menu-content').hide();
// クリックされたタイトルのインデックスを取得
var index = $(this).index() / 2; // タイトルとコンテンツが交互にあるため
// 対応するコンテンツを表示する
$('.menu-content').eq(index).slideDown();
});
・セレクタでの使用（:eq()）
・メソッドのように使うだけでなく「セレクタ」として利用することも可能。
・メソッドとしてのeq()と指定方法は異なるが、実現できることは同じなので両方のやり方に慣れておく。
var r = $('div:eq(2)').text(); ←３つ目の要素をセレクタ指定。
・.index()メソッド（インデックスの番号を取得）
・.index()メソッドは、特定の要素が何番目にあるのかを取得する。
$('.tab-list-item').on('click', function(){
let index = $('.tab-list-item').index(this);
$('.tab-list-item').removeClass('is-btn-active');
$(this).addClass('is-btn-active');
$('.tab-contents').removeClass('is-contents-active');
$('.tab-contents').eq(index).addClass('is-contents-active');
});
・メソッドチェーン
・複数のメソッドを並列に記述。
・処理速度が早くなる。
$('.weather').css('color', '#ff7c89').fadeOut("slow");
◆イベント
・基本書式
$(function() {
$('#nice').click(function(){
alert('いいね！');
});
}):
・on()メソッド（複数のイベントをまとめて設定）
$('#nice').on('mouseover mouseout' ,function(){
alert('いいね！');
});
・this
・$()内に指定されている「this」には、イベントが発生した要素が入る。
・イベントだけでなく、様々な処理で利用することができる。
・下記の場合、「.event-btn」が格納される。
$('.event-btn').on('click', function(){
$(this).css('color', '#ff7c89');
});
・toggle()
・要素の表示or非表示。
・「hide()」「show()」を1つに融合。
・引数で時間指定
対象要素.toggle( ミリ秒 )
・関数指定(指定の時間後に関数実行)
$('button').click(function() {
$('h1').toggle(2000, function() {
console.log('アニメーション完了');
});
});
・スライドトグル（）
・特定の箇所をクリックした際に、指定した要素の表示／非表示をスライド効果で切り替えるトグル機能。
・（Ver. 1.2.1より）初期状態は非表示状態。