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

related

Sassの環境を整える

今回は、何となく避けてきたSassを勉強しようとふと思ったのでブログにまとめていきます。学校の授業で少し触ったのですがほとんど覚えていませんので時間もありますので覚えていこうと思います。 Sassとは

フロントエンド

2020.05.03

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

CSSアニメーションの基礎

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。 CSSアニメーションには「transition」と

フロントエンド

2020.03.19

EJSを使ってサイトをコーディングする

今回は、ポートフォリオのコーディングで使ったEJSについてまとめていきます。EJSを使っていくための環境構築やEJSのメリットなどまとめていこうと思います。 EJSとは? そもそもEJSって何?という

フロントエンド

2020.08.27

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き