jQueryの使い方とバージョンの違いについて

javascriptを使用するに当たって、jQueryという言葉を聞かないという人はいないと思います。

それほどに浸透したjQueryですが、そもそもjQueryとは何なのか?どうやって使えばいいのか?わからない人も多いと思います

なので、簡単にjQueryとはどういったものか、そして、どうやってjQueryを使うのか、その使い方を紹介します。

jQueryの始め方
  1. jQueryとは
  2. jQueryの使い方
  3. jQueryを使い始める前に確認する2つのこと
  4. jQueryの確認

jQueryとは

jQueryとは、一言でいうとjavascriptのライブラリです。

なかにはフレームワークと呼ぶ人もおり、jQueryの使用用途としてはフレーワークのほうが正しいのかも知れません。

フレームワークとは

フレームワークとは、プログラムを行う上での骨組み(文法/規則など)となるものです。

jQueryは独自の文法などがあるため、フレームワークという呼ばれ方をすることがあります。

ライブラリとは

ライブラリとは、複数のプログラム部品を一つのファイルにまとめたものです。小さな関数郡の集まりといえるものです。

jQueryはjavascriptを利用して作られたライブラリを読み込ませることで使用するため、javascriptのライブラリといわれています。

実行形態はライブラリ使用方法はフレームワークに近いことから「ライブラリ」「フレームワーク」の2つの呼ばれ方をします。

jQueryの使い方

1.jQueryのサイトに行きます。

Jquery1

2.jQueryのライブラリをダウンロードします。
Jquery2

3.ダウンロードしたファイルを任意のフォルダに配置しHTMLファイルの<head>に以下を記述し完了です。

<script type="text/javascript" src="・・・/jquery-2.0.3.min.js"></script>

jQueryを使い始める前に確認する2つのこと

jQueryをダウンロードする前に、バージョン/使用用途の2点を確かめてダウンロードして下さい。

バージョン
jQuery 1.X系IE8以下もサポートする
jQuery 2.X系IE8以下のモダンブラウザはサポートしない

jQuery 2.x系は最新版で1.x系より機能的に優れてはいますが、IE8以下のモダンブラウザは切り捨てて作られています。IE8でも利用したい場合は1.x系を使用しましょう。

使用用途
production jQueryライブラリの使用のみ。改行等を削除して軽くしています。
development jQueryライブラリの開発・デバック等を行う。改行等はそのままで、上記に比べ容量が大きくなっています。

jQueryの確認

jQueryの確認用コードの載せておきますので、使ってください。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="./jquery-2.0.3.min.js">
        </script>
    </head>
    <body>
        <h1>jQueryのテスト</h1>

        <script type="text/javascript">
            if(typeof jQuery != "undefined"){
                $(function(){
                    alert('読み込み完了。jQueryが使用できます。')
                });
            }
        </script>
    </body>
</html>

アラートが上がればjQueryの読み込みが完了です。

divider

Trackback URL

http://webnonotes.com/javascript-2/jquery/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>