WEB閲覧時に、画像が切り替わったり、マウスを載せるとウインドウがでてきたり、と様々な表現ができるjQuery。今回はそのjQueryについてまとめていきます。2015年5月27日記事

目次



jQueryのダウンロード

本家サイトよりダウンロードしてください。minのタイプがオススメです。 バージョンがころころ変わりますので、マウスを載せるとファイル名が表示されるので1.XX.X.min.jsか2.XX.X.min.jsというファイルをダウンロードするようにしてください。

Version1とVersion2の違い

Version1はIE8以前をサポートしたもの
Version2はIE8以下を切り捨て、最近のブラウザで高速に使えるようにしたもの
です。各自お好きな方をDLしてください。

HTMLのheadに記述

ダウンロードしたファイルをアクセスできるところに置きます。 設置方法は主に二つあります。

  1. 自分の管理しているフォルダに置く
  2. Googleに設置してあるファイルを使う
    例:http//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
    以上の2点がよく使われます。前者のほうが色々便利だとは思いますが、後者はわざわざダウンロードせずに気軽に使え、さらに高速に使えるという利点があります。 参考記事:jQuery高速化!処理速度を10倍上げるテクニック20選

記述方法

読み込み(設置方法)

HTML部方法1
自分のフォルダのJQueryを呼び出す

<head>
他の記述
<script src="js/jquery.1.5.1.min.js"></script>
他の記述
</head>

HTML部方法2
GoogleのJQueryを呼び出す

<head>
他の記述
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<!--上のように、src以降はhttpなくてもアクセスできます。-->
他の記述
</head>

何かテストしてみる。

コード

HTML部

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>JQueryテスト</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">

$(function() {
  $("p").click(function(){
    alert("Hello JQuery");
  });
});

</script>
</head>
<p>Click me!<p>
<body>

</body>
</html>

結果

Click meを押して、アラート画面がでてきたらjQueryが実行されている証拠です。

Click meを押して・・・

このようにアラート画面がでてきたらOKです。

まとめ

動いたらjQueryが呼び出され、動いている証拠です。次回はjQueryを基礎から学んでいきたいと思います。 jQueryを学ぶ1

最終更新:2015年07月12日 03:52
添付ファイル