最速5分見積
もり

ブログ

  1. トップ
  2. ブログ
  3. 【初心者必見】jQueryの基礎を徹底解説

jQuery

【初心者必見】jQueryの基礎を徹底解説

jQuery使い方をお調べですね。

jQueryは、html・cssと比べると習得する難易度が上がりますが、html・cssでは表現できない動的な機能を実装できます。

本記事では、基本的なjQueryの使い方からプラグインの使い方などを紹介します。

最後までお読みいただければ、jQueryの基礎を理解することが可能です。

「jQueryを記述したことがない・jQueryをこれから勉強する」という肩は、ぜひ参考にしてください。

jQueryの読み込み

まずは、jQueryの読み込みをおこないましょう。

jQueryの読み込見方法は、2つあります。

・ファイルをダウンロードして読み込む
・CDNを利用して読み込む

順番に読み込み方法を説明します。

ファイルをダウンロードして読み込む方法

ファイルをダウンロードして読み込むために、公式サイトにアクセスしましょう。

公式サイトURL:https://jquery.com/

公式サイトにアクセスしたら右側に表示されている「Download jQuery」をクリック。

jQuery使い方

現在(2018年7月12日)の最新バージョンは、「Download the compressed, production jQuery 3.3.1」です。

今回は、このバージョンのjQueryを使用します。

内容をダウンロードできたら、「js」フォルダを作成してその中に保存します。

ダウンロードしたファイル名は、「jquery.min.js」に書き換えるのがおすすめです。

jQueryの読み込みをおこなうコードを記述しましょう。

    <script src="js/jquery.min.js"></script>
</body>

jQueryを読み込むコードはbodyタグの閉じタグの前に記述するのが一般的です。

理由は、jQueryの読み込みには時間がかかるからです。

bodyタグの閉じタグ直前に記述することで、表示スピードを上げることができます。

CDNを利用して読み込む

CDNを利用してjQueryを読み込む方法は、とても簡単です。

先ほどと同じように、公式サイトにアクセスします。

公式サイトURL:https://jquery.com/

jQueryのCDNは、数種類あります。

jQueryのCDN

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

GoogleのCDN

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

MicrosoftのCDN

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>

CDNのコードもbodyタグの閉じタグの直前に記述しましょう。

これでjQueryの読み込みは完了です。

jQueryの記述

jQueryの読み込みが完了したら、実際にjQueryを記述していきましょう。

先ほど作成した「js」フォルダの中に新しいファイルを作成します。

そのファイルの中にjQueryのコードを記述していきます。

新しいファイルの名前は任意で構いませんが、ここでは「main,js」と設定。

htmlファイルにmain.jsを読み込むコード記述をします。

    <script src="js/main.js"></script>
</body>

main.jsファイルを開き、jQueryのコードを記述します。

jQeuryを記述するためには、以下のような定型文を記述することが必要です。

$(document).ready(function(){
   この部分にjQueryの処理を記述
});

jQueryのコードは、htmlの読み込みが終わった後に実行されます。

readyという名前のように「準備できたら実行する」という意味です。

このコードは省略して記述することが可能です。

$(function(){
   この部分にjQueryの処理を記述
});

文頭の「(document).ready」は省略して記述することが可能です。

一般的には、このように省略した形で記述します。

cssメソッドを使ってjqueryの使い方を解説していきます。

html

<h2>この部分は赤色になります。</h2>
<h3>この部分は黒色のままです。</h3>
<p>この部分は黒色のままです。</p>

jQuery

$(function(){
   $(h2).css("color","red");
});

このコードは、「h2」セレクタを指定して文字色を赤色にするための記述です。

このように、要素を指定して、メソッドを指定することで変化させることができます。

jQueryで使用できるメソッドを紹介します。

htmlメソッド

htmlメソッドは、文字列の書き換えや文字列を取得することが可能です。

<script>
$(function(){
  alert($("#sample").html());
});
</script>

<p id="sample">サンプル</p>

このように記述すれば、「#sample」の文字列を取得してアラートウィンドウで表示されます。

textメソッド

textメソッドは、文字列の追記・書き換えが可能になるメソッドです。

<script>
$(function(){
  alert($("#sample").text("ここの文字列が表示されます。"));
});
</script>

<p id="sample"></p>

attrメソッド

html要素の属性を指定して、値の「取得・変更・削除」が可能です。

汎用性が高いメソッドになり、多くの場面で使用されます。

<script>
$(function(){
  alert($("#sample").attr("class"));
});
</script>

<p id="sample" class="sample2">サンプル</p>

アラートウィンドウで「sample2」と表示されます。

また、このようなコードを記述することで属性を追加することが可能です。

<script>
$(function(){
  $("#sample").attr("class","sample2");
});
</script>

<style>
.sample2{color: red;}
</style>

<p id="sample">サンプル</p>

上記のコードは、「id=”sample”」に「class=”sample2″」を追加しています。

以下のようなコードを記述することで要素を空にすることも可能です。

<script>
$(function(){
  $("#sample").attr("class","");
});
</script>

<style>
.sample2{color: red;}
</style>

<p id="sample"　class="sample2">サンプル</p>

上記のコードは、pタグに「class=”sample2″」が付与されているので、通常は文字色が赤色になります。

しかし、attrメソッドでclass属性の値を空にしているので、スタイルが適用されません。

prependメソッド

prependメソッドは、指定したセレクタの先頭に文字列などを追加することができます。

<script>
$(function(){
  $("#sample").prepend("注意！");
});
</script>

<p id="sample">足元に段差があります</p>

<!--「注意！足元に段差があります」と表示されます。-->

このように記述することで、「足元に段差があります」の前に「注意!」という文字列が追記されます。

beforeメソッド

beforeメソッドは、指定したセレクタの前に要素を追加することが可能です。

prependメソッドとbeforeメソッドの違いは、要素や文字列を追加する位置の違いです。

・prependメソッドは、指定したセレクタの先頭に要素や文字列を追加する
・beforeメソッド、指定したセレクタの前に要素や文字列を追加する

<script>
$(function(){
  $("#sample").before("注意！");
});
</script>

<p id="sample">足元に段差があります</p>

<!--「注意！-->
<!--足元に段差があります」と表示されます。-->

このようにbeforeメソッドは、指定したセレクタの前に要素を追加します。

appendメソッド

appendメソッドは、指定したセレクタの後ろに要素を追加することが可能です。

<script>
$(function(){
  $("#sample").append("注意！");
});
</script>

<p id="sample">足元に段差があります</p>

<!--「足元に段差があります注意！」と表示されます。-->

このように記述することで、「足元に段差があります」の後に「注意!」という文字列が追記されます。

afterメソッド

afterメソッドは、指定したセレクタの後に要素を追加することが可能です。

prependメソッドとafterメソッドの違いは、要素や文字列を追加する位置の違いです。

・appendメソッドは、指定したセレクタの末尾に要素や文字列を追加する
・afterメソッド、指定したセレクタの後に要素や文字列を追加する

<script>
$(function(){
  $("#sample").after("注意！");
});
</script>

<p id="sample">足元に段差があります</p>

<!--足元に段差があります」と表示されます。-->
<!--「注意！-->

このようにafterメソッドは、指定したセレクタの後に要素を追加します。

emptyメソッド

指定したセレクタの子要素を全て削除できるのがemptyメソッドです。

<script>
$(function(){
  $("#sample").empty();
});
</script>

<div id="sample">
<p>この部分は削除されます。</p>
<p>この部分は削除されます。</p>
<p>この部分は削除されます。</p>
</div>

removeメソッド

removeメソッドは、指定したhtml要素を削除することが可能です。

先ほど説明したemptyメソッドは、指定したセレクタの子要素だけです。

しかし、removeメソッドは全ての要素を削除することができます。

<script>
$(function(){
  $("#sample").remove();
});
</script>

<p id="sample">この部分は削除されます。</p>

メソッドチェーン

メソッドチェーンは、鎖のようにメソッド繋ぐことです。

メソッドチェーンを使用することで、同じ要素に複数のメソッドを適用できます。

簡単な例文を使ったメソッドチェーンを解説します。

<script>
$(function(){
  $("#sample").html("この部分が赤色で表示されます。").css("color","red");
});
</script>

<p id="sample"></p>

メソッドチェーンを記述することで、複数のメソッドを同時に使用することが可能です。

イベント

イベントを使用することで処理をおこなうタイミングを指定できます。

イベントの種類はたくさんありますが、ここでは頻繁に使用する重要なイベントだけを紹介します。

onイベント

onイベントは、click・mouseover・changeなどのイベントプロパティを自分で設定できます。

<script>
$(function(){
  $("#sample").on("click",function(){
   alert("クリックされました。");
  });
});
</script>

<button id="sample">ここをクリックするとウィンドウが開きます。</button>

onイベントを使う理由

jQueryではonイベントを使用しなくても、同じ処理がおこなわれるように記述することが可能です。

onイベント

<script>
$(function(){
  $("#sample").on("click",function(){
   alert("クリックされました。");
  });
});
</script>

<button id="sample">ここをクリックするとウィンドウが開きます。</button>

clickイベント

<script>
$(function(){
  $("#sample").click(function(){
   alert("クリックされました。");
  });
});
</script>

<button id="sample">ここをクリックするとウィンドウが開きます。</button>

この2つのコードは、onイベント・clickイベントどちらを使用しても正常に処理がおこなわれます。

しかし、一般的にはonイベント使って記述されるっことが多いです。

大きな理由としは、汎用性が高く、拡張しやすいからです。

例えば、onイベントを使用した場合は、offイベントを使ってイベントを削除することもでき、メソッドを付与することもできます。

clickイベントを使用した場合は、他のイベントやメソッドを付与できません。

なので、clickイベントよりもonイベントを使用するこkとが多いです。

offイベント

offイベントは、イベントを削除できるイベントです。

下記のようなコードをイベント削除できます。

<script>
$(function(){
  $("#sample").on("click",function(){
   alert("クリックされました。");

  $("#sample").off("click");
   alert("イベントが削除されました。");
　　　　　});
});
</script>

<button id="sample">ここをクリックするとウィンドウが開きます。</button>
<!--1度クリックしたあとは、イベントが削除されます。-->

clickイベント

clickイベントは、その名前の通り指定したセレクタをクリックしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").click(function(){
   alert("クリックされました。");
  });
});
</script>

<button id="sample">ここをクリックするとウィンドウが開きます。</button>

dbclickイベント

dbclickイベントは、指定したセレクタをダブルクリックしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").dbclick(function(){
   alert("クリックされました。");
  });
});
</script>

<button id="sample">ここをダブルクリックするとウィンドウが開きます。</button>

mouseupイベント

mouseupイベントは、指定したセレクタをマウスアップしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").mouseup(function(){
   alert("マウスアップされました。");
  });
});
</script>

<button id="sample">ここをマウスアップするとウィンドウが開きます。</button>

mousedownイベント

mousedownイベントは、指定したセレクタをマウスアップしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").mousedown(function(){
   alert("マウスダウンされました。");
  });
});
</script>

<button id="sample">ここをマウスダウンするとウィンドウが開きます。</button>

mousemoveイベント

mousemoveイベントは、指定したセレクタをマウスムーブしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").mousemove(function(){
   alert("マウスムーブされました。");
  });
});
</script>

<button id="sample">ここをマウスムーブするとウィンドウが開きます。</button>

mouseoverイベント

mouseoverイベントは、指定したセレクタをマウスオーバーしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").mouseover(function(){
   alert("マウスオーバーされました。");
  });
});
</script>

<button id="sample">ここをマウスオーバーするとウィンドウが開きます。</button>

hoverイベント

mouseoverイベントは、指定したセレクタをマウスオーバー ・マウスアウトしたときに処理がおこなわれるイベントです。

<script>
$(function(){
  $("#sample").hover(function(){
   function(){
     $("sample2").css("color","red");
  },
 function(){
     $("sample2").css("color","black");
  }
  };
});
</script>

<button id="sample">ここをマウスオーバー・マウスアウトすると処理がおこなわれます。</button>
<p id="sample2">マウスオーバーで文字色が赤色・マウスアウトで文字色が黒色になります。</p>

resizeイベント

resizeイベントは、ウィンドウの幅が変更されたときに処理がおこなわれます。

<script>
$(function(){
  $(window).resize(function(){
    $("p").css("color","red");
  });
});
</script>

<p>ウィンドウの幅が変わると、この部分の文字色が赤色に変化します。</p>

scrollイベント

scrollイベントは、WEBサイトがスクロールされたときに処理がおこなわれます。

<script>
$(function(){
  $(window).scroll(function(){
    $("p").css("color","red");
  });
});
</script>

<p>スクロールされると、この部分の文字色が赤色に変化します。</p>
<p>スクロールされると、この部分の文字色が赤色に変化します。</p>
<p>スクロールされると、この部分の文字色が赤色に変化します。</p>
<p>スクロールされると、この部分の文字色が赤色に変化します。</p>
<p>スクロールされると、この部分の文字色が赤色に変化します。</p>
<p>スクロールされると、この部分の文字色が赤色に変化します。</p>

windowとは

先ほど紹介したresizeイベントやscrollイベントで使用した「window」を紹介します。

sindowを使用することで、以下のような情報を取得できます。

・リサイズ
・スクロール
・URL
・画面の拡大、縮小
・ウィンドウの縦横幅

アニメーションメソッド

ここからは、フェードイン・フェードアウトなどを実装できる方法を紹介します。

hideメソッド

　hideメソッドは、指定して要素を非表示にするためのメソッドです。

<script>
$(function(){
  $("#sample").hide('slow');
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<div id="sample"></div>

このように記述すると要素がスローで非表示になります。

showメソッド

　showメソッドは、指定して要素を表示にするためのメソッドです。

<script>
$(function(){
  $("#sample").show('slow');
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<div id="sample"></div>

このように記述すると要素がスローで表示されます。

clickイベントとhide・showを使う

<script>
$(function(){
  $("#sample").on("click",function(){
  $("#box").show('slow');
  });
  $("#sample2").on("click",function(){
  $("#box").hide('slow');
  });
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<button id="sample">表示</button>
<button id="sample2">非表示</button>
<div id="box"></div>

このように記述することで、ボタンを使った表示・非表示が可能です。

fadeInメソッド

fadeInメソッドは、showメソッドと同じように指定した要素を徐々に表示できます。

<script>
$(function(){
  $("#sample").fadeIn('slow');
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<div id="sample"></div>

fadeOutメソッド

fadeOutメソッドは、hideメソッドと同じように指定した要素を徐々に表示できます。

<script>
$(function(){
  $("#sample").fadeOut('slow');
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<div id="sample"></div>

animateメソッド

animateメソッドは、指定した要素を自由に移動させることが可能です。

<script>
$(function(){
  $("#sample").animate({
    'marginLeft':'500px'
  });
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<div id="sample"></div>

このように記述することで、右に500px移動します。

複数のプロパティを同時に指定することも可能です。

<script>
$(function(){
  $("#sample").animate({
　　　　　　　　'width':'50px'
　　　　　　　　'height':'50px'
    'marginLeft':'500px'
  });
});
</script>

<style>
#sample{
width: 100px;
height: 100px;
background-color: red;
}
</style>

<div id="sample"></div>

上記のように記述することで、要素の大きさが半分になりながら右に移動します。

jQueryおすすめのプラグイン

jQueryでよく実装されるおすすめのプラグインを紹介します。

スライダー系でおすすめのプラグインはslick

jQuery使い方

レスポンシブにも対応しており、カスタマイズ性に優れたスライダー系のプラグインです。

簡単に実装できるので、jQueryに不慣れな方も使用できます。

slick公式サイトURL:http://kenwheeler.github.io/slick/

ポップアップ系でおすすめのプラグインはcustombox

jQuery使い方
customboxは、様々なエフェクトを用意しており、そのサイトに合ったエフェクトを選ぶことができます。

Internet Explorer・Chrome・Safari・Firefoxなど主要なブラウザに対応しています。

custombox公式サイトURL:http://dixso.github.io/custombox/

まとめ

いかがでしたか？

jQueryを使いこなすことで、ワンランク上のWEBサイトを制作できます。

また、プラグインを使用すれば、簡単に機能を実装することが可能です。

おしゃれなWEBサイトに欠かせないスキルなので、ぜひ習得してくださいね。