jQuery理解のための手順
自己流jQueryの理解の仕方
自分も大してjQueryを書けるわけではないのですが、今はやりたい機能に関してはなんとなく形に出来るようになったので、その際にこの理解の仕方いいなっと思った方法を書いておくので、参考にしていただければ嬉しいです。
文法をしっかり理解する
1にも2にも最低限の文法を理解しないまま、jQueryやその他JavaScriptライブラリを触っていてもいつまでたっても理解出来ませんでした。jQueryは少し理解出来ればとっても簡単に記述できてサイトの構築なんかにはとても便利です。
jQueryの基礎文法
例えばこのようなHTMLがあったとして
<button></button>
をクリックしたら<div class="hide"></div>
をフェードインさせたいとします。
個人的にjQueryの理解のコツは処理のロジックを口に出して言えるかどうかだと思います。
どこにどんなアクション(わかりやすく言うとホバーやクリックなど)があって何をしたいのか
これがすごく自分にははまって理解しやすかったです。
では続きです。
以下で、上述の機能「<button></button>
をクリックしたら<div class="hide"></div>
をフェードイン」は完成です。
しかし、ただフェードインさせるだけではつまらないといった時に同時に複数のメソッドを呼び出すことができます。
このようにメソッドを繋いでいくことをメソッドチェーンと言いメソッドを「.」で繋ぐことで使用できます。
少し、実践的なことをやります。
if を使い判定を行って処理をしたいと思います。
わかりやすくなるかなと思い、elseifを使ってみました。
hasClass
でクラスの判定を行って処理をしています。
もっとスマートな書き方があるのですが、理解のためになるべくわかりやすさを重視して書きました。 自分もまだまだjQueryを使いこなせていないのですが、jQueryの勉強の参考になれば嬉しく思います!