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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

2時間で学ぶjQuery

6,634
views

Published on


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

No Downloads
Views
Total Views
6,634
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
93
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 といった派生フレームワークもあり、これらを使え ばサイト構築が劇的に楽になります。