jQueryを使いはじめる

JavaScriptを使ってWEBサイトを構築するなら避けては通れない「jQuery」。様々なプログラムを組む上で非常に便利です。このページでは、そんなjQueryを使いはじめる手順やちょっとした注意点などを解説します。

目次

  • WEBページで使えるようにする
  • 使い方の基礎
  • 注意点

WEBページで使えるようにする

jQueryを使うには、ページ内でjQueryのライブラリを読み込む必要があります。中身は普通のJSファイルになります。利用方法としては、

  • 自前のサーバーにファイルを入れて配信する
  • CDNを利用して読み込む
…の2つがあります。今回はCDNを利用します。

Googleにホストされているものを使う

Googleのサーバーで配信されるものを利用する場合は、こちらのページにアクセスします。


何かこだわりがない限りは、2.xバージョンで問題ないと思うので、上画像赤枠で囲ったところのタグを取得します。<script src … </script>まで取得してください。2.1.4だとこんな感じになります。

取得したタグを、jQueryを使用するページに組み込みます。このとき、jQueryを使用しているJavaScriptコード(ファイル)よりも前に配置しましょう。

code.jquery.comのものを使う

code.jquery.comのサーバーから配信されるものを使ってもいいです。その場合はこちらにアクセスします。


上画像赤枠で囲ったところのリンクを使用しましょう。こんな感じになります。

このタグを、jQueryを使用するページに組み込みます。jQueryを使用しているJavaScriptコード(ファイル)より前に配置してください。

使い方の基礎

HTMLにjQueryを読み込むタグを組み込んだ後は、jQueryを使ってのプログラミングが可能になります。CSSの内容を後から捻じ曲げたり、フォームの入力チェックをしたり、様々なことが可能です。例えば、

こんな感じのコードを組むと、画面には「jQueryでHTMLを書き換えることができます」と表示されます。なお、jQueryオブジェクトはショートカット入力で済ませることができます。上記のコードはこんな感じになります。

「jQuery」と打ち込む代わりに「$」と書けばOKです。実際にはこちらを見かけることが多いと思います。あとは実際に色々調べながら使ってみてください。適当なJavaScript解説の書籍を買ってもいいと思います。

注意点

組み込み作業の段階でもサラッと触れましたが、jQuery読み込み用のタグは、jQueryを使用しているコードの前に組み込む必要があります。例えば、前述のコードでは

このような配置にするとうまく動きません。jQueryライブラリを先に読み込まないと、jQueryを使用したプログラムは動作しないからです。

このブログを応援する・寄付する

当ブログでは暗号通貨による寄付を募っております。

Bitcoin:

Monacoin:

Litecoin: