Home > Web > JQueryの初歩

JQueryの初歩

  • 2011-12-26 (Mon) 09:27
  • Web
昨日、家政婦のミタを一気に見た。

久しぶりにドラマをすべて見た感想・・。けっこう、面白かったという印象。

まあ~、人によって好みがあるので感想は控えめにするが、主役のミタの演技が回を重ねることによって変化していく姿が印象的だった。

見ていない人は、是非見てください。見た方の印象が聞きたいものだ。



さて、今日はJQueryの初歩という題にしてみました。最近のWebでは広く用いられ、プログラムを初めて覚える方には意味が分からないかもしれませんが、それはそれで慣れるしかないでしょう。

First JQueryというページのソースを以下のように記述します。
--------------------------------------------------------------------------------
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>First JQuery</title>
<script src="jquery-1.7.min.js"></script>
<script type="text/javascript">

$(function(){
$(":button").click(function(){
$("span").text("JQueryが実行されました。");
});
});
</script>
</head>
<body>
<input type="button" value="Click">
<hr>
<span>[Click]ボタンを押して!</span>
</body>
</html>
--------------------------------------------------------------------------------

適当な名前を付けて保存し、ブラウザで開きます。
Clickというボタンをクリックすると、spanで囲まれた文字が入れ替わります。

もっとも基本的なプログラムになります。

[プログラムの解説]
htmlの記述は説明はしませんので、分からない方は勉強しましょう。^^

文字コードは一般的にUTF-8コードを使った方が良いでしょう。ね。
よって、METAタグには文字コードを指定します。

JQuery-1.7.min.jsのファイルをJQueryサイトからダウンロードします。
http://jquery.com/
ダウンロードしたバージョンが異なる場合は、そのJSファイルの名前に書き換えます。

SCRIPTタグの中にJQueryのプログラムを記述します。
$(function() {
ここに実行したいプログラムを書きます。
});

Clickボタンは、$(":button")セレクタでアクセスします。クリックされた時の動作は、クリックイベントで記述できますので、ボタンがクリックされた時の処理は次のように記述します。
$(":button").click(function() {
ボタンがクリックされた時の処理をここに書きます。
});

SPANタグは、$("span")セレクタでアクセスでき、SPANタグに書かれている文字を変更したい場合はtext関数を使って、「JQueryが実行されました」という文字をSPANタグ内に記述します。

プログラムを意味を考えながら打っていくことが大事です。それとJQueryの基本記述をまず覚え、後は利用できる関数などを調べながら学習するといろんなことが可能になります。

JQueryはいろいろなライブラリがネット上で公開されていて、簡単に利用できます。基本的な記述を覚えていると自分なりの効果も可能となります。

Comment Form
★下記に2つの英単語をスペースで区切って入力してください

Home > Web > JQueryの初歩

Search
Feeds

Page Top