Jqueryの使い方！覚えておいて、損はなし！！

Jqueryとは？

目次[非表示]

• 1Jqueryとは？
• 2昔、Jqueryは超重要だった
• 3コードの書きやすさ
• 4使う準備
• 5使い方
• 6最後に

Jquery。様々なサイトで利用されているJavaScriptのライブラリです。

簡単に言えば、「JavaScript」を使いやすくするためのものになります。

昔、Jqueryは超重要だった

昔は、JavaScriptは、様々な欠点がありました。

ブラウザごとに仕様が違っていたり、扱いが難しかったりと。

ですが、Jqueryを利用すれば、とても簡単にJavaScriptを扱えるため、とても利用されていました。

ですが、今は昔ほどJavaScriptは扱いにくくないため、Jqueryを利用しないサイトも増えてきていますが、今もなおJqueryは使われ続けているライブラリです。

コードの書きやすさ

Jqueryを使うと、とても簡単にコードを書くことができます。
例えば、

docment.getElementById("test").innerHTML="TestCode";

というコードと同じ処理をJqueryを利用して書いてみると、

$("#test").html("TestCode");

というとても短いコードで済むのです。
他にも、要素のスタイルを変更するコードを比べてみましょう。

Javascriptのみで書くと、

docment.getElementById("test").style.display="none";
docment.getElementById("test").style.height="200px";

このようになります。ですが、Jqueryを利用して書くと、

$("#test").css({"display":"none","height":"200px"});

と、これほどにまで短縮することができます。

使う準備

HTMLのheadタグの最初に次のコードを挿入してください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

また、Jqueryのバージョンは、
3X　　3.4.1, 3.4.0, 3.3.1, 3.3.0, 3.2.1, 3.2.0, 3.1.1, 3.1.0, 3.0.0　　


2X　　2.2.4, 2.2.3, 2.2.2, 2.2.1, 2.2.0, 2.1.4, 2.1.3, 2.1.1, 2.1.0, 2.0.3, 2.0.2, 2.0.1, 2.0.0　

1X　　1.12.4, 1.12.3, 1.12.2, 1.12.1, 1.12.0, 1.11.3, 1.11.2, 1.11.1, 1.11.0, 1.10.2, 1.10.1, 1.10.0, 1.9.1, 1.9.0, 1.8.3, 1.8.2, 1.8.1, 1.8.0, 1.7.2, 1.7.1, 1.7.0, 1.6.4, 1.6.3, 1.6.2, 1.6.1, 1.6.0, 1.5.2, 1.5.1, 1.5.0, 1.4.4, 1.4.3, 1.4.2, 1.4.1, 1.4.0, 1.3.2, 1.3.1, 1.3.0, 1.2.6, 1.2.3

に切り替えることが可能です。

使い方

まず覚えるのは、Jqueryのセレクタです。Jqueryのセレクタは、CSSのセレクタと同様に指定することができます。
使い方は、

$("セレクタ").処理();

となり、これが基本構造です。
つまり、要素すべてに指定したければ、

$("*").処理();

となり、p要素すべてに指定したければ、

$("p").処理();

クラスtestに指定したければ、

$(".test").処理();

name属性がtestの要素に指定したければ、

$("[name=test]").処理();

となります。

「処理」の部分では、指定した要素に「何をしたいか」を指定します。
例えば、cssを変更したければ、

$(".test").css({"display":"none"});

と、.cssを指定します。中のHTMLを変えたければ.html等でやることができます。

最後に

当記事ではあまり詳しいところまでは触れませんが、様々な機能があります。

さらに、jqueryを拡張することもでき、可能性は無限大と言えるでしょう。

皆さんもJqueryを活用して作業を効率化しましょう。