+ Follow

2時間で学ぶjQuery

by Shumpei Shiraishi on Feb 21, 2012

1,744 views

More…

Less

3 Embeds 4

http://paper.li	2
http://condotti.posterous.com	1
http://s.deeeki.com	1

Statistics

Favorites: 8
Downloads: 18
Comments: 0
Embed Views: 4
Views on SlideShare: 1,740
Total Views: 1,744

2時間で学ぶjQuery — Presentation Transcript

2時間で学ぶjQuery 2011/11/10 白石俊平

ねらい• この資料は、JavaScriptの基本を理解している方々向けに、jQueryの基本的な使用方法を示したものです。• この講義を終えたあとは、jQuery公式ドキュメントを参照しながらjQueryプログラミングを行えるようになっていることが理想です。 • バージョンは古いですが、日本語リファレンスを公開している方もいます。

はじめに• http://bit.ly/rEY0yM からファイルをダウンロードして下さい。

もくじ• jQueryとは？• jQueryの基本• jQueryでできること

jQueryとは？

jQueryとは、DOM操作を劇的に容易にする「ライブラリ」• 通常のDOM（Document Object Model）操作は、非常に面倒。• Webブラウザ上で動作する基本的なJavaScript API を元に、より直感的で使いやすいプログラミングモデルを提供する。• ブラウザ間の細かな差異も吸収する

Flashよりも使われている？かもしれないjQuery• jQueryはデファクトスタンダード。• 「WebサイトにおけるjQueryの利用率がFlashを上回る」

jQueryの基本

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>

jQuery()と$()• jQueryをインストールすると、以下の関数が利用可能になる（両者は同一）。 • jQuery() • $()• これらの関数の戻り値は特別なオブジェクト（jQueryオブジェクトと呼ばれる）。• 以降は$()を使うものとする。

jQueryの基本的な使い方• CSSセレクタを用いてページ内の要素を選択し、様々な操作を行う。• 新しい要素を作成して、ページに挿入する• ページ内の要素を削除する

DOM要素を選択する• 以下の二つの方法が主 • $("CSSセレクタ")・・・セレクタにマッチする要素を選択する。 • $(DOM要素）・・・渡された要素を選択状態にする。// ID指定で要素を選択するvar jq = $("#updateButton");// クラス指定var jq = $(".header")// 要素を$()に直接渡すvar button = document.getElementById("v");var jq = $(button);

DOM要素を更新する• jQueryオブジェクトが持つ様々なメソッドを通じ、 DOM要素を操作することができる。// div要素のCSSを操作するvar div = $("div");div.css("backgroundColor", "red");// $()の戻り値を変数に格納しなくても、処理を書ける$("div").css("borderWidth", 2);

演習: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>

演習: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）にしてみましょう。

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"}));

DOM要素を削除する• remove()やempty()などを用いて、要素の削除を行える。// h1要素を削除する$("h1").remove();// section要素を削除する$("section").empty();

jQueryでできること• CSSセレクタで要素を選択する。• イベントを処理する• 要素の属性を操作する。• 要素を選択する。• DOMの制御・更新• 要素のスタイルを操作する• エフェクトを施す• Ajax• 様々なユーティリティ

CSSセレクタで要素を選択する• CSS3のセレクタを全て利用可能（以下は一例） • #ID・・・IDで要素を0 or 1件取得 • .className・・・クラスを指定して絞込み • elemName・・・要素名で絞込み • [attrName=value]・・・属性値で絞込み • selector1 selector2・・・子孫 • selector1, selector2・・・セレクタの和集合 • selector1 > selector2・・・直接の子要素 • selector1 + selector2・・・兄弟要素

イベントを処理する• .on("イベント名", 関数)・・・イベントハンドラを設定する• .off("イベント名", 関数)・・・イベントハンドラを外す• .one("イベント名", 関数)・・・一回だけ処理を行うイベントハンドラを設定する• .click(関数）・・・クリックイベントを捕捉する• .change(関数)・・・値の変更イベントを捕捉• $(関数)・・・画面の読み込み完了イベントを捕捉

演習:イベント処理• sample2.htmlを開き、<script>要素内に以下のコードを記述して試してみましょう。// 画面読み込み時に呼び出される$(function() { // divがクリックされたらアラート $("#square").click(function() { alert("クリックされました！"); });});

要素の属性を操作する• .attr("属性名", "属性値")・・・属性を追加・更新する。属性名だけを指定すると、属性値を取得できる。• .removeAttr("属性名")・・・属性を削除

演習:属性の操作• sample3.htmlを開き、<script>要素内に以下のコードを記述して試してみましょう。// 画面読み込み時に呼び出される$(function() { // チェックボックスの状態が変わると呼び出される $("#disableSwitcher").change(function() { // テキストフィールドのdisabled属性を変更 $("input[type=text]").attr( "disabled", !this.checked); });});

要素を選択する• .parent()・・・親要素を選択• .children()・・・子要素を選択• .siblings()・・・兄弟要素を選択• .filter("セレクタ")・・・子孫要素内からセレクタにマッチするものを検索• .parents("セレクタ")・・・セレクタにマッチする親要素を全て取得する• .closest("セレクタ")・・・セレクタにマッチする親要素のうち、一番現在の要素に近いものを選択する

演習:要素の選択• sample4.htmlを開き、<script>要素内に以下のコードを記述して試してみましょう。// 画面読み込み時に呼び出される$(function() { $("#menu > li").mouseover(function() { $(this).find("ul").css("display", "block"); }).mouseout(function() { $(this).find("ul").css("display", "none"); });});

DOMの制御・更新• .append()・・・DOMもしくはjQueryオブジェクトを引数に取り、自身の子要素の末尾に追加する• .appendTo()・・・DOMもしくはjQueryオブジェクトを引数に取り、その子要素の末尾に追加する• .remove()・・・選択中の要素を削除する• .text()・・・要素内のテキストの内容を設定／取得する• .html()・・・要素内のHTMLの内容を設定／取得する• .val()・・・入力フォームの値を設定／取得する

要素のスタイルを操作する• .css("スタイル名", "値")・・・CSSプロパティを設定する。第二引数を省略すると、現在の値が返る。 JavaScriptオブジェクトでまとめて指定することも可能。• .addClass("クラス名")・・・クラスを追加• .hasClass("クラス名")・・・クラスを持っているか• .removeClass("クラス名")・・・クラスを削除• .toggleClass("クラス名")・・・クラスをON/OFF

エフェクトを施す• .fadeIn(), .fadeOut()・・・フェードイン、アウト• .show(), .hide()・・・要素の表示、非表示• animate()・・・アニメーションを細かく設定する

演習:要素の選択• sample7.htmlを開き、<script>要素内に以下のコードを記述して試してみましょう。// 画面読み込み時に呼び出される $(function() { $("button").click(function() { $("#square").toggle(2000); }); });

まとめ• 「モバイルで使用するには重たい」などの不満も最近では聞かれるjQueryですが、依然として JavaScriptライブラリのデファクトスタンダードであると言ってよい。• jQueryをベースとして、jQuery UIやjQuery Mobile といった派生フレームワークもあり、これらを使えばサイト構築が劇的に楽になります。

2時間で学ぶjQuery

by Shumpei Shiraishi on Feb 21, 2012

Accessibility

Tags

Upload Details

Usage Rights

3 Embeds 4

Statistics

2時間で学ぶjQuery — Presentation Transcript