JavaScriptメモ jQueryを使ってみる

JavaScript

いろいろとあって、JavaScriptでプログラミングする機会あったり。
調べてことをメモっとこっと。

とりあえず、jQueryをダウンロードしてくる。

  1. ブラウザでjQueryのページを開く。
    http://jquery.com/download/
    16799_01
  2. “Download the compressed, production jQuery x.x.x”ってリンクを名前をつけて保存する。
    ※IE8以下でjQueryを使う場合は1.9.xをダウンロードする(jQueryの2.xはIE8以下のブラウザは動作対象外)。
    ※リンクをクリックしたらソース自体が表示されちゃったので、こうした。
    16799_02
    今回は保存先はhtmlファイルと同じフォルダにしといた。
    16799_03

フォルダの内容としてはこんな感じ。

  • index.html … メインにするHTMLページ
  • jquery-2.0.0.min.js … jQueryのJavaScriptソース

16799_04

とりあえず、<div>タグに任意の文字列”hello world!!”を設定してみる。
htmlページはこんな感じ。

<!doctype html>
<html>
    <!-- header -->
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <script src="jquery-2.0.0.min.js" type="text/javascript"></script>
    </head>
    <!-- body -->
    <body>
        <div id="target"></div>
    </body>
    <!-- java script -->
    <script language="javascript" type="text/jscript">
        $('#target').html('hello world!!');
    </script>   
</html>

で、index.htmlをFirefoxで表示してみるとこんな感じ。

16799_06

このhtmlページで、気をつけるとこはこんなとこだった。

  1. タグ内で タグを使ってjQueryのJavaScriptソースを読み込むようにする
    ※読み込まなきゃ当然動かない…
  2. <div>ダグにid属性をつける
    ※今回はtargetという名前にした
  3. JavaScriptは<div>タグより後に書く
    ※前に書くとJavaScriptがうまく動かない

ま、出だしはこんなとこかね。