jQueryとは？

jQueryとは、javascriptのライブラリ、javascriptの命令を簡単に扱えるようにするための外部ファイル（jsファイル）のことです。

jQueryをhtmlファイルに外部ファイルとして読み込むことで、今までjavascriptの命令を長々書いていた処理を、jQueryの命令を使えば、jQueryがjavascriptの命令としてブラウザに認識してくれるように自動修正（短い命令を本来の長い命令へ）してくれるわけです。

javascriptがマニュアル車としたらjQueryはオートマ車と言った感じですかね。

jQueryのDLと読み込み

jQueryはjavascriptのファイルとして、htmlの<head></head>内で読み込んで使います。

以下からダウンロードできます。（Productionを選択）

jQuery
<--HTML-->
<head>
<meta http-equiv="Content-Script-Type" content="text/javascript" charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.6.1.min.js" charset="utf-8"></script>
</head>
</body>
	略
<script type="text/javascript" src="js/aaa.js" charset="utf-8"></script>
</body>
  • 3行目でjavascriptを使用するという宣言をしています。
  • 4行目でjqueryのファイルを読み込んでいます。これを読み込まないことにはjQueryのすべての命令を使用することはできません。
  • 8行目はjqueryで動作させるjsファイル（適当にaaa.jsと名前をつけました）を読み込んでいます。読み込んだjQueryの命令は、body内でボタンのクリック等のイベントがあると実行されて、処理されます。

<script></script>でくくってHTML内に記述して実行することもできますが、ファイルはなるべく外部ファイルとして呼び出したほうがブラウザのキャッシュの面で都合がいいです。

ファイルのパスの部分は、jsファイルが置いてあるディレクトリを指定してください。jqueryのバージョンも好きなバージョンを使用してください。あまりに古いとプログラムの動作に支障が起こる事があります。

また、jQueryのライブラリをわざわざDLして読み込まなくてもGoogleDevelopersのサイトから絶対パスで読み込んで実行させることも可能です。 

<!--HTML-->
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>

jQueryの基本的な構文を理解するために、ボタンのクリックで文字の大きさを変えるスクリプトを考えて見ます。

jQueryの使い方

//jsファイル内（jQuery）
$(function(){
    $("button#z2").click(function(){
    $("span#z1").css("fontSize","10px");
    });
    $("button#z3").click(function(){
    $("span#z1").css("fontSize","30px");
    });
});

ボタンをクリックするというイベントが起こると、jQueryの命令が実行されて、セレクタのfont-sizeの値を小文字（10px）または大文字（20px）に変えます。（z1,z2,z3は適当なID名です）

jQueryでもjavascriptでもセレクタのハイフンは省略されてラクダ式（単語の先頭が大文字：font-size→fontSize）での記述となりますゆえ注意してください。

このように、各セレクタに対するイベント命令と各セレクタに対する処理命令の組み合わせがjQueryの命令の一つの単位となります。

$(document).ready(function(){処理});という命令は、HTMLドキュメント全体が読み込まれたら｛｝内の処理を行うという命令です。

documentセレクタに対し、readyというイベント命令を指定し、spanセレクタのスタイルを20pxに変える処理を行なっています。

$(document).ready(function(){});は、以下の様に省略することができます。（灰色の部分は省略部分）

このready命令が、jQueryの命令の入れ物のような形になって、jQuery全部の命令を全てのHTMLが読み込まれたタイミングで実行するという大きなイベント発火スクリプトとして働いています。

このようにjQueryの命令はbodyまで読み終わってから実行という形をとるため、head内に記述しても実行速度が低下するだけのような気がするため、管理人は/body直前で外部ファイルを読み込んでいます。

新規にjsファイルを作ったら、何も考えずready命令を先に記述しておきましょう。

ちなみに、文字の大きさを変える上記のスクリプトをjavascriptを使用して記述すると、 

//jsファイル内（javascript）
document.getElementById("z2").onclick = function(){
    document.getElementById('z1').style.fontSize = "10px";
}
document.getElementById("z3").onclick = function(){
    document.getElementById('z1').style.fontSize = "20px";
}

のようになります。javascriptでは、ID名でなくclassで指定したいとき、getElementByIdは使えないからちょっと不便です。

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ