
本講座の説明をおこない、おおまかなロードマップを示します。
本講座で出てくるソースコードは、本レクチャーの「ダウンロード可能なリソース」から一括してダウンロードできます。
本講座ではGoogle Chromeを利用します。導入の仕方や、開発者ツールの使い方を紹介しておきます。
UTF-8で開発を行っていきます。
何を使っても構いません。ここでは、複数のOSに対応している無料のテキストエディタであるAtomを使います。Atomのダウンロード先を紹介。フォルダをドロップで、ツリー表示。
本講座は、ある程度JavaScriptの基本文法を知っている方向けの講座です。そのため、JavaScriptの基本文法を、手軽に学ぶ方法を紹介します。
Q&Aを掲載していくページです。必要に応じて、参照してください。
本セクションの前置きです。
Google Chromeのバージョンによって、コンソールの出力表示の、見え方が変わることがあります。その変更がおこなわれた際に、対応した操作方法を、こちらに公開します。
jQueryとは何かについて話をします。また、jQueryの公式サイトを紹介します。
jQueryの1系と2系の話をします。目的に応じて、使い分ける理由を説明します。
jQueryの読み込み方を紹介します。ファイルをダウンロードして使う方法と、CDNを利用する方法を説明します。
jQueryの処理の基点となる、DOM準備後に処理を実行するreadyの使い方と、短い書き方を紹介します。
タグ、id、class属性で、操作対象を選択する方法を紹介します。また、選択した状態が、配列として格納されている様子を示します。
Google Chromeのコンソールの機能の$と、jQueryの$について話をします。
本セクションの前置きです。
clickイベントを例に、イベントへの処理の登録の仕方を学びます。
文字列の取得と設定を行う.text()、htmlの取得と設定を行う.html()、属性の取得と設定を行う.attr()、CSSの取得と設定を行う.css()を使えるようになります。また、メソッド チェーンの仕組みを理解します。
文字列の取得と設定を行う.text()、htmlの取得と設定を行う.html()、属性の取得と設定を行う.attr()、CSSの取得と設定を行う.css()を使えるようになります。また、メソッド チェーンの仕組みを理解します。その2。
1つ前の要素を選択する.prev()、1つ後の要素を選択する.next()を例にして、横断という処理の概要を学びます。
$()を利用して、DOM要素を作成します。また、作成したDOM要素を操作します。
.append()、.prepend()、.appendTo()、.prependTo()を例にして、要素の追加について学びます。
.append()、.prepend()、.appendTo()、.prependTo()を例にして、要素の追加について学びます。その2です。
.hide()、.show()、.toggle()を例にして、エフェクトの概要を学びます。
本セクションの前置きです。
テキスト ファイルを読み込み、情報を表示します。
ローカルサーバーを簡単に立てる方法を説明します。
非同期処理を順につないでいく、Deferredの入り口を学びます。
非同期処理を順につないでいく、Deferredの入り口を学びます。その2。
非同期処理を並列実行する、whenについて学びます。
プラグインとは何かを説明し、その使い方や探し方を学びます。
本セクションの前置きです。
詳細jQueryの進め方について説明します。基本的に、jQueryの公式APIドキュメントの内容に沿って、話を進めていきます。
日本語で読めるAPIドキュメントを紹介しておきます。
jQueryと$について学びます。
jQueryの衝突を避けるための、jQuery.noConflict()について学びます。
本セクションの前置きです。
Google Chromeのバージョンによって、コンソールの出力表示の、見え方が変わることがあります。その変更がおこなわれた際に、対応した操作方法を、こちらに公開します。
まずはAPIドキュメントを俯瞰します。またセレクタが、様々な要素を選択する方法であることを理解します。
要素を利用した選択方法を学びます。
idを利用した選択方法を学びます。
クラスを利用した選択方法を学びます。
属性を利用した選択方法を学びます。
本セクションの前置きです。
Google Chromeのバージョンによって、コンソールの出力表示の、見え方が変わることがあります。その変更がおこなわれた際に、対応した操作方法を、こちらに公開します。
選択した要素の番号を利用した選択方法を学びます。
「先頭」を指定した、様々な選択方法を学びます。
「末尾」を指定した、様々な選択方法を学びます。
n番目を指定した選択方法を学びます。nth-~を使う方法です。
「後」を指定した、様々な選択方法を学びます。
要素の子孫や子を指定した選択方法を学びます。
本セクションの前置きです。
フォーム部品の種類を利用した、選択方法を学びます。
フォーム部品の状態を利用した、選択方法を学びます。
要素の状態を利用した、選択方法を学びます。
要素の中身の状態を利用した、選択方法を学びます。
否定を利用した、選択方法を学びます。
ヘッダー要素を指定した、選択方法を学びます。
本セクションの前置きです。
まずはAPIドキュメントを俯瞰します。また横断が、選択した要素から別の要素を選択する方法であることを理解します。
兄弟要素の横断方法を学びます。
兄弟要素の横断方法を学びます。その2。
子要素や孫要素の横断方法を学びます。
親要素や先祖要素の横断方法を学びます。
本セクションの前置きです。
現在選択している要素を、絞り込む方法を学びます。
現在選択している要素を、番号で絞り込む方法を学びます。
現在選択している要素を、否定で絞り込む方法を学びます。
現在選択している要素に、選択要素を追加する方法を学びます。
現在選択している要素の選択を破棄して、1つ前の状態にする方法を学びます。
現在選択している要素全てに対して処理を行う方法を学びます。
現在選択している要素全てに対して処理を行い、実行結果をまとめた新しいjQueryオブジェクトを生成する方法を学びます。
現在選択している要素が、条件を満たしているか判定する方法を学びます。
このコースは、jQuery公式のAPIドキュメントの知識を網羅しています。セレクタを使ったDOM要素の操作から、イベント、エフェクト、Ajax、Deferredまでの、基礎知識から実際の利用までをカバーしています。
このコースを習得すれば、次のような事ができるようになります。
- WebページのDOM要素の操作。
- イベントやエフェクトの登録と活用。
- Ajax、Deferredといった、通信や非同期処理の扱い。
- 実際のアプリケーションの作成を通した、jQueryの活用。
コースで紹介されるコードは、サンプルコードとして、全てダウンロードすることができます。
‥‥‥‥‥‥‥‥‥‥
このコースを学んだ人は、3段階の講座で、jQueryを徹底的に深く使いこなせるようになります。
まずは「速習jQuery」で、jQueryの概要を学びます。
次に「詳細jQuery」で、APIドキュメントに沿った内容を詳細に学びます。
最後に「実例jQuery」で、jQueryを利用したプログラムを書けるようになります。
‥‥‥‥‥‥‥‥‥‥
このコースは、以下のように進みます。
● イントロダクション
・開発環境の準備を行います
● 速習jQuery
・基本編(jQueryとは何か?から、セレクタの利用までを紹介)
・API編(イベント、要素の操作、横断、要素の作成、要素の追加、エフェクトを紹介)
・上級編(Ajax、Deferred、プラグインの利用を紹介)
● 詳細jQuery
・jQuery
・セレクタ(基本、位置、種類と状態)
・横断(兄弟親子、その他)
・イベント(基本、キー&マウス、汎用操作、eventオブジェクト)
・属性操作
・CSS
・縦横サイズ
・Data
・操作
・エフェクト(シンプル、上級)
・Ajax
・Deferred
・Utilities
● 実例jQuery
・ブックマークレット
・Webページ上のアプリケーション
‥‥‥‥‥‥‥‥‥‥
jQueryは、Webページ作成でよく利用されるJavaScriptのAPIです。このシンプルでパワフルなAPIを使いこなせるようになり、Web開発のスキルをアップしましょう!