スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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
どこを使うのも自由です。エロぺん動画ではGoogleのを使ってます。CDNによってSSLが使えたり最新版じゃなかったり、色々良し悪しあります。

せっかくなので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を利用し、自分用のサイトを編集してみようと思います。
関連記事

コメントの投稿

非公開コメント

プロフィール

エロぺんぎん

管理人:エロぺんぎん
不純な動機でプログラマーになった男、エロぺんぎんです。ブラザー達を猛烈に応援したい気持ちと、自分もプログラマーとして成長したい思いで、当ブログを立ち上げました。
エロぺん動画を運営しております。

検索フォーム
Twitter
最新記事
最新コメント
カテゴリ
リンク
RSSリンク
エロぺん動画で人気の動画
人気の記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。