kokeblog

jQueryの基礎

  • 2020年04月09日
  • 今回は、JavaScriptのライブラリのjQueryの基礎部分をまとめていこうと思います。最近ではjQueryは微妙と聞くこともありますが個人的には素のJSよりも触ってみて扱いやすかったので勉強のためにもまとめていきます。

    jQueryとは

    まずはjQueryとは何なのかというところからまとめていきます。

    jQueryは JavaScriptのライブラリです。他にも JavaScriptのライブラリはたくさんありますがその中でも人気の高いライブラリになっています。最近ではjQueryを使わずに実装していった方がいいというのも聞きますが何やかんやでいまだに使われているみたいですね。jQueryは短いコードで簡単に実装できると言った特徴があります。自分も実際に触って学習していく中で素のJavaScriptよりも分かりやすくて簡単に実装できたりしました。

    jQueryの導入方法

    jQueryの導入方法についてです。特に難しいこともないので誰でもできるはずです。

    ダウンロードして読み込む

    jQueryの公式サイトでダウンロードして普通のJavaScriptのファイルと同様に<script>を使って読み込みます。下のように書けばOKですね。おそらく大体はこの方法で導入している方が多いのかなーと思います。ちなみにダウンロードするときはAltキー(optionキー)を押しながらクリックすればちゃんとダウンロードできます。

    <script src="jquery-3.1.0.min.js"></script>

    CDNで読み込む

    CDNでjQueryを読み込むこともできます。CDNから読み込む場合は、下記のように書きます。

    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>

    jQueryの基本的な書き方

    今まではjQueryを使うための準備でしたがここからは実際の使い方についてまとめていきます。

    いきなりですが基本となる書き方は下記のようになります。

    $(function(){
    jQueryのコード
    })

    上記のように書くことが基本となります。$をjQueryと書いてもいいみたいですが短い方が時間も短縮できますしせっかくjQueryを使ってコードを短くできるので$を使いましょう。

    対象の要素はCSSと同じような書き方で指定します。classなら.クラス名、idなら#id名などと言った感じで指定すればOKです。CSSなどに結構馴染みがある方はやりやすいかなと思います。ちなみに素のJavaScriptでもqueryselecterを使えば同じような感じで要素を指定できます。

    jQueryの具体的な書き方

    それではjQueryの具体的な書き方をまとめていきます。

    HTMLを操作する

    jQueryでHTMLを書き換えたりする方法です。対象の要素のpを書き換えたいなどのときはhtmlと書いて()の中に書き換える内容を書けばうまくいきました。素のJSだとinnerHTMLを使うと同じようなことができますね。

    CSSを指定する

    jQueryでCSSを指定する方法です。pに対してCSSを指定するときはそのままcssと書いて下記のように書けばOKです。

    クラスを追加する

    クラスを追加する方法です。クラスを追加するにはaddClassを使います。

    クラスを取り除く

    次はクラスを取り除く方法です。クラスを取り除くときはremoveClassを使います。

    addClassとremoveClassを使えればCSSアニメーションなどと組み合わせていろいろできますね。

    クリックしたときに処理をする

    次は先ほどのaddClassとremoveClassを使いクリックしたときにフェードイン、フェードアウトするようなものを実装してみました。簡単なものですがこんな感じでCSSアニメーションと組み合わせるてサイトに実装してみると今時のアニメーションがはいったいい感じのWebサイトになるんじゃないでしょうか。

    まとめ

    今回はjQueryの基礎の基礎をまとめていきました。JSよりも短いコードでHTML、CSSの感覚でプログラムをかけるので個人的にはかなり扱いやすかったですね。jQueryはanimate関数やeffectsなどまだまだいろいろできることがあるみたいなので触ってみて学習を進めたいと思います。

    Pocket

    関連記事

    jQueryのanimate関数について

    jQueryでよくあるフェードインを作る

    フォーム作成の備忘録

    jQueryを使って一番上に戻るボタンを実装する

    カテゴリー