Your SlideShare is downloading. ×
0
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
2時間で学ぶjQuery
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2時間で学ぶjQuery

7,436

Published on

0 Comments
18 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,436
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
104
Comments
0
Likes
18
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 といった派生フレームワークもあり、これらを使え ばサイト構築が劇的に楽になります。

×