のんびりしているエンジニアの日記

ソフトウェアなどのエンジニア的な何かを書きます。

JQuery(1) 導入のすすめ

Sponsored Links

皆さんこんにちは
お元気ですか?私は眠いです。

さて、本日はWebでよく使われるJQueryについて見てみましょう。

JQueryとは

オープンソースのJavaScriptライブラリの一つ。2006年1月にJohn Resig氏が
最初のバージョンを公開し、現在は有志プログラマによる開発者集団「jQuery Team」が
開発・メンテナンスしている。(E-wordsより)

端的にいうとJavascriptで複雑にしなければできないことを、簡単にできるようにするライブラリみたいなイメージです。JQueryを使ったライブラリとかもあります。

version

IEFirefoxのバージョンによって挙動が変化する場合があるので、注意してください。
新しいJQueryだと古いブラウザで動作しないことが稀にあるようです。

JQuery導入の方法

urlをはりつける方法

googleホスティングしているurlを利用する。この場合ローカルで扱いたい時にネットワークが繋がっていないと利用できない。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

おばけをクリックすると文字が変更されます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<title>おばけ</title>
<script>
$(function() {
  $('p').click(function(){
  	$(this).html('きゅーちゃん');
  });
});
</script>
</head>
<body>
<p>おばけー</p>
</body>
</html>

自分でダウンロードする方法

まずは、JQueryのページへ移動(Download jQuery | jQuery
f:id:tereka:20140614010757p:plain

ダウンロードページを開いて、全体選択+コピー。
ローカルにjquery.jsと保存。後は相対パスを入れるだけ

compressが圧縮、uncompressが非圧縮(綺麗にコード書いているか?程度の違いしかありません)

<script src="./jquery.js"></script>

以下が全文です

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="./jquery.js"></script>
<title>おばけ</title>
<script>
$(function() {
  $('p').click(function(){
  	$(this).html('きゅーちゃん');
  });
});
</script>
</head>
<body>
<p>おばけー</p>
</body>
</html>

この場合だとローカルでの開発は簡単ですね。