まるでCSSを記述するように、 アニメーションを作成できるjQuery

まるでCSSを記述するように、 アニメーションを作成できるjQuery

cssを書くような記述方式で、htmlから対象の要素・属性を指定して、その要素をアニメーションのように動かすことができるjQuery。

jQueryでは「要素の取得→関数の実行」の順序で処理が行われること。そして、処理に関しても「メソッドチェーン」と呼ばれる形で、各処理の間に「.」をつけることで、つなげて処理が行えること。

そんな、JavaScriptのライブラリのひとつとしては、簡単かつたくさんのことができるjQueryについて、その基礎がまとめられた本でした。

ありがとうございました!

本のまとめ

▼読んだ本は?

■jQuery入門道場
■白岩登

▼jQueryとは?

■JavaScript用のライブラリのひとつ
■MIT Licenseで使える
■ライブラリの著作源表示を消さなければ、商用でも利用できる
■jQuery本体に加え、jQuery UIのプラグイン、jQuery Mobileのプラグインがある

▼jQueryの利用方法は?

【1】jQueryサイトからダウンロード
http://jquery.com/
【2】jQueryのソースを直接読む予定がなければ「compressed, production」でいい
【3】「compressed, production」はファイルの中身が縮小されているもののこと
【4】以下のように、ソース形式でHTML側から読み込む

【5】以下のように記載し、HTMLの処理が完了した時点で、jQueryを読み込む形にする

▼jQueryで要素を選択・取得するには?

■要素(タグ)の選択・取得

■クラスの選択・取得

■IDの選択・取得

■グループの選択・取得

■すべての要素の選択・取得

■属性の選択・取得

▼jQueryで利用できる絞り込みフィルターとは?

■first:マッチした最初の要素だけ絞り込み

■first-child:マッチした子要素すべてを絞り込み

■last:マッチした最初の要素だけ絞り込み

■nth-child(n):n番目の要素を絞り込み

■nth-child(even):偶数番目の要素を絞り込み

■nth-child(odd):奇数番目の要素を絞り込み

■nth-child(n):n番目の要素を絞り込み

■not:マッチしない要素のみ絞り込み

■contains:特定のテキストを含む要素のみ絞り込み

■has:特定のセレクタを含む要素のみ絞り込み

■is:メソッドチェーンで指定した要素のみ絞り込み

▼属性・クラスを操作するには?

■「attr」属性の追加

■「removeAttr」属性の削除

■「addClass」クラス名の追加

■「removeClass」クラス名の削除

■「toggleClass」すでに該当のクラス名があれば削除し、なければ追加

■「hasClass」指定したクラス名があればTrueを返し、なければFalseを返す

▼CSSを追加するには?

■「css」CSSを一つ追加

■「css」CSSを複数追加

▼要素の位置を取得するには?

■「scrollTop」スクロールバーの縦位置を取得

■「scrollLeft」スクロールバーの横位置(左側から)を取得

■「offset」HTMLドキュメント全体からの相対位置を取得

■「position」親要素からの相対位置を取得

▼HTMLやテキストをそのまま取得するには?

■「html」HTMLをそのまま取得する

■「text」要素内のテキストを取得する

■「prepend」「append」特定の領域の前後に要素を追加
「prepend」要素を、先頭に追加する

■「append」要素を、最後尾に追加する

■「prependTo」要素を、先頭の1個次に追加する

■「appendTo」要素を、最後尾の1個前に追加する

▼要素を包み込む・置き換えるには?

■「wrap」要素を包み込む

■「replaceWith」要素を置き換える

▼要素の削除・クローンを作成するには?

■「empty」要素の中身だけを削除する

■「clone」要素を複製する

▼途中から一部の要素を変化させる方法は?

■「first」一番はじめの要素だけ追加で変化する

■「last」一番最後の要素だけ追加で変化する

■「eq()」指定した番号の要素だけ追加で変化する

■「filter」指定したセレクターの要素だけ追加で変化する

■「not」指定したセレクター以外の要素だけ追加で変化する

■「find」指定したセレクターの要素の子孫要素を追加で変化する

■「length」要素の数を返す

■「each」マッチした要素すべての1つ1つに対して、繰り返し関数を実行していく

■「get」DOM要素を取得

■「toArray」マッチしたDOM要素を配列で取得

■「map」マッチした要素を戻り値として返す

■「index」何番目の要素かを返す

▼イベントとは?

■ユーザーのクリック・マウスオーバー・ページの読み込み完了など、特定のアクションに応じて追加動作を行うこと

■「on click」クリックした時にイベント発生

■「mouseenter」「mouseleave」マウスがのる・離れる状態にて、画像を切り替える

■「hover」マウスがのる・離れる状態にて、画像を切り替える

▼Ajaxとは?

■ページ全体のリフレッシュを行わずに、JavaScriptによりデータ交換する技術
■必要な部分のみデータ取得すれば、取得データを元にページの一部だけを更新
■処理の流れとして、サーバにデータを送信(リクエスト)し、サーバからデータを受け取る(レスポンス)
■非同期で処理が行われる
■Ajaxの記述方法は以下(jsonファイルからデータを取得)

■「get」特定のファイルの取得方法は以下

▼アニメーションの付与方法は?

■「show」「hide」表示・非表示を切り替える

■「toggle」表示・非表示を切り替える

■「fadeIn」「fadeOut」で透明度を切り替える

■「fadeToggle」で透明度を切り替える

■「animate」指定したcssのプロパティに変化させる

関連する記事