スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
jQueryの使い方
今回は、jQueryについて少し。
公式はこちら
http://jquery.com
このライブラリは、bootstrapでも使われております。
JavaScriptのライブラリは、HTMLで読み込めば使えます。HTMLは上から順番に読み込まれるので、最初に書けばソース全体で使えます。sample.htmlで最後に書いていたのは、JavaScriptを最初に読み込むと、読み込みが終わるまで次の行を読み込んでくれず、ブラウザの描画が遅くなるためです。
このように、読み込むタイミングは結構考える必要が出てきます。sample.htmlのように表示をキレイにしたいだけだったら最後のほうが良いです。HTMLの途中で使うのであれば、先に読み込んでおく必要があります。
しかしみんなが使うライブラリは、色々なホームページで毎回読み込むわけです。それってとても非効率だしインターネット全体にとって良いことではないのです。それを解決する仕組みに、CDNと言うものを利用します。CDNは色々なコンテンツを安定的に配信するネットワークのことで、無料で利用できるものもあります。
今回はGoogleとMSNとjQuery本家のCDNを紹介しときます。
GoogleのCDN
https://developers.google.com/speed/libraries/devguide?hl=ja
ここを見ると分かる通り、色々なCDNがあります。
jQueryを使う場合は、HTMLに以下のように書けば読み込まれます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
MSNのCDN
http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery使う場合は、
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
本家のCDN
http://code.jquery.com
常に最新版を使いたければ以下が使える。
http://code.jquery.com/jquery.min.js
公式はこちら
http://jquery.com
このライブラリは、bootstrapでも使われております。
JavaScriptのライブラリは、HTMLで読み込めば使えます。HTMLは上から順番に読み込まれるので、最初に書けばソース全体で使えます。sample.htmlで最後に書いていたのは、JavaScriptを最初に読み込むと、読み込みが終わるまで次の行を読み込んでくれず、ブラウザの描画が遅くなるためです。
このように、読み込むタイミングは結構考える必要が出てきます。sample.htmlのように表示をキレイにしたいだけだったら最後のほうが良いです。HTMLの途中で使うのであれば、先に読み込んでおく必要があります。
しかしみんなが使うライブラリは、色々なホームページで毎回読み込むわけです。それってとても非効率だしインターネット全体にとって良いことではないのです。それを解決する仕組みに、CDNと言うものを利用します。CDNは色々なコンテンツを安定的に配信するネットワークのことで、無料で利用できるものもあります。
今回はGoogleとMSNとjQuery本家のCDNを紹介しときます。
GoogleのCDN
https://developers.google.com/speed/libraries/devguide?hl=ja
ここを見ると分かる通り、色々なCDNがあります。
jQueryを使う場合は、HTMLに以下のように書けば読み込まれます。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
MSNのCDN
http://www.asp.net/ajaxlibrary/cdn.ashx
jQuery使う場合は、
http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js
本家のCDN
http://code.jquery.com
常に最新版を使いたければ以下が使える。
http://code.jquery.com/jquery.min.js
どこを使うのも自由です。エロぺん動画ではGoogleのを使ってます。CDNによってSSLが使えたり最新版じゃなかったり、色々良し悪しあります。
せっかくなのでjQuery公式のサンプルを載せときます。
もう一つ。
jqueryの読み込み部分は、利用したいCDNに合わせて変更して下さい。
次回はこのjQueryを利用し、自分用のサイトを編集してみようと思います。
せっかくなのでjQuery公式のサンプルを載せときます。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
// Your code goes here
</script>
</body>
</html>
もう一つ。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<a href="http://jquery.com/">jQuery</a>
<script src="jquery.js"></script>
<script>
$( document ).ready(function() {
$( "a" ).click(function( event ) {
alert( "The link will no longer take you to jquery.com" );
event.preventDefault();
});
});
</script>
</body>
</html>
jqueryの読み込み部分は、利用したいCDNに合わせて変更して下さい。
次回はこのjQueryを利用し、自分用のサイトを編集してみようと思います。
- 関連記事
