⑯jQueryをおぼえよう！その２
Le téléchargement de votre SlideShare est en cours.
×
Consultez-les par la suite
Plus De Contenu Connexe
Diaporamas pour vous (20)
Similaire à 2時間で学ぶjQuery (20)
Plus par Shumpei Shiraishi (20)
2時間で学ぶjQuery
- 1. 2時間で学ぶjQuery 2011/11/10 白石俊平
- 2. ねらい • この資料は、JavaScriptの基本を理解している方々 向けに、jQueryの基本的な使用方法を示したもので す。 • この講義を終えたあとは、jQuery公式ドキュメント を参照しながらjQueryプログラミングを行えるよう になっていることが理想です。 • バージョンは古いですが、日本語リファレンスを公開 している方もいます。
- 3. はじめに • http://bit.ly/rEY0yM からファイルをダウンロードし て下さい。
- 4. もくじ • jQueryとは？ • jQueryの基本 • jQueryでできること
- 5. jQueryとは？
- 6. jQueryとは、DOM操作を劇 的に容易にする「ライブ ラリ」 • 通常のDOM（Document Object Model）操作は、非 常に面倒。 • Webブラウザ上で動作する基本的なJavaScript API を元に、より直感的で使いやすいプログラミングモ デルを提供する。 • ブラウザ間の細かな差異も吸収する
- 7. Flashよりも使われてい る？かもしれないjQuery • jQueryはデファクトスタンダード。 • 「WebサイトにおけるjQueryの利用率がFlashを上 回る」
- 8. 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>
- 10. jQuery()と$() • jQueryをインストールすると、以下の関数が利用可 能になる（両者は同一）。 • jQuery() • $() • これらの関数の戻り値は特別なオブジェクト （jQueryオブジェクトと呼ばれる）。 • 以降は$()を使うものとする。
- 11. jQueryの基本的な使い 方 • CSSセレクタを用いてページ内の要素を選択し、 様々な操作を行う。 • 新しい要素を作成して、ページに挿入する • ページ内の要素を削除する
- 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>
- 15. 演習:jQueryのインス トール、要素の選択と 更新 // section要素の枠線をピンクに $("section").css("border", "1px solid pink"); // "p1"というIDを持つ要素の背景色をグレーに $("#p1").css("backgroundColor", "gray"); // 2番目のp要素の文字色を赤に $("p:nth-of-type(2)").css("color", "red"); // 見出し要素の文字色（color）を緑（green）にしてみましょう。
- 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"}));
- 17. DOM要素を削除する • remove()やempty()などを用いて、要素の削除を行 える。 // h1要素を削除する $("h1").remove(); // section要素を削除する $("section").empty();
- 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(関数)・・・値の変更イベントを捕捉 • $(関数)・・・画面の読み込み完了イベントを捕捉
- 21. 演習:イベント処理 • sample2.htmlを開き、<script>要素内に以下のコー ドを記述して試してみましょう。 // 画面読み込み時に呼び出される $(function() { // divがクリックされたらアラート $("#square").click(function() { alert("クリックされました！"); }); });
- 22. 要素の属性を操作す る • .attr("属性名", "属性値")・・・属性を追加・更新す る。属性名だけを指定すると、属性値を取得でき る。 • .removeAttr("属性名")・・・属性を削除
- 23. 演習:属性の操作 • sample3.htmlを開き、<script>要素内に以下のコー ドを記述して試してみましょう。 // 画面読み込み時に呼び出される $(function() { // チェックボックスの状態が変わると呼び出される $("#disableSwitcher").change(function() { // テキストフィールドのdisabled属性を変更 $("input[type=text]").attr( "disabled", !this.checked); }); });
- 24. 要素を選択する • .parent()・・・親要素を選択 • .children()・・・子要素を選択 • .siblings()・・・兄弟要素を選択 • .filter("セレクタ")・・・子孫要素内からセレクタに マッチするものを検索 • .parents("セレクタ")・・・セレクタにマッチする親 要素を全て取得する • .closest("セレクタ")・・・セレクタにマッチする親 要素のうち、一番現在の要素に近いものを選択する
- 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
- 28. エフェクトを施す • .fadeIn(), .fadeOut()・・・フェードイン、アウト • .show(), .hide()・・・要素の表示、非表示 • animate()・・・アニメーションを細かく設定する
- 29. 演習:要素の選択 • sample7.htmlを開き、<script>要素内に以下のコー ドを記述して試してみましょう。 // 画面読み込み時に呼び出される $(function() { $("button").click(function() { $("#square").toggle(2000); }); });
- 30. まとめ • 「モバイルで使用するには重たい」などの不満も最 近では聞かれるjQueryですが、依然として JavaScriptライブラリのデファクトスタンダードで あると言ってよい。 • jQueryをベースとして、jQuery UIやjQuery Mobile といった派生フレームワークもあり、これらを使え ばサイト構築が劇的に楽になります。
