今すぐ覚えておきたい!jQueryの基本の書き方【初心者向け】

プログラミング初心者向けに、jQueryの基本的な書き方を解説しています。導入から実際にコーディングする部分を説明しています。JavaScriptライブラリの中でも非常に便利で初心者の方でも覚えやすいので、使えるようにしておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

JavaScriptのライブラリであるjQueryの基本の書き方について紹介します。

jQueryは、JavaScriptよりもコーディングの分量が少なくイベントの処理を行うことができます。初心者の方でも手軽に利用できるので、覚えておくと良いでしょう。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

jQueryの基本構文

jQueryは読み終わった後に実行される必要があるため、jQueryの処理は以下のように記述しましょう。

jQuery

jQuery(document).ready(function(){
 //jQueryで実行する内容
 });

「jQuery」の部分は省略して「$」と記述することが一般的です。しかし、今話題のWordPressでは、jQueryの部分を省略せずに記述します。

上記に書いてある「セレクタ」はCSSとほぼ同じものが使用できると思っていてください。

上のコードはちゃんと書いたjQueryです。省略できるところがまだあり、「$(document).ready()」のショートカットである下記の記述でも動きます。

メソッド(ready)の位置には、特定のイベントを設定することができ、は以下のようなものがあります。

  • click
  • dblclick
  • mousedown
  • mouseover

上記以外にも多くのイベントが存在します。

 

大石ゆかり

イベントというのは何でしょうか?

田島悠介

ボタンやHTMLの領域をクリックしたり、何か動作したときに特定の処理をするように設定できるんだ。

大石ゆかり

JavaScriptにもありましたね。jQueryだと簡単に書けたりするんですか?

田島悠介

そうそう。イベントではないけど、jQueryを簡単に使ってみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

簡単なメソッドを実際に使ってみよう

実際にjQueryを書いてみましょう。同一階層に、jQueryを置いてください。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery.min.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <ul>
      <li id="sample">sample_textsample_text</li>
      <li>sample_textsample_text</li>
      <li>sample_textsample_text</li>
      <li>sample_textsample_text</li>
      <li>sample_textsample_text</li>
    </ul>
    <script>
      $("#sample").css("color","#d9534f");
    </script>
  </body>
</html>

今回の例はイベントではなく、メソッドから、CSSを指定して、色を変更しました。

上記のようにjQueryを利用しますが、headにおくとうまく作動しません。それはまだ「body」の内容を読んでいなうちには実行できないためです。

そのために、「.ready」という関数を使います。

関数を使ったソースは以下の通りです。HTMLファイルとは別に「sample.js」というファイルを用意してHTMLファイルから読み込みましょう。

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
    <title>jQuery</title>
  </head>
  <body>
    <ul>
      <li id="sample">sample_textsample_text</li>
      <li>sample_textsample_text</li>
      <li>sample_textsample_text</li>
      <li>sample_textsample_text</li>
      <li>sample_textsample_text</li>
    </ul>
  </body>
</html>

JavaScript

$(document).ready(function(){
  $("#sample").css("color","#d9534f");
});

jQueryの基本的な構文については以上です。

jQueryは使えるとWebコーディングの幅が広がるライブラリなので、ぜひともマスターしてみてください。

 

大石ゆかり

$()の間に、#sampleがありますね。

田島悠介

$()の間に書く物によって動作が変わるんだけど、このサンプルの場合はdocument.getElementById(“sample”);と同じ動作になってるんだ。

大石ゆかり

idによって取得したエレメントオブジェクトをcss関数を使って色を変えてるんですね。

田島悠介

その通り!$()の中には、HTMLのタグを書いたりも出来るし、その他に色々な指定が出来るんだ。

 

[お知らせ]TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。jQueryを使ってリッチなWebサービスを作りたい方はぜひご覧ください。