jQueryをざっくり勉強する
August 14, 2020
こんにちは、たわらです。
本記事は JQuery をざっくり理解するために必要な知識をまとめた記事です。
「要素を指定する」→「それに何かをする」
JQuery の基本的な考え方は、「何かを取ってくる」→「それに何かする」です。下記の参考書がわかりやすかったです。
この考え方を理解できればコードを見ても何がしたいのかがわかります。
$('#sample1').hide();
このコードは、「id 属性が sample1 である要素を隠す」ということです。
<div id="sample1">なんらかのテキスト</div>
この要素があれば、これを非表示（hide）にします。
$('#js-bookmark-button-for-board-<%= @board.id %>').replaceWith(
"<%= j(render('boards/unbookmark', board: @board)) %>"
);
例えばこんなコードがあったとします。
HTML から#js-bookmark-button-for-board-<%= @board.id %>という id を持つ要素を取ってきて、boardsディレクトリ内のunbookmarkをレンダリングした要素に置き換えるということをしていることがわかります。
わりと単純ですね。
$()で要素を囲うことで jQuery オブジェクト化する
何かを取ってくるときに、操作したい要素を$()で囲います。
このことで、HTML の要素を jQuery オブジェクト化することができます。で、jQuery オブジェクトに対して任意のメソッドを呼び出してあげることができます。
（特定のクラスのインスタンスには、そのクラスが保持しているメソッドを呼び出せることに似ていますね！）
要素の指定の仕方 （「要素を指定する」）
要素の指定の仕方はたくさんあるみたいですが、とりあえずこれを覚えよう。要素を指定する文字?のことをセレクタと呼びます。要素をセレクトするための文字ということですね。
・id $('#hogehoge') 例 <div id = "hogehoge">なんらかのテキスト</div>
・class $('.foo') 例 <div class = 'foo' >なんらかのテキスト</div>
・タグ $('p') 例 <p>なんらかのテキスト</p>
これらを組み合わせて操作したい要素を取ってくることができます。指定したセレクタの条件を満たす要素をすべて取ってくることができます。
・タグ ＋ id $('div#hogehoge') 例 <div id = "hogehoge">なんらかのテキスト</div>
・クラス ＋ id $('#hogehoge.foo') 例 <p> id = "hogehoge" class=foo>なんらかのテキスト</p>
・タグ ＋ クラス ＋ id $('div#hogehoge.foo') 例 <div id = "hogehoge" class= foo>なんらかのテキスト</div>
他にも要素の階層構造を判断して、取得したい要素を特定するためのセレクタとして子孫セレクタ（ancestor descendant）なるものもあります。$('p strong')みたいにします。「p のなかの strong 要素を指定」できるというわけです。
いろんなメソッド（「それに何かをする」）
要素を指定したらいろんなメソッドが使えます。
$('セレクタ').メソッド(引数);
・show()
・hide()
・replace()
・val()
・prepend()、append()
などなど詳しくはこちらを参照
$(function(){...})
ページ上にある要素を操作したいときには、すべての要素がページに読み込まれている必要があります。そうしないと、まだ読み込まれていない要素に対して操作しようとしてうまくいきません。
$(function(){...})と書くと、「ページ読み込み完了時に実行されるコードを予約する」ことができます。
$(function () {
//なにかしらの処理
});
こんな風に書きます。
$(this)とは？
イベントが発生した要素が格納されます。クリックした要素の id を取得したいときなどに、data 属性と一緒に使うことがあります。
data()で data 属性の値を取得できる
data()メソッドを使うと、取得した要素のなかのデータ属性にアクセスすることができます。例えば、複数のコメントに id が連番されているときに、そのコメントの一意の番号を取得することができます。
const commentId = $(this).data('comment-id');
実装するときの注意点
・どの要素をどのように動かしたいのかを整理してから実装しましょう。
・変数を作成したときはconsole.logでどのような値を格納しているか、こまめに確認すること
参考文献
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/data-*