More Related Content
Similar to 2時間で学ぶjQuery (20)
More from Shumpei Shiraishi (20)
2時間で学ぶjQuery
- 2. ねらい
• この資料は、JavaScriptの基本を理解している方々
向けに、jQueryの基本的な使用方法を示したもので
す。
• この講義を終えたあとは、jQuery公式ドキュメント
を参照しながらjQueryプログラミングを行えるよう
になっていることが理想です。
• バージョンは古いですが、日本語リファレンスを公開
している方もいます。
- 9. jQueryのインストー
ル
• jQueryのJavaScriptファイル(たった1ファイル)
を、ダウンロードし、scriptタグで読み込むだけ。
<script src="jquery-1.7.min.js"></script>
• CDN上のファイルを利用してもよい。
• CDN上のものを使うほうがキャッシュも効きやすい
が、オフラインで開発できなくなる。
<script
src="http://code.jquery.com/jquery-1.7.min.js">
</script>
- 12. DOM要素を選択する
• 以下の二つの方法が主
• $("CSSセレクタ")・・・セレクタにマッチする要素を
選択する。
• $(DOM要素)・・・渡された要素を選択状態にす
る。
// ID指定で要素を選択する
var jq = $("#updateButton");
// クラス指定
var jq = $(".header")
// 要素を$()に直接渡す
var button = document.getElementById("v");
var jq = $(button);
- 13. DOM要素を更新する
• jQueryオブジェクトが持つ様々なメソッドを通じ、
DOM要素を操作することができる。
// div要素のCSSを操作する
var div = $("div");
div.css("backgroundColor", "red");
// $()の戻り値を変数に格納しなくても、処理を書ける
$("div").css("borderWidth", 2);
- 14. 演習:jQueryのインス
トール、要素の選択と
更新
• 以下のファイルを保存してブラウザで開いた後、
JavaScriptコンソールでjQueryの操作を練習しま
しょう。
<!DOCTYPE html>
<meta charset="UTF-8">
<script src="
http://code.jquery.com/jquery-1.7.min.js">
</script>
<section>
<h1>冷やし中華</h1>
<p id="p1">はじめ</p>
<p>ました</p>
</section>
- 16. DOM要素を作成する
• $()の引数に「<」で始まり「>」で終わるHTML文字
列を与えると、要素を作成できる。
• 作成した要素は、append()、appendTo()などのメ
ソッドを用いてDOMツリーに挿入できる。
// div要素を作成し、bodyの末尾に追加する
$("<div id='d1'>テスト</div>")
.appendTo(document.body);
// 属性をJSオブジェクトで指定することも可能
$(document.body).append(
$("<div/>", {id: "d2", align: "center",
text: "テスト2"}));
- 18. jQueryでできること
• CSSセレクタで要素を選択する。
• イベントを処理する
• 要素の属性を操作する。
• 要素を選択する。
• DOMの制御・更新
• 要素のスタイルを操作する
• エフェクトを施す
• Ajax
• 様々なユーティリティ
- 19. CSSセレクタで要素を選
択する
• CSS3のセレクタを全て利用可能(以下は一例)
• #ID・・・IDで要素を0 or 1件取得
• .className・・・クラスを指定して絞込み
• elemName・・・要素名で絞込み
• [attrName=value]・・・属性値で絞込み
• selector1 selector2・・・子孫
• selector1, selector2・・・セレクタの和集合
• selector1 > selector2・・・直接の子要素
• selector1 + selector2・・・兄弟要素
- 20. イベントを処理する
• .on("イベント名", 関数)・・・イベントハンドラを
設定する
• .off("イベント名", 関数)・・・イベントハンドラを
外す
• .one("イベント名", 関数)・・・一回だけ処理を行う
イベントハンドラを設定する
• .click(関数)・・・クリックイベントを捕捉する
• .change(関数)・・・値の変更イベントを捕捉
• $(関数)・・・画面の読み込み完了イベントを捕捉
- 23. 演習:属性の操作
• sample3.htmlを開き、<script>要素内に以下のコー
ドを記述して試してみましょう。
// 画面読み込み時に呼び出される
$(function() {
// チェックボックスの状態が変わると呼び出される
$("#disableSwitcher").change(function() {
// テキストフィールドのdisabled属性を変更
$("input[type=text]").attr(
"disabled", !this.checked);
});
});
- 25. 演習:要素の選択
• sample4.htmlを開き、<script>要素内に以下のコー
ドを記述して試してみましょう。
// 画面読み込み時に呼び出される
$(function() {
$("#menu > li").mouseover(function() {
$(this).find("ul").css("display", "block");
}).mouseout(function() {
$(this).find("ul").css("display", "none");
});
});
- 26. DOMの制御・更新
• .append()・・・DOMもしくはjQueryオブジェクト
を引数に取り、自身の子要素の末尾に追加する
• .appendTo()・・・DOMもしくはjQueryオブジェク
トを引数に取り、その子要素の末尾に追加する
• .remove()・・・選択中の要素を削除する
• .text()・・・要素内のテキストの内容を設定/取得
する
• .html()・・・要素内のHTMLの内容を設定/取得す
る
• .val()・・・入力フォームの値を設定/取得する
- 27. 要素のスタイルを操作
する
• .css("スタイル名", "値")・・・CSSプロパティを設
定する。第二引数を省略すると、現在の値が返る。
JavaScriptオブジェクトでまとめて指定することも
可能。
• .addClass("クラス名")・・・クラスを追加
• .hasClass("クラス名")・・・クラスを持っているか
• .removeClass("クラス名")・・・クラスを削除
• .toggleClass("クラス名")・・・クラスをON/OFF
- 30. まとめ
• 「モバイルで使用するには重たい」などの不満も最
近では聞かれるjQueryですが、依然として
JavaScriptライブラリのデファクトスタンダードで
あると言ってよい。
• jQueryをベースとして、jQuery UIやjQuery Mobile
といった派生フレームワークもあり、これらを使え
ばサイト構築が劇的に楽になります。