とりあえず投稿しますが随時追加・修正します。
修正点あればご指摘ください。
僕の行った学習方法
- やりたいことでググる
- 出てきたコードを読む
- メソッドをひとつひとつリファレンスで調べる
- 読める！
jQueryの文法
基本構造
$(セレクタ).メソッド(引数としてイベント、関数、値)
例
example.js
$('#foo').on('click', function(){
console.log("Hello, World")
});
上記の例では、
1. idがfooである要素をセレクタとして指定し
2. セレクタで指定した要素にonメソッドを付与し
3. on メソッドの第一引数にclickイベントを指定し
4. on メソッドの第二引数にclickイベントが起きた時の処理を関数として定義している。
参考リンク
とりあえず以下のリファレンスで書くのに必要なメソッドを読み込む形で学習した。
リファレンス
-
設計力を学ぶデザインドリル jQuery入門
リファレンスとして個人的に一番わかりやすかった。
Ajax
-
はじめてのAjax(jQuery)2018年版
WebアプリケーションでAjaxを使った非同期通信。 jQueryとPHPでの実装例。
コンポーネント指向
- ファイルをコンポーネントごとに分割。
- 1つのmain.jsファイルに各ファイルのモジュールをインポートする。
- main.jsファイルでは、jQuery オブジェクトを引数に取る即時関数内で、
$( document ).ready()を行う。 - 即時関数は、jQuery オブジェクトを実引数、
$を引数に取っている。$をグローバル変数として使用しているのは、他のJavaScriptのライブラリとの衝突を防ぐためのおまじない。
main.js
import jQuery from 'jquery';
...
($ => {
$(() => { // = $(document).ready()
...
});
)(jQuery); // 実引数
みたいな感じ？
- オブジェクトについて - 設計力を学ぶデザインドリル jQuery入門
-
[コラム] 即時実行関数 - js-primer
- (function() {...})();って？無名関数・即時関数とスコープ - jQueryを書けるようになりたい(2)
- jQuery(callback) - jQuery() - jQuery API Documentation
クラス
jQueryのコードは何かとグローバルに定義されるが、再利用性の高いコードを書くためにクラスを使って責務やコンポーネントを分割するのが良い。
jQueryというよりJavaScript感はある。
参考になったリンク・サンプルはここら辺。