【文系大学生が解説】JavaScriptのライブラリ「jQuery」の導入方法と使い方

jQuery サムネJavaScript
スポンサーリンク
jQuery サムネ

お久しぶりです。文系大学生のマダラ蝶です!
夏休みいかがお過ごしですか〜??まだまだ暑い日が続きますが、暑い日に負けずに今日も積み上げ活動していきましょ〜😊

さて久々の投稿となる今回は、JavaScriptのライブラリである「jQuery」について、導入方法と使用方法について解説していきたいと思います!
では早速解説していきたいと思います!

今回の備忘録はこんな方におすすめ!

  • JavaScriptはちょっと難しくて扱えない…
  • HTML/CSSで作ったサイトに簡単なアニメーションを加えたい!
  • jQueryの導入方法、使い方を知りたい
タピるマダラ蝶

jQueryを使えばサイトにアニメーションを簡単に追加できるのでぜひこの記事を見て、使えるようになりましょう!

スポンサーリンク

そもそもjQueryって?

「jQuery]」とは、短い記述でWebページに様々な効果を与える事ができるJavaScriptのライブラリです。「ライブラリ」とは特定の機能を持ったプログラムを集めたファイルです。ある機能をJavaScriptで一から書いた場合数十行になるようなプログラムを「jQuery」では数行で書く事ができます。また、JavaScriptで記述する場合には、ブラウザーごとの違いを考慮してたくさんのコードを記述する必要がありますが、「jQuery」を記述する際にはブラウザーの差異をきにする必要はありません。

プロエンジニアより引用

わかりやすいように料理の例えで表すと、「カット野菜」のようなものでJavaScriptを簡単に扱えるようにした感じです。

「jQuery」の導入方法

つぎにjQueryの導入方法について解説していきたいと思います。jQueryには2つの導入方法があります。ダウンロードした「jQuery」のファイルをローカルPCやサーバーに配置して使う方法と、CDN(Content Delivery Network)を利用してjQueryライブラリを使う方法です。 この記事では、手軽に「jQuery」ライブラリを使えるCDNの使い方について確認してみましょう。前者のダウンロードをして使用方法には表示速度が早くなったりとメリットは有るのですが、ほとんどの人はCDNを利用する方法で問題ないでしょう。

CDNを使ってjQueryを使う

jQueryの公式サイトや、MicrosoftGoogle の提供するCDNをHTMLコード中に指定する事で、jQueryをダウンロードすることなく「jQuery」を使う事ができます。

jQueryのCDNのサイトです。

「jQuery」公式サイトのCDNを使う場合は、HTMLのbodyタグの最後にスクリプトタグを以下の様に指定します。

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

これでjQueryの導入は終了です。

「jQuery」導入の注意点

「jQuery」を導入ときには1つだけ注意点があります。
それは、.slimと記載されたCDNを使わないことです。これはjQueryのスリムビルド版というもので、いくつかの機能やメソッドが省かれたjQueryです。

Bootstrapを使用するときにはもともとスリムビルド版がデフォルトで指定されているため、通常のjQueryを使用するためにはコードを書き換える必要があります。

「jQuery」の使い方

次にjQueryの詳細な使い方について解説していきたいと思います。

jQueryはどこに書くか?

jQueryはどこに書くのでしょうか?jQueryを書くには下のようなコードを書く必要があります。

$(document).ready(function() {

 });

documentが読み込まれたら次の処理をしなさい。という意味です。短縮形として次の記述でもokです。

$(function() {
          
 });

セレクタ

jQueryから、HTMLのDOMを取得する事ができます。
基本構文は以下の通りです。

$(" セレクタ ");

セレクタの記述方法はCSSでの記述方法と同じです。

html要素  $(" h1 ");
id       $(" #main ");
class    $(" .item ");

このようにjQueryでは、簡単にHTMLのDOMを取得する事ができます。

メソッド

DOMを取得しただけでは、jQueryで扱うためのオブジェクト生成をしただけでは、何も画面は変化しません。jQueryオブジェクトから、決められたメソッドを指定することで様々なアニメーションなどを実装させることが出来ます。

まず、CSSというメソッドの例を見ていきましょう。

$('p').css('color', 'red’);

HTMLのpタグを取得してCSSメソッドで文字色を赤色にしています。他にもメソッドをつなげて記述することも出来ます。

$('p').css('color', 'red’).hide(slow);

このように、メソッドをつなげて記述することをメソッドチェーンと言ったりします。メソッドをつなげて記述するときには「.」を使います。

メソッドには他にも沢山の種類があります。例えば、

addClass /removeClass  クラスの追加/削除
text テキストの編集
html HTML要素の追加
val value属性の追加、編集 取得

これらは1例です。jQueryの公式リファレンスでより詳しく見ることが出来ます。

まとめ

今回はJavaScriptのライブラリであるjQueryの導入方法と使い方について解説しました。jQueryを使いこなすことでwebサイトにアニメーションを追加することが出来ます。今回紹介したメソッドの他にも使えるメソッドもたくさんあるので、気になった人は是非調べてみてください!また、jQueryはBootstrapでも使うことが出来ます。Bootstrapの導入方法については過去記事にまとめていますのでぜひご覧ください!

【文系大学生が教える】Bootstrap 4を導入方法をわかりやすく説明!

コメント

タイトルとURLをコピーしました