【jQuery】初心者向け!基本のコードまとめ

こんにちは!牧野です。
社内で席替えがあって、歳がひとつ下、ふたつ下の方々に囲まれて仕事をしているのですが…すごく…自分の顔が老けて見えます…。
え!若い!と思ってしまうあたりが、おばさまへ歩みを進めている気がしますね。

最近サイト構築の時にjQueryを使うことが多く、初心者なりによく使うコードが出てきたのでまとめてみました。
こんなことやってみたいけどHTMLやCSSだと難しい・複雑になりそう…ということでも、jQueryを使えばサクッとできたりします。

そもそもjQueryとは

jQueryは、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。
引用:Wikipedia

( ^ω^)?

簡単に言うと、Javascriptだと複雑になってしまうコードを簡単に使えるようにしたよ〜というのがjQueryです。えらい。
自分でjQueryのコードを書くのであれば、Javascript の知識が必要となりますが、今回はコピペで使える簡単なものをシェアしたいと思います!

どうやって使うんだ!

jQueryのコードをただ書くだけでは、悲しいことにそのコードは動きません…。
導入まではこちらの記事が大変参考になりますのでご覧ください!
https://handywebdesign.net/2017/09/jquery-for-beginner/

書き方

今回ご紹介するのは
①何をフックに作動させるか?
②何をどうさせるか?
のふたつです。

①のコードで、②のコードを囲むように記述していきます。

①何をフックに動作させるか?

私がよく使うのはこのふたつです。

要素をクリックした時

マウスが要素に乗った時

②何をどうさせるか?

要素にクラスを追加・削除させる

クラスが付いていなかったら追加、付いていたら削除するということもできます!

要素をふわっと表示・非表示させる

非表示(CSSで display: none; にしている)だったら表示し、表示されていたら非表示にする、ということもできます!

活用例

ハンバーガーメニュー(.menu_btn)をクリックしたら、bodyに『menu_active』っていうクラスをつけたいよ〜!

ハンバーガーメニューが開いている時と閉じている時でスタイルを変更したいときなどに使えます!

ある文字やアイコン(.help)にマウスを載せている時だけこの文章(.help_desc)をふわっと表示させたいよ〜!

はてなマークにマウスが乗った時にヘルプを出現させたいときなどに使えます!

習うより慣れろ、です!

わからないから勉強したい…でもなかなか時間取れないなぁ…と思っていたら、いつの間にか少しだけ書けるようになっていた jQuery。
実際に使っていると、なんとなく仕組みを理解することができます!
Javascript が元なので、そちらもしっかり学んでおきたいですね。

今回ご紹介した基本のよく使うコード、いかがでしたでしょうか。
Webに知識のある方でも、知らない言語のコードを使うのは少し怖いですよね…。
こんなことをやってみたいけど、どうやったらいいかわからない!助けて!!というときは弊社までお問い合わせください。

牧野

この記事を書いた人: 牧野

太ったって言われるけどずっと太ってます。

あわせて読みたい