.net column

.NET開発者のためのブログメディア
Webの開発ツール

jQuery初心者のための書き方講座その1【セレクタとメソッド】

2020年04月20日

jQueryとはホームページの制作などで使用される、JavaScriptのライブラリです。よく使われる処理や機能がまとめられており、自力で実装せずとも呼び出すだけで簡単に利用できます。この記事では初心者にも人気の言語である、jQueryの基礎を紹介していきます。

SE
サイト制作でjQueryを使うことになったのですが、どういう言語なのでしょうか?
PL
一言でいうならJavaScriptのライブラリですね。まずは基本構文と基本的なセレクタとメソッドから触れていきましょうか。

jQueryの基本構文

jQueryを利用するには以下の二つの方法があります。

  1. 公式サイトからファイルをダウンロードして利用する
  2. インターネットを通じてファイルを利用できる「CDN」を使う

公式サイトからダウンロードする場合は、jQueryのファイルを管理するフォルダにあらかじめダウンロード・保存しておきましょう。あとは、ソースコード内の宣言部分にjQueryファイルの格納先を指定するだけです(ほかのサーバーにあるjQueryを利用する場合も、格納先のパスを記述します)。

jQueryを利用するための基本構文

  1. 公式サイトからファイルをダウンロードした場合
  2. ※srcの「x.x.x」にはjQueryのバージョンが入ります。
    srcの部分に、利用したいjQueryが格納されているパスを指定します。例で示している「js/jquery-x.x.x.min.js」だと、jQueryの格納場所は「jsフォルダの中の” jquery-x.x.x.min.js”というファイル」です。

  3. CDN(コンテンツデリバリーネットワーク)を利用する場合
  4. 現在、jQuery は「jQuery」「Google」「Microsoft」の三つのCDNで提供されています。「jQuery」のCDNを利用する場合、宣言は以下のようになります。

    ※srcの「x.x.x」にはjQueryのバージョンが入ります。
    CDNを利用する場合、srcには公式サイトのURLが入ります。インターネット経由でjQueryのファイルを見に行くため、ファイルをダウンロードする必要はありません。

jQueryは実行するプログラムの前に読み込む

jQueryを読み込む宣言は、必ず使用するJavaScriptの宣言より前に記述する必要があります。HTMLでは必ず上から順に読み込まれるので、使用するJavaScript本体よりも後に読み込むとエラーになってしまいます。

jQueryの宣言後に、利用するJavascriptの宣言を行います。

ここで宣言している二つのファイルには、それぞれ使用している定義の優先順位があります。逆の場合は、読込みエラーになるので注意が必要です。

セレクタとメソッドの概要

セレクタはjQueryにおける操作対象を指すものであり、複数の指定方法があります。メソッドは、セレクタで指定された要素に対して行う処理で、「セレクタで要素指定→メソッドで処理」というのがjQueryにおける基本的な流れです。

セレクタとメソッドの基本的な使い方

セレクタの指定方法は、①id、②クラス、③タグ名でそれぞれ異なります。

①idを指定

②クラスを指定

③タグを指定(pタグの場合)

SE
jQueryにおいては、まずセレクタとメソッドを理解しないといけませんね。
PL
はい。jQueryの根幹になる部分ですから、しっかり使いこなせるようにしましょう。

セレクタとメソッドを使いこなそう

jQueryのセレクタやメソッドを使いこなすことで、どのように動いているかが分かってきます。また、分岐やループ、演算処理などと併せて理解することで作りたい処理を作成することできます。自身で作る場合には、初めは他のコードの動作を見ながら、どのようにして動いているかを参考に組み上げていくのがポイントです。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

求人一覧

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)