はじめに
最近jQuery関連について学習したのでチートシートを作成しました！
よく使うものを中心に、使い方や記述のポイントを簡単にまとめたのでご活用ください。
目次
1.予約状態
2.セレクタの指定方法
[3.Family Treeの探索](#3-Family Treeの探索)
4.よく使うメソッド一覧
5.その他のメソッド
６.each()
６.イベント処理
[６.非同期通信: $.ajax()](#5-非同期通信: $.ajax())
予約状態（HTMLを先に読み込む処理）
index.html
!DOCTYPE
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
<!-- scriptファイルの読み込み -->
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div class="box" id="box">
<p class="box__text">テスト</p>
</div>
<script>
// 予約状態にしておく
$(function() {
// 処理内容を記述
}
</script>
</body>
</html>
上の例ではHTMLを書いてからJSを記述しているので問題ありませんが
JS用にファイルを分けて書く場合は$(function(){}を記述する必要があります。
$(function(){}はJSを一旦、待ちの状態にするという意味があります。
これを予約状態と言います。
HTMLファイルは上から順に読み込んで処理を実行していきます。
なので、DOM操作を成立させるために先にHTMLを読み込む必要があります！
セレクタの指定方法
$('div') // タグ名で指定
$('.box') // クラス名で指定
$('#box') // id名で指定
$('[data-属性名="値"]') // data属性で指定
$('[name="値"]') // name属性で指定
$('.box > .box__text') // > 直下の要素を取得
$('.box .box__text') // 配下の要素を取得
$('.box , .box__text') // , 複数の要素を取得(配列の形式になる)
$('.box + .box__text') // + 隣接の要素を取得
Family Treeの取得
以下のHTMLを例にしてFamily Treeを説明していきます。
<div>先祖要素
<div>親要素
<div>兄要素A</div>
<div>兄要素B</div>
<div class="self">自分
<div class="child-a">子要素A</div>
<div>子要素B
<div class="grandchild-a">孫要素A</div>
<div>孫要素B</div>
</div>
</div>
<div>弟要素A</div>
<div>弟要素B</div>
</div>
</div>
$('.self').parents() // 親要素+先祖要素（上位階層の全親要素）を取得
$('.self').parent() // 1階層上の親要素を取得
$('.self').prev() // 前の兄弟要素（兄）を取得
$('.self').prevAll() // 前の全ての兄弟要素（兄要素AとB）を取得
$('.self').next() // 後の兄弟要素（弟）を取得
$('.self').nextAll() // 後の全ての兄弟要素（弟要素AとB）を取得
$('.self').children() // 引数なしの場合は子要素を全て取得
$('.self').children(".child-a") // 子要素Aを取得
$('.self').find("grandchild-a") // 孫要素Aを取得
ポイント
-
find()は子孫要素まで探しにいきたいときに使用する（引数省略できない） -
children()は子要素のみしか取得することはできない
よく使うメソッド一覧
要素の追加と削除
// 要素の追加
$('.box').text('テキストを追加') // セレクタ内にテキストを追加
$('.box').html('<p>DOM要素を追加</p>') // セレクタ内にDOM要素を追加
$('.box').append('<p>DOM要素を追加</p>') // .boxの子要素としてDOMを最後尾に追加
$('.box').prepend('<p>DOM要素を追加</li>') // .boxの子要素としてDOMを最前列に追加
$('.box').before('<p>DOM要素を追加</p>') // 1つ兄のsiblingとしてDOMを追加
$('.box').after('<p>DOM要素を追加</p>') // 1つ弟のsiblingとしてDOMを追加
// 要素の削除
$('.box').remove() // 引数なしの場合は.boxの要素自身とその中身の要素を全て削除
$('.box').remove('selector') // 引数ありの場合は.box内の指定したセレクタのみ削除
$('.box').empty() // .box内の要素のみを削除
<!-- 補足 ~要素の追加の挙動~ -->
<!-- $('.box').text('テキストを追加') -->
<div class="box">
テキストを追加
</div>
<!-- $('.box').html('<p>DOM要素を追加</p>') -->
<div class="box">
<p>DOM要素を追加</p>
</div>
<!-- $('.box').append('<p>要素を追加</p>') -->
<div class="box">
<p>元からあるDOM要素</p>
<p>元からあるDOM要素</p>
<p>DOM要素を追加</p>
</div>
<!-- $('.box').prepend('<p>要素を追加</p>') -->
<div class="box">
<p>DOM要素を追加</p>
<p>元からあるDOM要素</p>
<p>元からあるDOM要素</p>
</div>
<!-- $('.box').before('<p>要素を追加</p>') -->
<p>DOM要素を追加</p>
<div class="box">
<p>元からあるDOM要素</p>
<p>元からあるDOM要素</p>
</div>
<!-- $('.box').after('<p>要素を追加</p>') -->
<div class="box">
<p>元からあるDOM要素</p>
<p>元からあるDOM要素</p>
</div>
<p>DOM要素を追加</p>
ポイント
-
remove()はセレクタ自身とそのセレクタの中身を全て削除する -
empty()はセレクタの中身のみを削除する
クラスの追加と削除
$('.box').addClass('add') // .boxにaddクラスを追加
$('.box').removeClass('add') // .boxからaddクラスを削除
// 番外
var checkClass = $('.box').hasClass('.add') // .boxがaddクラスを持っているかどうかを判定
console.log(checkClass); // 持っていればtrue、なければfalseが帰ってくる
css style
$('.box').css('cssプロパティ', '値') // .boxのcssプロパティを値に適用させる
// 例
$('.box').css('backgroundColor', 'blue') // 背景色を青に変更
$('.box').css('fontSize', '16px') // フォントサイズを16pxに変更
animation
// 要素を出現させる・要素を隠す
$('.box').show() // 要素を出現させる
$('.box').hide() // 要素を隠す
// フェードインとフェードアウト（引数はミリ秒で設定）
$('.box').fadeOut( 3000 ) // .boxが3秒かけてフェードアウト
$('.box').fadeIn( 3000 ) // .boxが3秒かけてフェードイン
// スライドアニメーション（引数はミリ秒で設定）
$('ul').slideDown( 1000 ) // １秒かけてスライドダウン
$('ul').slideUp( 1000 ) // 1秒かけてスライドアップ
// animate()の使い方（第一引数以外は省略可能）
$('selector').animate({数値が設定できるcssプロパティ}, duration, easing, 関数)
// 例
$('.box').animate({
'marginTop': 200,
'marginRight': 200
}, 3000) // .boxが3秒かけてtopとrightに200pxずつ移動
その他のメソッド
val()
HTMLタグ内に記述されているvalue属性を取得する
<input type="text" class="text__input" placeholder="投稿する">
例えば、上の入力フォームでユーザーが「hello world」と入力したとする。
その入力内容を取得したいときなどにval()を使用する
var val = $('.text__input').val();
console.log(val); // 表示結果→hello world
data()
HTML要素内に付与されたdata属性を取得する
<p data-name="波平" data-age="54">わしは波平じゃ</p>
var result = $('p').data('name');
console.log(result); // 表示結果→波平
index()
引数に設定した要素とマッチした要素のインデックス番号を取得する
<ul>
<li>li要素(0)</li>
<li>li要素(1)</li>
<li class="test">class属性付きli要素(2)</li>
<li>普通のli要素(3)</li>
<li class="test">class属性付きli要素(4)</li>
</ul>
var target = $(".test");
var myIndex = $("li").index(target);
console.log(myIndex) // 2と表示される
eq()
複数のHTML要素の中からインデックス番号を指定することで特定の要素だけを取得する
<ul>
<li>サザエ</li>
<li>カツオ</li>
<li>わかめ</li>
<li>マスオ</li>
</ul>
$('li').eq(1); // <li>カツオ</li>を取得する
each()
繰り返し処理を行いたいときに使用する。
引数として「index（インデックス番号）」と「element（HTML要素）」を取得できる
<ul>
<li>サザエ</li>
<li>カツオ</li>
<li>わかめ</li>
</ul>
$('li').each(function(index, element) {
console.log(index);
console.log($(element).text());
})
// 実行結果
0
サザエ
1
カツオ
2
わかめ
// 配列に対してeach()を使う場合
var array = ['サザエ', 'カツオ', 'わかめ'];
$.each(array, function(index, value) {
console.log(index + ': ' + value);
})
// 実行結果
0:サザエ
1:カツオ
2:わかめ
イベント処理
click()とon('click', function(){})
on()は複数のイベントを記述できるのと,
動的に追加されたDOMに対してもイベントを定義することができます。
なので基本的にイベント処理はon()で定義していきます。
click()はon()のショートハンドとして用いられます。
// 例 ボタンをクリックしたら、pタグのテキストの色を赤に変更
$('button').on('click', function() {
$('p').css('color', 'red');
});
hover()
ホバーさせたときと、ホバーを解除したときのイベントを定義する
// 記述の仕方
$('selector').hover(function() {
// 第一引数にホバーした時の処理を記述
}, function() {
// 第二引数にホバーを解除したときの処理を記述
});
// 例 .boxにホバーしたらaddクラスを付与、解除時にaddクラスを削除
$('.box').hover(function() {
$(this).addClass('add');
}, function() {
$(this).removeClass('add');
});
補足 $(this)
$(this)はイベントが発生しているセレクタを指します。
// 例
$('.box').on('click', function() {
$(this).css('backgroundColor', 'blue');
});
// この場合、イベントが発生しているのは.boxなので下記と同じ意味になります
$('.box').on('click', function() {
$('.box').css('backgroundColor', 'blue');
});
非同期通信 $.ajax()
公開APIからjson形式でデータを受け取る
$.ajax({
url: '<url>',
type: 'GET',
datatype: 'json',
data: {
// 公開APIの入力パラメーターからプロパティと値を設定
},
})
// データ通信に成功した場合はdone()の中身の処理を実行
.done(function(data) {
// 処理内容
})
// データ通信に失敗した場合はfail()の中身の処理を実行
.fail(function(error) {
// 処理内容
})