読書メモ@つくって覚える`jQuery`入門

jQuery は多少触ったことがあったので流し読みでだいたい理解できた。

jQuery UI の部分はサンプルコードをテキトーに触りつつ流し読みであんまり理解してないけども…まぁ使う機会があればググればわかるかと。

jQuery UI の主な機能

jQuery には GUI 部品が提供されていない。

jQueryGUI 部品・機能を拡張するライブラリが jQuery UI

ユーザーインターフェース機能(Interactions)

  • ドラッグ機能(Draggable)
  • ドロップ機能(Droppable)
  • リサイズ機能(Resizable)
  • 選択機能(Selectable)
  • 並び替え機能(Sortable)

GUI 部品 (Widgets)

  • アコーディオン(Accordion): .accordion(arg)
  • オートコンプリート(Autocomplete)
  • ボタン(Button)
  • カレンダー(Datepicker)
  • ダイアログ(Dialog)
  • プログレスバー(Progressbar)
  • スライダー(Slider)
  • タブ(Tabs): .tabs(arg)

メモ

  • .click(処理) でクリックイベントを記述可能。.submit で送信イベント, .change でチェンジイベント, .keypress とか .keyup とか .keydown でキーイベント, .focus でフォーカスイベント, .blur でブラーイベント, .scroll でスクロールイベント
  • アニメーションのメソッド : show-hide-toggle, slideUp-slideDown-slideToggle, fadeOut-fadeIn-fadeToggle, fadeTo
  • show, hidejQuery UI による拡張によりエフェクトを指定できる。
  • $(selector)のメソッド : .val()value属性の値を取り出せる。.attr("属性名"[,"セットする値"]) で指定した属性値にアクセスできる。.prop("属性名"[, "セットする値"])DOMプロパティの値にアクセスできる
  • $(複数要素のセレクタ:eq(0から始まるindex)) で特定のインデックスの要素を取得できる。他には :first, :last, :not(セレクタ), "セレクタ[属性名=値]" とかがある。
  • $(":radio:checked") はチェックされているラジオボタンのセレクタ
  • セレクタ.addClass, .removeClassclass 属性値の追加・削除
  • セレクタ.css("height", 500) とかでcssの内容を書き換えられる。
  • セレクタ.text で 要素ないのテキストをセット。.html だとHTMLとしてセットできる。.append は文字列を末尾に結合
  • セレクタ.load() で読み込んだ内容を要素のコンテンツとしてセット
  • $("a").click(function(){return false;}) でページ遷移を阻害。preventDefault() でもページ遷移機能を阻害できる。
  • $(window).width(), $(window).scrollTop()
  • セレクタ.find() で絞込み
  • セレクタ.each() で foreach な処理
  • サンプルのリンク : つくって覚えるjQuery入門
Share