20140523 jQuery基礎 (HTML5ビギナーズ)
Download as pptx, pdf11 likes3,028 views
第５回HTML5ビギナーズ「 jQueryビギナーズ」
1 of 20
Downloaded 29 times
![?CSSセレクタ互換の記述が可能
#id → $(“#id名”)
.class → $(“.class名”)
Element → $(“element名”)
[name=a] → $(“[name=a]”)
jQuery［セレクタ］](https://image.slidesharecdn.com/20140523jquery1-140523102830-phpapp01/85/20140523-jQuery-HTML5-13-320.jpg)
![jQuery[メソッド]
例） $(“セレクタ”).メソッド();
$(”#id“).html(‘<a href=“#”>次ページ</a>’);
$(”#id").css(“color”,”#ff0”);
$(”#id").hide();
$(”#id").show(4000); show.html
hide.html
css.html](https://image.slidesharecdn.com/20140523jquery1-140523102830-phpapp01/85/20140523-jQuery-HTML5-16-320.jpg)
![jQuery[イベント]
例） $(“セレクタ”).on(“click”,function(){
$(”#id").css(“color”,”#ff0”);
$(”#id").hide();
});
“click”,” dblclick”,”mouseout” ,”mousedown” ,”mouseup”,”mousemove”
“mouseenter”,”mouseleave”
,”change”,”select”,”focus”,”submit”,”resize”,”scroll”,”ready”,”keydown”,”ke
ypress”,”keyup”…
on.html](https://image.slidesharecdn.com/20140523jquery1-140523102830-phpapp01/85/20140523-jQuery-HTML5-18-320.jpg)
Ad
Recommended
奥别产デザイナのための箩蚕耻别谤测入门。
奥别产デザイナのための箩蚕耻别谤测入门。Yossy Taka
?
Webデザイナーが、初めてJavaScriptを使うために、jQueryの使い方を説明しています。
jQueryプラグインを使用する際の注意点なども記載されています。
他のJSスライドと似たような構成になっています。はじめよう Backbone.js
はじめよう Backbone.jsHiroki Toyokawa
?
2013年2月25日(月) に開催されました TechBuzz 第4回.js系開発技術勉強会で発表させていただきましたスライドになります。内容は Backbone.js の入門となっております。Webデザインの幅を広げる、jQuery【コードを記述する】 先生：保坂 庸介
Webデザインの幅を広げる、jQuery【コードを記述する】 先生：保坂 庸介schoowebcampus
?
ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
ＷＥＢ生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/431/room
ーーーーーーーーーーーーーーーーーーーーーーーJavaScript Basic 02 jQuery
JavaScript Basic 02 jQueryYossy Taka
?
jQuery入門の講義用資料です。
jQueryの基本的な記述から、プログラミングに必要な基本技術の説明をしています。
変数、関数、if文Web development fundamental
Web development fundamentalTakuya Kumagai
?
改訂版↓
http://www.slideshare.net/taukuma/web-development-fundamentalv2-24318761
闯补惫补厂肠谤颈辫迟で出来る、あんなことこんなこと
闯补惫补厂肠谤颈辫迟で出来る、あんなことこんなことMayu Kimura
?
下記勉強会の発表資料です。
---------------------------------------------------------
JSLOVE ?JavaScriptを愛する人の話を聞いてみよう?
http://devlove.doorkeeper.jp/events/5811
---------------------------------------------------------5分でわかる？Backbone.js ことはじめ
5分でわかる？Backbone.js ことはじめKohei Kadowaki
?
2012/11/14に开催された「なんでもないただの先端技术勉强会（仮）」にて、叠补肠办产辞苍别.箩蝉の概要説明に使ったスライドです。Dreamweaverとfireworksを連携し、jQuery mobileのサイトを作る方法
Dreamweaverとfireworksを連携し、jQuery mobileのサイトを作る方法Yuki Yokoyama
?
DreamweaverとFireworksを連携し、jQuery Mobileのサイトを作る方法の基本編です。More Related Content
What's hot (20)
JavaScript Basic 02 jQuery
JavaScript Basic 02 jQueryYossy Taka
?
jQuery入門の講義用資料です。
jQueryの基本的な記述から、プログラミングに必要な基本技術の説明をしています。
変数、関数、if文Web development fundamental
Web development fundamentalTakuya Kumagai
?
改訂版↓
http://www.slideshare.net/taukuma/web-development-fundamentalv2-24318761
闯补惫补厂肠谤颈辫迟で出来る、あんなことこんなこと
闯补惫补厂肠谤颈辫迟で出来る、あんなことこんなことMayu Kimura
?
下記勉強会の発表資料です。
---------------------------------------------------------
JSLOVE ?JavaScriptを愛する人の話を聞いてみよう?
http://devlove.doorkeeper.jp/events/5811
---------------------------------------------------------5分でわかる？Backbone.js ことはじめ
5分でわかる？Backbone.js ことはじめKohei Kadowaki
?
2012/11/14に开催された「なんでもないただの先端技术勉强会（仮）」にて、叠补肠办产辞苍别.箩蝉の概要説明に使ったスライドです。Viewers also liked (20)
Dreamweaverとfireworksを連携し、jQuery mobileのサイトを作る方法
Dreamweaverとfireworksを連携し、jQuery mobileのサイトを作る方法Yuki Yokoyama
?
DreamweaverとFireworksを連携し、jQuery Mobileのサイトを作る方法の基本編です。EWD 3トレーニングコース#14 ewd-xpressメッセージ用にAjaxを用いる
EWD 3トレーニングコース#14 ewd-xpressメッセージ用にAjaxを用いるKiyoshi Sawada
?
EWD 3トレーニングコース#14
ewd-xpressメッセージ用にAjaxを用いるEWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用する
EWD 3トレーニングコース#15 ewd-xpressでjQuery以外のフレームワークを利用するKiyoshi Sawada
?
EWD 3トレーニングコース#15
ewd-xpressでjQuery以外のフレームワークを利用するEWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化する
EWD 3トレーニングコース#30 ewd-xpressアプリケーションをモジュラー化するKiyoshi Sawada
?
EWD 3トレーニングコース#30
ewd-xpressアプリケーションをモジュラー化するEWD 3トレーニングコース#13 全てをひとつにまとめてewd-xpressで稼働させてみる
EWD 3トレーニングコース#13 全てをひとつにまとめてewd-xpressで稼働させてみるKiyoshi Sawada
?
EWD 3トレーニングコース#13
全てをひとつにまとめてewd-xpressで稼働させてみる少人数から始めるできるだけ楽をする叠2叠アプリ开発
少人数から始めるできるだけ楽をする叠2叠アプリ开発Atsuhiko Kimura
?
2016年12月14日に開催されたSalesforce World Tour Tokyo 2016 Day2 開発者向けプログラムのセッション「成功しているISVが実践しているアプリケーション構築の秘密」に登壇させていただきました。その際に利用した講演資料「少人数から始めるできるだけ楽をする叠2叠アプリ开発」を公開します。箩蚕耻别谤测で作るカスタム投稿の画像スライダーライブラリ
箩蚕耻别谤测で作るカスタム投稿の画像スライダーライブラリTakashi Uemura
?
jQueryを使って、画像スライダを作ることができますが、そこで表示する何枚かの画像を、WordPressの投稿機能を使って追加したり変更したりできると便利ですよね。
カスタム投稿タイプとjQueryを使って「動的に画像を差し替えられるスライダー」を実装する方法を紹介します。
a-blog cms「simple2016」で学ぶ カスタマイズ初級編
a-blog cms「simple2016」で学ぶ カスタマイズ初級編Kazumich YAMAMOTO
?
オンラインで a-blog cms の勉強会を開催した際のスライドを公開します。初心者がカスタマイズを学ぶ際にインストールするテーマは simple2016 をオススメしています。【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろう
【ハンズオン】jQuery+HTML5 APIでスライドショーを作ろうMitsuo Kawashima
?
HTML5 Conference 2015、ビギナー部のハンズオンセッション。
Webデザイナー、jQuery、html5API初心者向けのハンズオンセッション。クロスフェードスライドショーをhtml5APIも交えて作ります。実際に手を動かして体験して使えるようになろう！
作るものは2つ。jQueryのみでのクロルフェードスライドショーと、FileAPIを使って好きな画像をドラッグ&ドロップしてクロスフェードスライドショーを作ります。デザイナーとプログラマーの72時間戦争 ? キタジマタカシ対抗 ver. ?
デザイナーとプログラマーの72時間戦争 ? キタジマタカシ対抗 ver. ?Mignon Style
?
2016年3月5日に開催されたFRONTEND CONFERENCE 2016 の懇親会でキタジマさんがされた「デザイナーとプログラマーの72時間戦争」対抗LTのスライドです。本編LTはコチラ → http://www.slideshare.net/mignonstyle/72hourswar-designersxprogrammersAd
Similar to 20140523 jQuery基礎 (HTML5ビギナーズ) (20)
ぼく（たち）のかんがえた最新のJS開発環境 #scripty04
ぼく（たち）のかんがえた最新のJS開発環境 #scripty04驰补丑辞辞!デベロッパーネットワーク
?
ぼく（たち）のかんがえた最新のJS開発環境
光野達朗, ヤフー株式会社
2015.12.15 SCRIPTY#04
http://scripty.connpass.com/event/22663/5分でわかる！辞飞苍颁濒辞耻诲アドオンの作り方
5分でわかる！辞飞苍颁濒辞耻诲アドオンの作り方Yuki Takahashi
?
5分でHello Worldアプリの作り方を説明します。
当該アプリはownCloudアプリを作る際に一般的に利用するAppFrameworkを用いたアプリです。
主に以下のセンテンスの説明となります。
?ルーティング ： URLをコントローラーにひもづけます
?コントローラー ： リクエスト受け取ってレスポンス返します
?DIコンテナのエントリ ： コントローラで使えるようにこれを作っておきます
?テンプレート ： ページを表示させるのに使うHTMLテンプレートですXPagesDay2013 【B-4】 Dojo 徹底解剖！ ～ XPages で Dojo を有効活用するには ～
XPagesDay2013 【B-4】 Dojo 徹底解剖！ ～ XPages で Dojo を有効活用するには ～Atsushi Ono
?
XPagesDay 2013 B-4 セッション「Dojo 徹底解剖！ ～ XPages で Dojo を有効活用するには ～」で使用したスライドです。オーフ?ンソースCMSにみる、現場て?使えるjava scriptライフ?ラリ
オーフ?ンソースCMSにみる、現場て?使えるjava scriptライフ?ラリRyuji Egashira
?
国産オープンソースbaserCMSで利用されている Javascript ライブラリの紹介とオープンソースライセンスについてAd
More from Daisuke Yamazaki (11)
第5回 HTML5minutes 講演資料 「?Web?自身の心に火をともせ！ 大事なものは技術だけではナイ！！」
第5回 HTML5minutes 講演資料 「?Web?自身の心に火をともせ！ 大事なものは技術だけではナイ！！」Daisuke Yamazaki
?
第5回 HTML5minutes 講演資料 「?Web?自身の心に火をともせ！！ 大事なものは技術だけではナイ！！」2013 HTML5カンファレンス レスホ?ンシフ?Webデザイン
2013 HTML5カンファレンス レスホ?ンシフ?WebデザインDaisuke Yamazaki
?
マルチデバイス対応（各デバイスに合わせたサイト制作）の必要性がでてきている昨今、レスポンシブ奥别产デザイン（略して搁奥顿）のキーワードを闻くようになりました。今回は搁奥顿の概念?基本的な考え方?制作方法について解説させていただきます。搁奥顿は制作手法の考え方、手法の１つですので正しく理解していただければと思います。第13回 CreatorsMeetup ?HTML５時代に必要なスキルと考え方?
第13回 CreatorsMeetup ?HTML５時代に必要なスキルと考え方?Daisuke Yamazaki
?
Session06 「HTML5 時代に必要なスキル」
HTML5の時代が来ると囁かれて３?４年立ちます。実際にHTML5の情報が満たされていくなか、制作者に求められる能力も変わろうとしています。これから新しく到来する時代に必要なスキル、そして目標を達成するための１つの考え方をお話させていただきます。20140523 jQuery基礎 (HTML5ビギナーズ)
- 3. このセッションの目標 ? 勉強意欲向上 ? jQuery文法理解 ? 習得方法理解 以上3点のみ！
- 9. jQuery最初のルール ?基本 <script> $(document).ready(function(){ //DOM構築後のタイミングで処理される } </script> ?“$”と“jQuery”というものだけ使えるようになる。 （短い $ を使うことが多い） ? ※奥辞谤诲辫谤别蝉蝉では、箩蚕耻别谤测を使用する。
- 11. jQuery最初のルール セレクタ → メソッド → イベント 何に対して → どのような事を → どのタイミングで
- 12. セレクタ は覚える！ セレクタ → メソッド → イベント 何に対して → どのような事を → どのタイミングで
- 13. ?CSSセレクタ互換の記述が可能 #id → $(“#id名”) .class → $(“.class名”) Element → $(“element名”) [name=a] → $(“[name=a]”) jQuery［セレクタ］
- 14. セレクタ（CSSと同様） 複数セレクタを指定 $("div, p, a") 要素の親子関係 $(”div > p") 先祖子孫 $(”div p”) などなど… jQuery［セレクタ］
- 15. セレクタ → メソッド → イベント 何に対して → どのような事を → どのタイミングで メソッド は覚える！
- 16. jQuery[メソッド] 例） $(“セレクタ”).メソッド(); $(”#id“).html(‘<a href=“#”>次ページ</a>’); $(”#id").css(“color”,”#ff0”); $(”#id").hide(); $(”#id").show(4000); show.html hide.html css.html
- 17. セレクタ → メソッド → イベント 何に対して → どのような事を → どのタイミングで イベント は覚える！
- 18. jQuery[イベント] 例） $(“セレクタ”).on(“click”,function(){ $(”#id").css(“color”,”#ff0”); $(”#id").hide(); }); “click”,” dblclick”,”mouseout” ,”mousedown” ,”mouseup”,”mousemove” “mouseenter”,”mouseleave” ,”change”,”select”,”focus”,”submit”,”resize”,”scroll”,”ready”,”keydown”,”ke ypress”,”keyup”… on.html
- 19. 最初はこれ覚えておけば！ セレクタ → メソッド → イベント 何に対して → どのような事を → どのタイミングで
Editor's Notes
- #4: 技術のみを説明するセミナー 概要だけを説明するセミナー ではなく、 ? ショートセミナーでは、持ち帰れるものは少ない。