jQueryの読み込み - nicepaper @ ウィキ - atwiki（アットウィキ）

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

目次

jQueryのダウンロード
- Version１とVersion２の違い
HTMLのheadに記述
記述方法
- 読み込み（設置方法）
- 何かテストしてみる。
  - コード
  - 結果
まとめ

jQueryのダウンロード

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

Version１とVersion２の違い

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

HTMLのheadに記述

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

自分の管理しているフォルダに置く
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>