基金訓練に行ってきました。(59日目)



基金訓練(Webデザイン・プログラミング科)の58日目に行ってまいりました。
59日目は、jQueryの実習です。

59日目の内容は下記のとおりです。

1.jQueryとは

  • JavaScriptを簡単に書くためのライブラリ。
  • HTML、CSSを知っていると使いやすい。
  • プラグインが豊富。

2.jQueryで、できること。

JavaScriptでできることが、より簡単にできます。
(イベント処理、スタイルシート操作、アニメーション、サーバとの非同期通信(Ajax)等。)

3.jQueryで、できないこと。

JavaScriptでできないことはできません。

4.jQueryの設置方法。

jQuery本体のダウンロード

jQueryの公式サイトから、ダウンロードして設置します。
具体的には、TOPページのメニューからDownloadページに移動し、見出し「Download jQuery」の「Current Release」の「Minified」を右クリックして「名前をつけてリンク先を保存」(FireFoxの場合)します。(IEの場合は、「対象をファイルに保存」)

jQueryの公式サイト

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のバージョンで、使用したいバージョンによって変更します。

5.jQueryの記述方法

jQueryは、JavaScriptと同じで、scriptタグ内、または、外部ファイルに
記述します。

<script type="text/javascript">
<!–
$(function() {

ここに jQuery を記述
});
//–>
</script>

6.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の中身を書き換えます。

結果

7.スタイルシートの書き換え

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は、配られたプリントで習っており、下に紹介している教本には載っていません。




  • 人気ブログランキングへ
  • FC2ランキングへ
  • ブログランキング・にほんブログ村へ
  • おきてがみ

関連記事

カテゴリー:職業訓練
.

コメントを残す