< スポンサーリンク >
jQueryを使えるようにする
jQueryとは、JavaScriptを簡単に使えるようにするためにのライブラリです。
DOM操作やCSS操作、Ajaxなどが簡単になります。
jQueryを使えるようにするには2つの方法があります。
1.LAN環境では、jQueryのサイトからライブラリをダウンロードし、サーバーの任意の場所に保存して使います。
2.jQueryやGoogle、MicrosoftのCDNを使います。
インターネット環境では2が便利です。
jQueryのバージョンは、jQuery1とjQuery2がありますが、jQuery2 ではIE8以下をサポートしない分軽いみたいです。
リリアの職場では、ローカルな環境ですし、PCも古いものが頑張っているので、まだまだIE8以下も活躍しています。
全てのPCがIE9以上になったら、jQuery2を使ってみようと思います。
LAN環境の設定
htmlファイルの中の<head></head>の間に<script src=”jquery-1.xx.x.min.js”></script>を書き込めばOKです!
※「xx」はバージョンの数字です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="jquery-1.xx.x.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="jquery-1.xx.x.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
インターネット環境の設定
jQuery CDNを使う場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
Google CDNを使う場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
Microsoft CDNを使う場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サイトタイトル</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.1.4.min.js"></script>
</head>
<body>
サイトの中身
</body>
</html>
< スポンサーリンク >