開発日誌
jQueryではじめるJavaScript
今回からJavaScriptのライブラリ「jQuery」を紹介していきます。
jQueryというのはJavaScriptの汎用ライブラリーで軽量・強力なセレクター・各種ブラウザ対応が特徴です。
同じようなライブラリーとして「prototype.js」がありますが、最近はjQueryのほうが人気があるようです。わがジーピーオンラインでもJavaScriptを使用するときはこのライブラリーを使って開発しています。
汎用ライブラリーなのでいろいろなことができるのですが、今回は必要最小限の肝の部分だけ紹介します。
jQueryのプログラムはサイトの「↓Download(jQuery)」からダウンロードしてjquery.min.jsとリネームしてください。
index.html
ブラウザ表示
上記のように表示されたら成功です。
今回注目してもらいたい箇所はここの１行です。
これはjQueryで特徴的な書き方で
$(セレクター).処理
という要素からできています。
「セレクター」
後ろに書く「処理」が実行される箇所です。
いろいろなセレクターがありますが、上記の「'span'」は<span>タグの箇所です。
「処理」
いろいろな処理がありますが、上記の「html('...')」 はセレクターの子要素を'...'で書き換えます。＞ドキュメント
つまり
$('span').html('jQuery');
は、
「<span>タグの子要素を'jQuery'」に書き換えます。
同じようにspanの箇所をh1やtd等に変えれば、<h1>や<td>内を書き換えることができます。
次回は「jQueryのセレクターの説明」です。
（teruhisa）
jQueryというのはJavaScriptの汎用ライブラリーで軽量・強力なセレクター・各種ブラウザ対応が特徴です。
同じようなライブラリーとして「prototype.js」がありますが、最近はjQueryのほうが人気があるようです。わがジーピーオンラインでもJavaScriptを使用するときはこのライブラリーを使って開発しています。
汎用ライブラリーなのでいろいろなことができるのですが、今回は必要最小限の肝の部分だけ紹介します。
jQueryのプログラムはサイトの「↓Download(jQuery)」からダウンロードしてjquery.min.jsとリネームしてください。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>jQueryではじめるJavaScript その１</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('span').html('jQuery');
});
</script>
</head>
<body>
<p>Hello <span>HTML</span> World.</p>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>jQueryではじめるJavaScript その１</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('span').html('jQuery');
});
</script>
</head>
<body>
<p>Hello <span>HTML</span> World.</p>
</body>
</html>
ブラウザ表示
Hello jQuery World.
上記のように表示されたら成功です。
今回注目してもらいたい箇所はここの１行です。
$('span').html('jQuery');
これはjQueryで特徴的な書き方で
$(セレクター).処理
という要素からできています。
「セレクター」
後ろに書く「処理」が実行される箇所です。
いろいろなセレクターがありますが、上記の「'span'」は<span>タグの箇所です。
「処理」
いろいろな処理がありますが、上記の「html('...')」 はセレクターの子要素を'...'で書き換えます。＞ドキュメント
つまり
$('span').html('jQuery');
は、
「<span>タグの子要素を'jQuery'」に書き換えます。
同じようにspanの箇所をh1やtd等に変えれば、<h1>や<td>内を書き換えることができます。
次回は「jQueryのセレクターの説明」です。
（teruhisa）
