初級フロントエンドエンジニアが知っておきたい基礎の基礎【jQuery編】

CODE

jQueryとは?

そもそもjQueryとは何なのでしょうか。jQueryは、Javascriptを扱いやすくするライブラリのことです。

なぜjQueryが必要なの?

なぜ、jQueryが必要なのでしょうか。まず、JavaScriptの一部の機能では、ブラウザによって挙動が変わる場合があります。その為、Javascriptだけで実装しようとすると、ブラウザごとの実装をしないといけないのですが、これはとても面倒です。そこで、ブラウザを意識しないで書けるjQueryを使えば、ブラウザごとに実装しなくても済むので、楽をするためにjQueryが必要というわけです。

また、複雑なJavascriptもjQueryを使えば簡単に実装できるということもあり、とても便利なライブラリの為、世界中で使われています。

jQueryで何が出来るの?

jQueryでは、スクロール量によってアイコンを出したり、クリックするとアニメーションが流れたり、マウスホバーすると色が変わったりと、Webサイトに「動きをつける」ことが簡単にできるライブラリです。

 jQueryの読み込む方法

外部ソースの読み込みは<script>タグを使用し、<body>タグの下部に記載をします。(以下はjQuery2.2.4の書き方です。jQueryは、3.Xが最新になります)

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

 jQueryの基本系

jQueryの基本は、「セレクタ」に対し、「実行タイミング」を選び、「処理」を実行するです。

jQueryの基本

「セレクタ」に対し、「実行タイミング」を選び、「処理」を実行する

そして、jQueryの基本形は以下です。

jQueryの基本形
$(function(){
  $("セレクタ").実行タイミング(function(){
    $("セレクタ").処理();
  });
});

$(function(){ 処理 });$(document).ready(function() { 処理 });を省略した形です。ready()を実行すると、DOMの読み込みが完了したタイミングで処理を実行できます。

セレクタを選ぶ

セレクタとして使えるのは、idセレクタ、classセレクタ、要素セレクタなど色々とあります。ここでは、代表的なものだけ紹介しますが、セレクタの詳細はサンプルコードも載っているこちらをご覧ください。

以下、セレクタを数種類紹介します。

idセレクタ

実行タイミングはclick()「クリック時」、処理はtext()「テキストを変更する」です。「this」は直前で指定している「”#test”」のことです。また、「return false」はリンク先に遷移しないようにする記載になります。

See the Pen basic-jquery-idSelector by Nori (@ysnoritnk) on CodePen.

classセレクタ

実行タイミングはclick()「クリック時」、処理はtext()「テキストを変更する」です。

See the Pen basic-jquery-classSelector by Nori (@ysnoritnk) on CodePen.

要素セレクタ

実行タイミングはclick()「クリック時」、処理はtext()「テキストを変更する」です。

See the Pen basic-jquery-element by Nori (@ysnoritnk) on CodePen.

直下セレクタ

ある要素の子要素だけを選択して操作できます。実行タイミングはclick()「クリック時」、処理はprepend()「要素の先頭にテキストを追記する」です。

See the Pen basic-jquery-directly-under-selector by Nori (@ysnoritnk) on CodePen.

子孫セレクタ

ある要素の子孫要素を選択して操作できます。実行タイミングはclick()「クリック時」、処理はprepend()「要素の先頭にテキストを追記する」です。直下セレクタと比較してみましょう。

See the Pen basic-jquery-progeny-selector by Nori (@ysnoritnk) on CodePen.

属性と属性値を使用してセレクタを指定する

“[属性名=’属性値’]”という形でセレクタを指定することで、特定の属性と属性値を持った要素だけを選択できます。

また、属性とともに要素名を指定することもでき、“要素名[属性名=’属性値’]”という形でセレクタを指定することができます。

以下、実行タイミングはclick()「クリック時」、処理はtext()「テキストを変更する」です。

See the Pen basic-jquery-set-attribute by Nori (@ysnoritnk) on CodePen.

変数を使用する

変数を使用することも可能です。

See the Pen basic-jquery-variable by Nori (@ysnoritnk) on CodePen.

実行タイミングを選ぶ

実行タイミングはイベントとも言います。ここでは、数種類のイベントについて紹介しますが、全てのイベントを見たい方は以下のリンクをご覧ください。イベントの詳細ではサンプルコードも載っています。

clickイベント

今までもよく出てきました。セレクタは要素セレクタ、処理はcss()「cssを変更する」です。

See the Pen basic-jquery-click by Nori (@ysnoritnk) on CodePen.

focusイベント、blurイベント

フォームなどのinput要素にフォーカスした際のイベント(focus)とフォーカスを失った際のイベント(blur)です。セレクタは要素セレクタ、処理はcss()「cssを変更する」です。

See the Pen basic-jquery-focus by Nori (@ysnoritnk) on CodePen.

基本的なjQueryの書き方は以下になります。

$(function(){
  $(セレクタ).focus(function(){
    〜フォーカスされている時の処理〜
  }).blur(function(){
    〜フォーカスから外れた時の処理〜
  });
});

hoverイベント

要素にマウスポインターが乗った時と乗った状態から離れた時のイベントです。セレクタは要素セレクタ、処理はcss()「cssを変更する」です。

See the Pen basic-jquery-hover by Nori (@ysnoritnk) on CodePen.

基本的なjQueryの書き方は以下になります。

$(function() {
  $(セレクタ).hover(function(){
    〜マウスポインターが乗った時の処理〜
  },function(){
    〜マウスポインターが離れた時の処理〜
  });
});

実行する処理を書く

最後に実行する処理です。ここが一番重要かつ、処理の種類もたくさんあります。ここでは、数種類の処理について紹介しますが、全てのイベントを見たい方は以下のリンクをご覧ください。

addClass()

classを追加します。セレクタは要素セレクタ、実行タイミングはclick()「クリック時」です。以下は、クラスを追加することでCSSが変更になっています。

See the Pen basic-jquery-addClass by Nori (@ysnoritnk) on CodePen.

animete()

アニメーションを表現します。セレクタは要素セレクタ、実行タイミングはclick()「クリック時」です。

See the Pen basic-jquery-animate by Nori (@ysnoritnk) on CodePen.

基本的なjQueryの書き方は以下です。CSSプロパティだけでも動きます。

セレクタ.animate(CSSプロパティ, duration, easing, 関数 )

durationは、アニメーションが完了するまでにかかる時間を表し、ミリ秒で指定します。
easingは、アニメーションの挙動を指定するもので、「linear」と「swing」の2種類あります。
関数は、コールバック関数を設定することができ、アニメーションの後で関数が実行されます。

fadeIn(),fadeOut()

フェードイン、フェードアウトを表現します。セレクタはidセレクタ、実行タイミングはclick()「クリック時」です。FadeOutボタンから押してみてください。

See the Pen basic-jquery-fadeIn-fadeOut by Nori (@ysnoritnk) on CodePen.

基本的なjQueryの書き方は以下です。durationだけで動きます。

セレクタ.animate(duration,関数)

最後に

いかがでしたか?

jQueryを使うと、Javascriptよりも簡単な記載でWebサイトに「動きをつける」ことができるということが体感出来たかと思います。

繰り返しになりますが、jQueryの基本は、「セレクタ」に対し、「実行タイミング」を選び、「処理」を実行する」です。このことを頭に入れ、実行タイミングや処理の引き出しを増やしていくようにすると上達の近道です。

是非一緒に取り組んでいきましょう!では!

コメント

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