jQuery (2) | hiro345

jQueryの使い方その２です。

jQueryはJavaScriptプログラムなので、ライブラリを読み込んでから、独自のプログラムを別ファイルから読み込んで実行させることができます。次のようになります。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
        <head>
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
                <title>jQuery (2)</title>
                <link rel="stylesheet" href="../css/basic.css" type="text/css" media="all">
                <script type="text/javascript" src="../js/jquery-1.4.2.min.js" charset="utf-8"></script>
                <script type="text/javascript" src="./sample.js" charset="utf-8"></script>
        </head>
        <body>
                <h1>JavaScript fileを読み込む</h1>
                <div id="cntent">
                        JavaScript fileを読み込み、footerへHello jQueryを表示
                </div>
                <div id="lblCurrentTime"></div>
        </body>
</html>

basic.cssは次の通り。cssディレクトリへ配置しています。

h1 {
        color : #c0c0c0;
        border-bottom : 1px dotted #afafaf;
        font-size : 14pt;
        width:480px;
}
div {
        font-size:10pt;
        padding:5px;
}
#content {
        width:480px;
        font-size:10pt;
        margin:2em;
        border:1px solid black;
        background-color:#cccccc;
}
.note {
        color:red;
        font-size:9pt;
}

sample.js は次の通り。

$(function(){
$("#lblCurrentTime").text("Hello jQuery");
});

ディレクトリ構成は次のようになります。