【jQuery】初心者向け！基本のコードまとめ
こんにちは！牧野です。
社内で席替えがあって、歳がひとつ下、ふたつ下の方々に囲まれて仕事をしているのですが…すごく…自分の顔が老けて見えます…。
え！若い！と思ってしまうあたりが、おばさまへ歩みを進めている気がしますね。
最近サイト構築の時にjQueryを使うことが多く、初心者なりによく使うコードが出てきたのでまとめてみました。
こんなことやってみたいけどHTMLやCSSだと難しい・複雑になりそう…ということでも、jQueryを使えばサクッとできたりします。
そもそもjQueryとは
jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
引用：Wikipedia
( ^ω^)?
簡単に言うと、Javascriptだと複雑になってしまうコードを簡単に使えるようにしたよ〜というのがjQueryです。えらい。
自分でjQueryのコードを書くのであれば、Javascript の知識が必要となりますが、今回はコピペで使える簡単なものをシェアしたいと思います！
どうやって使うんだ！
jQueryのコードをただ書くだけでは、悲しいことにそのコードは動きません…。
導入まではこちらの記事が大変参考になりますのでご覧ください！
https://handywebdesign.net/2017/09/jquery-for-beginner/
書き方
今回ご紹介するのは
①何をフックに作動させるか？
②何をどうさせるか？
のふたつです。
①のコードで、②のコードを囲むように記述していきます。
①何をフックに動作させるか？
私がよく使うのはこのふたつです。
要素をクリックした時
$(function() {
$('クリックする要素のセレクタ').on('click', function(){
②のコード
});
});マウスが要素に乗った時
$(function() {
$('マウスを乗せる要素のセレクタ').hover(function() {
②のコード
});
});②何をどうさせるか？
要素にクラスを追加・削除させる
// 追加する
$('クラスを追加する要素のセレクタ').addClass('追加するクラス');
// 削除する
$('クラスを削除する要素のセレクタ').removeClass('削除するクラス');クラスが付いていなかったら追加、付いていたら削除するということもできます！
// 追加したり削除したりする
$('クラスを操作する要素のセレクタ').toggleClass('追加・削除するクラス');要素をふわっと表示・非表示させる
// ふわっと表示する
$('表示する要素のセレクタ').fadeIn();
// 表示させるまでの秒数（ミリ秒）を指定することもできます（下記は0.5秒）
$('表示する要素のセレクタ').fadeIn(500);
// ふわっと非表示にする
$('非表示にする要素のセレクタ'). fadeOut();
// こちらも非表示にするまでの秒数（ミリ秒）を指定することができます（下記は0.5秒）
$('表示する要素のセレクタ').fadeOut(500);非表示（CSSで display: none; にしている）だったら表示し、表示されていたら非表示にする、ということもできます！
// 表示したり非表示にしたりする
$('表示を操作する要素のセレクタ').fadeToggle();
// これもまた、秒数を指定できます（下記は0.5秒）
$('表示を操作する要素のセレクタ').fadeToggle(500);活用例
ハンバーガーメニュー（.menu_btn）をクリックしたら、bodyに『menu_active』っていうクラスをつけたいよ〜！
$(function() {
$('.menu_btn').on('click', function(){
$('body').addClass('menu_active');
});
// 閉じる時にはクラスを削除したいな〜
$('body.menu_active .menu_btn').on('click', function(){
$('body').removeClass('menu_active');
});
});
ハンバーガーメニューが開いている時と閉じている時でスタイルを変更したいときなどに使えます！
ある文字やアイコン（.help）にマウスを載せている時だけこの文章（.help_desc）をふわっと表示させたいよ〜！
$(function() {
$('.help').on('click', function(){
$('.help_desc').fadeToggle();
});
});
はてなマークにマウスが乗った時にヘルプを出現させたいときなどに使えます！
習うより慣れろ、です!
わからないから勉強したい…でもなかなか時間取れないなぁ…と思っていたら、いつの間にか少しだけ書けるようになっていた jQuery。
実際に使っていると、なんとなく仕組みを理解することができます！
Javascript が元なので、そちらもしっかり学んでおきたいですね。
今回ご紹介した基本のよく使うコード、いかがでしたでしょうか。
Webに知識のある方でも、知らない言語のコードを使うのは少し怖いですよね…。
こんなことをやってみたいけど、どうやったらいいかわからない！助けて！！というときは弊社までお問い合わせください。
