「jQueryの読み込み」の編集履歴（バックアップ）一覧はこちら
jQueryの読み込み - (2015/05/27 (水) 21:53:52) の最新版との変更点
追加された行は緑色になります。
削除された行は赤色になります。
WEB閲覧時に、画像が切り替わったり、マウスを載せるとウインドウがでてきたり、と様々な表現ができるJQuery。今回はそのJQueryについてまとめていきます。
~
~
目次~
#contents
~
----
*JQueryとは
*JQueryのダウンロード
[[本家サイト:http://jquery.com/download/]]よりダウンロードしてください。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点がよく使われます。前者のほうが色々便利だとは思いますが、後者はわざわざダウンロードせずに気軽に使えるという利点があります。
*記述方法
**読み込み（設置方法）
&u(){HTML部方法1}
~
<head>
他の記述
<script src="/js/jquery.1.5.1.min.js"></script>
他の記述
</head>
&u(){HTML部方法2}
~
<head>
他の記述
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js?ver=3.8.1">
<!--上のように、src以降はhttpなくてもアクセスできます。-->
他の記述
</head>
**何かテストしてみる。
WEB閲覧時に、画像が切り替わったり、マウスを載せるとウインドウがでてきたり、と様々な表現ができるjQuery。今回はそのjQueryについてまとめていきます。2015年5月27日記事
~
~
目次~
#contents
~
----
*jQueryのダウンロード
[[本家サイト:http://jquery.com/download/]]よりダウンロードしてください。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選:http://millkeyweb.com/jquery-high/]]
*記述方法
**読み込み（設置方法）
&u(){HTML部方法1}
~
自分のフォルダのJQueryを呼び出す
<head>
他の記述
<script src="js/jquery.1.5.1.min.js"></script>
他の記述
</head>
&u(){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>
**何かテストしてみる。
***コード
&u(){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が実行されている証拠です。
#image(width=500,001.png)
Click meを押して・・・
#image(width=500,002.png)
このようにアラート画面がでてきたらOKです。
~
~
*まとめ
動いたらjQueryが呼び出され、動いている証拠です。次回はjQueryを基礎から学んでいきたいと思います。
[[jQueryを学ぶ1]]
