Suche senden
Hochladen
2時間で学ぶjQuery
•
Als PPTX, PDF herunterladen
•
25 gefällt mir
•
7,465 views
Shumpei Shiraishi
Folgen
Melden
Teilen
Melden
Teilen
1 von 30
Jetzt herunterladen
Empfohlen
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
Empfohlen
20140523 jQuery基礎 (HTML5ビギナーズ)
20140523 jQuery基礎 (HTML5ビギナーズ)
Daisuke Yamazaki
Scc2014 :jQueryの仕組みを完璧に理解する
Scc2014 :jQueryの仕組みを完璧に理解する
Jun Futakawa
Kawaz的jQuery入門
Kawaz的jQuery入門
Kohki Miki
WebデザイナのためのjQuery入門。
WebデザイナのためのjQuery入門。
Yossy Taka
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生:保坂 庸介
schoowebcampus
はじめよう Backbone.js
はじめよう Backbone.js
Hiroki Toyokawa
JavaScript04 jquery プラグインを使おう
JavaScript04 jquery プラグインを使おう
Yossy Taka
jQueryを中心としたJavaScript
jQueryを中心としたJavaScript
hideaki honda
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
Backbone.js入門
Backbone.js入門
AdvancedTechNight
Web development fundamental
Web development fundamental
Takuya Kumagai
Start React with Browserify
Start React with Browserify
Muyuu Fujita
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
Yossy Taka
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Learning jQuery
Learning jQuery
taiju higashi
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Bracketsを使おう
Bracketsを使おう
Yossy Taka
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
Weitere ähnliche Inhalte
Was ist angesagt?
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Nishida Kansuke
Angular js or_backbonejs
Angular js or_backbonejs
Omasa Yusaku
JavaScript Basic 01
JavaScript Basic 01
Yossy Taka
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
daisuke shimizu
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Yossy Taka
Backbone.js入門
Backbone.js入門
AdvancedTechNight
Web development fundamental
Web development fundamental
Takuya Kumagai
Start React with Browserify
Start React with Browserify
Muyuu Fujita
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
Yossy Taka
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Makoto Haruyama
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
Yossy Taka
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
Mayu Kimura
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
Atsushi Tadokoro
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
しくみ製作所
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Toshiaki Maki
Learning jQuery
Learning jQuery
taiju higashi
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Nishida Kansuke
Bracketsを使おう
Bracketsを使おう
Yossy Taka
WordPress を使いこなそう
WordPress を使いこなそう
Wataru OKAMOTO
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
Was ist angesagt?
(20)
⑯jQueryをおぼえよう!その2
⑯jQueryをおぼえよう!その2
Angular js or_backbonejs
Angular js or_backbonejs
JavaScript Basic 01
JavaScript Basic 01
Backbonejs @BuildInsiderOffline #1
Backbonejs @BuildInsiderOffline #1
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQuery
Backbone.js入門
Backbone.js入門
Web development fundamental
Web development fundamental
Start React with Browserify
Start React with Browserify
JavaScript basic, jQuery animation
JavaScript basic, jQuery animation
backbone.jsの使用例 その1
backbone.jsの使用例 その1
Webの仕組みとプログラミング言語
Webの仕組みとプログラミング言語
JavaScriptで出来る、あんなことこんなこと
JavaScriptで出来る、あんなことこんなこと
メディア芸術基礎 II jQuery入門
メディア芸術基礎 II jQuery入門
クライアントサイドjavascript簡単紹介
クライアントサイドjavascript簡単紹介
忙しい人のためのBackbone.jsとAngular.js入門
忙しい人のためのBackbone.jsとAngular.js入門
Learning jQuery
Learning jQuery
⑳CSSでアニメーション!その1
⑳CSSでアニメーション!その1
Bracketsを使おう
Bracketsを使おう
WordPress を使いこなそう
WordPress を使いこなそう
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Ähnlich wie 2時間で学ぶjQuery
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
Ryuma Tsukano
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
eiji sekiya
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Hishikawa Takuro
Leiningen超速入門
Leiningen超速入門
Kiyotaka Kunihira
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
yuichi_kuwahara
Play jjug2012spring
Play jjug2012spring
Takafumi Ikeda
Actierモデル駆動開発ソリューション
Actierモデル駆動開発ソリューション
Actier, Inc.
No3
No3
Daisuke Yamazaki
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
normalian
OSC京都2011
OSC京都2011
haganemetal
Javaはどのように動くのか~スライドでわかるJVMの仕組み
Javaはどのように動くのか~スライドでわかるJVMの仕組み
Chihiro Ito
Web制作勉強会 #2
Web制作勉強会 #2
Moto Yan
JavaScript 研修
JavaScript 研修
Yuki Ishikawa
CIBC workshop by imagire
CIBC workshop by imagire
Takashi Imagire
DOMイベントの基礎から深淵まで
DOMイベントの基礎から深淵まで
Masayuki Nakano
Java scriptでslideを作ってみた
Java scriptでslideを作ってみた
Katsuhito Yonao
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
Angular の紹介
Angular の紹介
Neo Xrea
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
Kohei Kadowaki
20110714 j queryベーシック
20110714 j queryベーシック
良太 増子
Ähnlich wie 2時間で学ぶjQuery
(20)
公式page改ざんで学ぶjQuery入門 (jscafe7)
公式page改ざんで学ぶjQuery入門 (jscafe7)
マークアップ講座 04 jQuery - JavaScript
マークアップ講座 04 jQuery - JavaScript
WordBench Kobe jQueryどうでしょう
WordBench Kobe jQueryどうでしょう
Leiningen超速入門
Leiningen超速入門
JPAの基礎と現場で役立つ開発Tips
JPAの基礎と現場で役立つ開発Tips
Play jjug2012spring
Play jjug2012spring
Actierモデル駆動開発ソリューション
Actierモデル駆動開発ソリューション
No3
No3
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
T51 jQueryで学ぶJavaScriptでのフロント開発~ASP.NET MVC3もあるよっ!~
OSC京都2011
OSC京都2011
Javaはどのように動くのか~スライドでわかるJVMの仕組み
Javaはどのように動くのか~スライドでわかるJVMの仕組み
Web制作勉強会 #2
Web制作勉強会 #2
JavaScript 研修
JavaScript 研修
CIBC workshop by imagire
CIBC workshop by imagire
DOMイベントの基礎から深淵まで
DOMイベントの基礎から深淵まで
Java scriptでslideを作ってみた
Java scriptでslideを作ってみた
HTML5&API総まくり
HTML5&API総まくり
Angular の紹介
Angular の紹介
5分でわかる?Backbone.js ことはじめ
5分でわかる?Backbone.js ことはじめ
20110714 j queryベーシック
20110714 j queryベーシック
Mehr von Shumpei Shiraishi
俺的GEB概論(前半)
俺的GEB概論(前半)
Shumpei Shiraishi
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
Shumpei Shiraishi
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
Shumpei Shiraishi
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
Shumpei Shiraishi
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Shumpei Shiraishi
Angular2実践入門
Angular2実践入門
Shumpei Shiraishi
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
Shumpei Shiraishi
変身×フランツ・カフカ
変身×フランツ・カフカ
Shumpei Shiraishi
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
Shumpei Shiraishi
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
Shumpei Shiraishi
漫☆画太郎論
漫☆画太郎論
Shumpei Shiraishi
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
Shumpei Shiraishi
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
Shumpei Shiraishi
はじめにことばありき
はじめにことばありき
Shumpei Shiraishi
秒速一億円
秒速一億円
Shumpei Shiraishi
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
Shumpei Shiraishi
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
Shumpei Shiraishi
20130921レジュメ2
20130921レジュメ2
Shumpei Shiraishi
Mehr von Shumpei Shiraishi
(20)
俺的GEB概論(前半)
俺的GEB概論(前半)
コンセプトのつくりかた - アイデアをかたちにする技術
コンセプトのつくりかた - アイデアをかたちにする技術
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
jQueryの先に行こう!最先端のWeb開発トレンドを学ぶ
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
TechFeedのつくりかた - Angular2/Webpack/Ionic2/Cordova実践入門
JavaScript使いのためのTypeScript実践入門
JavaScript使いのためのTypeScript実践入門
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
「それでも人生にイエスと言う」を読んで
Angular2実践入門
Angular2実践入門
WebRTCがビデオ会議市場に与えるインパクトを探る
WebRTCがビデオ会議市場に与えるインパクトを探る
変身×フランツ・カフカ
変身×フランツ・カフカ
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
イラスト日用服飾辞典/三面記事の歴史/健康男 を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
「1秒でわかる!アパレル業界ハンドブック」を読んで
漫☆画太郎論
漫☆画太郎論
HTML5時代のフロントエンド開発入門
HTML5時代のフロントエンド開発入門
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
6,000人のWeb技術者コミュニティを5年間やってみて学んだこと
はじめにことばありき
はじめにことばありき
秒速一億円
秒速一億円
HTML5がもたらすアプリ開発へのインパクト
HTML5がもたらすアプリ開発へのインパクト
この人と結婚していいの?を読んで
この人と結婚していいの?を読んで
20130921レジュメ2
20130921レジュメ2
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 といった派生フレームワークもあり、これらを使え ばサイト構築が劇的に楽になります。
Jetzt herunterladen