基金訓練(Webデザイン・プログラミング科)の58日目に行ってまいりました。
59日目は、jQueryの実習です。
59日目の内容は下記のとおりです。
１．jQueryとは
- JavaScriptを簡単に書くためのライブラリ。
- HTML、CSSを知っていると使いやすい。
- プラグインが豊富。
２．jQueryで、できること。
(イベント処理、スタイルシート操作、アニメーション、サーバとの非同期通信(Ajax)等。)
３．jQueryで、できないこと。
4．jQueryの設置方法。
jQuery本体のダウンロード
jQueryの公式サイトから、ダウンロードして設置します。
具体的には、TOPページのメニューからDownloadページに移動し、見出し「Download jQuery」の「Current Release」の「Minified」を右クリックして「名前をつけてリンク先を保存」(FireFoxの場合)します。(IEの場合は、｢対象をファイルに保存｣)
jQuery本体のHTMLへの読み込み
head内に記述します。
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
srcの値は、ファイルを置いた場所を指定します。
別の方法として、Google AJAX Libraries APIを利用するやり方があります。
この場合の記述は、下記のようになります。
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js">
</script>
</head>
URLの中の「1.2.6」は、jQueryのバージョンで、使用したいバージョンによって変更します。
５．jQueryの記述方法
jQueryは、JavaScriptと同じで、scriptタグ内、または、外部ファイルに
記述します。
<script type="text/javascript">
<!–
$(function() {
ここに jQuery を記述
});
//–>
</script>
６．html()メソッド
html()メソッドは、タグで囲まれた部分を、文字列で返します。
JavaScriptのinnerHTMLと同じです。
プログラム例
script部
$(function() {
$(‘#button’)
.click(function() {
$(‘.contents p’).html(‘p 書き換え後’);
$(‘.contents li’).html(‘li 書き換え後’);
});
});
HTML部
<input id="button" type="button" value="書き換え">
<div class="contents">
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>
説明
$(‘#button’).click(function() { }
ID="button"のタグで、マウスクリックされた時{ }内を実行します。
$(‘.contents p’).html(‘p 書き換え後’)
class="contents"のpの中身を書き換えます。
$(‘.contents li’).html(‘li 書き換え後’)
class="contents"のliの中身を書き換えます。
結果
７．スタイルシートの書き換え
css()メソッドを使用してスタイルシートを書き換えます。
プログラム例
script部
$(function() {
$(‘#button2’) .click(function() {
$(‘.contents2 p’).css(‘fontSize’,’150%’);
$(‘.contents2 p’).css(‘fontWeight’,’bold’);
$(‘.contents2 p’).css(‘color’,’#ff0000′);
$(‘.contents2 li’).css(‘color’,’#00ff00′);
});
});
HTML部
<input id="button2" type="button" value="書き換え">
<div class="contents2">
<p>p の中身</p>
<ul>
<li>li の中身</li>
<li>li の中身</li>
<li>li の中身</li>
</ul>
</div>
説明
$(‘.contents2 p’).css(‘fontSize’,’150%’);
$(‘.contents2 p’).css(‘fontWeight’,’bold’);
$(‘.contents2 p’).css(‘color’,’#ff0000′);
class="contents2"のpタグに style="font-size:150%;font-weight:bold;color:#ff0000" を書き加えます。
結果
備考
jQueryは、配られたプリントで習っており、下に紹介している教本には載っていません。
実習で使用している教本
