HTML5-CSS3-jQuery

CDNを使う

<script src="ここにURLを記述"></script>

jQueryからダウンロードして使う

自分のディレクトリ内に設置する

<script src="保存した場所へのパス"></script>

基本的構文

対象となる要素をセレクターで指定し、操作する

$("セレクター").メソッド();

スクリプトを開始させる

ブラウザが読み込んだときに動作させる

$(function(){処理の内容});

メソッド・チェーン

複数の処理を連続して実行できる

$("div#first p").hide().removeClass("second").addClass("third")
.show();           

基本セレクター

• #id名

  id属性値

• 要素名

  要素名

• .クラス名

  class属性値

• セレクター,セレクター

  複数のセレクター

• *

  すべての要素

階層セレクター

• 要素名 子孫要素名

  [要素名]の子孫要素名

• 親要素名>子要素名

  [親要素名]の子要素名

• 直前の要素名+隣接する要素名

  同じ親要素をもつ[直前の要素名]の直後にある要素

• 直前の要素名-隣接する要素名

  同じ親要素をもつ[直前の要素名]以降に出現する要素

基本フィルター

• セレクター:first

  一番最初の要素

• セレクター:last

  一番最後の要素

• セレクター:not(セレクター2)

  [セレクター2]以外の要素

• セレクター:even

  偶数番目の要素(0から数える)

• セレクター:odd

  奇数番目の要素(0から数える)

• セレクター:eq(数値)

  [数値]番目の要素(0から数える)

• セレクター:gt(数値)

  インデックスが[数値]より大きい要素(0から数える)

• セレクター:lt(数値)

  インデックスが[数値]より小さい要素(0から数える)

• セレクター:header

  見出し要素(h1,h2,…)

• セレクター:animated

  アニメーション実行中の要素

コンテンツフィルター

• セレクター:contains(文字列)

  [文字列]を含む要素

• セレクター:parent

  子要素をもつ要素(テキストも対象)

• セレクター:emply

  子要素をもたない要素(テキストも対象)

• セレクター:has(セレクター2)

  [セレクター2]の子要素をもつ要素

可視性フィルター

• 要素名:visible

  表示状態の要素

• 要素名:hidden

  非表示状態の要素

属性フィルター

• セレクター[属性名]

  [属性名]をもつ要素

• セレクター[属性名=属性値]

  [属性名]の値が[属性値]と等しい要素

• セレクター[属性名!=属性値]

  [属性名]の値が[属性値]と異なる要素

• セレクター[属性名^=属性値]

  [属性名]の値が[属性値]で始まる要素

• セレクター[属性名$=属性値]

  [属性名]の値が[属性値]で終わる要素

• セレクター[属性名*=属性値]

  [属性名]の値が[属性値]を含む要素

• セレクター[属性名]

  [属性名]をもつ要素

• セレクター[属性名]

  [属性名]をもつ要素

• セレクター[属性フィルター1][属性フィルター2]…

  すべての[属性フィルター]の条件を満たす要素

子要素フィルター

フォーム

• セレクター:input

  input要素textarea要素select要素button要素

• セレクター:text

  type属性が"text"のinput要素

• セレクター:password

  type属性が"password"のinput要素

• セレクター:radio

  type属性が"radio"のinput要素

• セレクター:checkbox

  type属性が"checkbox"のinput要素

• セレクター:file

  type属性が"file"のinput要素

• セレクター:hidden

  type属性が"hidden"のinput要素と非表示状態の要素

• セレクター:image

  type属性が"image"のinput要素

• セレクター:button

  type属性が"button"のinput要素とbutton要素

• セレクター:submit

  type属性が"submit"のinput要素とbutton要素

フォームフィルター

• セレクター:enabled

  利用可能な要素

• セレクター:disabled

  利用不能な要素

• セレクター:checked

  チェックされている要素

• セレクター:selected

  利用可能な要素

• セレクター:checkbox

  type属性が"checkbox"のinput要素

イベント用メソッド

• click()

  クリック

• dbclick()

  ダブルクリック

• keydown()

  キーボードの何らかのキーが押された

• keyup()

  キーボードの何らかのキーが押され、離された

• mouseover()

  オブジェクト上にマウスが乗った

• mousedown()

  マウスの左ボタンが押された

• mouseup()

  マウスの左ボタンが押され、離された

• mouseout()

  オブジェクト上からマウスが離れた

• mousemove()

  オブジェクト上でマウスが動いた

• focus()

  オブジェクトがフォーカスされた

• blur()

  オブジェクトがフォーカスを失った

• $(window).scroll()

  ページがスクロールした

• $(window).resize()

  ウィンドウのサイズが変更された

• select()

  テキストボックスなどで文字列が選択された

• change()

  input要素でvalue属性の値が変更された

• submit()

  フォームが送信された

• unload()

  ページが再読み込みされた

• error()

  ブラウザ上で何らかのエラーが発生した

jQueryコア

• $(セレクター)

  [セレクター]で選択した要素のjQueryオブジェクトを取得する

• $(セレクター,要素セット)

  [要素セット]の中から[セレクター]で選択された要素のjQueryオブジェクトを返す

• $(HTML文字列)

  [HTML文字列]をjQueryオブジェクトへ変換する

• $(セレクター).each(匿名関数)

  [セレクター]で選択された要素を[匿名関数]でひとつずつ処理する

• $(セレクター).size()

  [セレクター]で選択された要素の数を返す

• $(セレクター).index(要素)

  [セレクター]で選択された要素の中で[要素]に該当するインデックス番号を返す(0から数える)

• jQuery.noConfict

  他のJavaScriptライブラリとの共存をサポートする。($ではなくjQueryを使用する)

属性関数

• $(セレクター).attr(属性名)

  [属性名]の属性値を返す

• $(セレクター).attr({属性名1:属性値1,属性名2:属性値2…})

  [親要素名]の子要素名

• $(セレクター).removeAttr(属性名)

  [属性名]を削除する

• $(セレクター).addClass("クラス名1 クラス名2…")

  クラス属性に[クラス名]を追加する

• $(セレクター).removeClass("クラス名1 クラス名2…")

  [クラス名]を削除する

• $(セレクター).html(HTML文字列)

  要素のHTMLを[文字列]に設定する

• $(セレクター).text(文字列)

  要素のテキストを[文字列]に設定する

• $(セレクター).val(value値)

  value属性に[value値]を設定する

トラバース(DOMツリーの移動)

• $(セレクター).find(条件式)

  [セレクター]で選択した要素のうち、条件に合致する子要素を返す

• $(セレクター).parent([条件式])

  [セレクター]で選択した要素のうち、条件に合致する親要素を返す

• $(セレクター1).children(セレクター2)

  [セレクター1]の子要素のうち[セレクター2]に合致する子要素を返す

• $(セレクター).first()

  [セレクター]で選択した要素のうち最初の要素を返す

• $(セレクター).last()

  [セレクター]で選択した要素のうち最後の要素を返す

• $(セレクター1).not(セレクター2)

  [セレクター1]で選択した要素のうち[セレクター2]以外の要素を返す

HTML(DOM)要素の操作

• $(セレクター).prepend(HTML文字列)

  先頭に[HTML文字列]の要素を追加する

• $(セレクター).append(HTML文字列)

  最後に[HTML文字列]の要素を追加する

• $(セレクター1).after(HTML文字列)

  後ろに[HTML文字列]の要素を追加する

• $(セレクター).bofore(HTML文字列)

  前に[HTML文字列]の要素を追加する

• $(セレクター).remove()

  要素を削除する

CSS操作

• $(セレクター).css(CSS属性名)

  [CSS属性名]の属性値を返す

• $(セレクター).css(CSS属性名,CSS属性値)

  [CSS属性名]に[CSS属性値]を設定する

• $(セレクター1).position()

  要素の位置をセットしたオブジェクトを返す(親要素からの相対位置をピクセル単位)

• $(セレクター).offset()

  要素の位置をセットしたオブジェクトを返す(ドキュメント上の表示位置をピクセル単位)

• $(セレクター).height()

  高さをピクセル単位で返す

• $(セレクター).widht()

  幅をピクセル単位で返す

イベント処理

• $(セレクター).bind(イベント名,処理の内容)

  イベントを設定する

• $(セレクター).trigger(イベント名)

  [イベント名]に設定したイベントを発生させる

• $(セレクター1).unbind(イベント名)

  イベントを削除する

• $(セレクター).live(イベント名,処理の内容)

  イベントを設定する。動的に生成した要素にも設定可能

• $(セレクター).die(イベント名)

  liveメソッドで設定したイベントを削除する

ビジュアルエフェクト

• $(セレクター).fadeIn(処理時間 ミリ秒)

  要素を[処理時間]でフェードインする

• $(セレクター).fadeOut(処理時間 ミリ秒)

  要素を[処理時間]でフェードアウトする

• $(セレクター).slideDown(処理時間 ミリ秒)

  要素を[処理時間]でスライドダウンする

• $(セレクター).slideUp(処理時間 ミリ秒)

  要素を[処理時間]でスライドアップする

• $(セレクター).show(処理時間 ミリ秒)

  要素を[処理時間]かけて表示する

• $(セレクター).hide(処理時間 ミリ秒)

  要素を[処理時間]かけて非表示にする(displayをnoneにする)

ユーティリティ

• $.trim(文字列)

  [文字列]の前後にある空白や改行を削除する

• $.isEmptyObject(オブジェクト)

  [オブジェクト]が空かどうかを判定する

• $.isFunction(オブジェクト)

  [オブジェクト]が関数かどうかを判定する

• $.contains(要素1,要素2)

  [要素2]が[要素1]に含まれているかどうかを判定する