社内講習わくわくjQuery編2 - リファレンスから使えそうな機能をピックアップする

各領域の主要な機能 ( メソッド )

jQuery - StackTrace

Main Page - jQuery JavaScript Library

jQuery API Referenceにならって,jQueryの機能を分類し,各領域の主要な機能を紹介します.

詳細な日本語訳はすでに存在するので,自分のやりたいことを大分類から探していくことさえできれば,リファレンスも有効に活用できます.

※CSSはAttributesと何となく近しいので,まとめてしまいました.style attributeということで.

セレクタ ( Selector )

Selectors - jQuery API 1.4.4 日本語リファレンス - StackTrace

CSS3までのセレクタがJavaScriptでも使えると思ってください.ただし,一部は下記に示すように,jQueryの独自仕様による記法もあるので,それらをCSS3セレクタと間違わないように気をつけます.

jQueryの独自仕様

:first, :last, :even, :odd, :eq(), :gt(), :lt(), :parent, :header, :selected, :input, :button, :text, :password, :radio, :checkbox, :submit, :image, :reset, :file, :hidden, :visible

これらは,jQueryが独自に拡張している記法なので,CSS3ではありません.うっかり逆輸入しても動かないので注意してください.

CSSと属性操作 ( CSS & Attributes )

Attributes - jQuery API 1.4.4 日本語リファレンス - StackTrace

要素の属性を操作する機能群.

attr : 要素の属性を取得/設定します.慣れてくると,処理に必要な情報を属性に仕込んで取り扱ったりするので使用頻度が上がります.

css : 要素のスタイルを取得/設定します.頻出しそうなようでじつはあまり使わない.

val : input, select, textarea等のフォームパーツ系で使います.要素の入力値を取得/設定します.input[type="hidden"]な要素にも有効です.超頻出.

addClass, removeClass, toggleClass : クラス三兄弟.classもattrで属性値として取得できますが,classを操作する場合は通常の三種を使用します.これも超頻出.

探索 ( Traversing )

Traversing - jQuery API 1.4.4 日本語リファレンス - StackTrace

ある要素を基点に,目的の要素を探索するための機能群.

parent : 要素の親要素を選択します.基準となる選択中の要素以外も操作したい時に使います.

children : 要素の子要素集合を取得します.親はひとりですけど,子供はどれだけいるか分からないんですよね.

next : 要素の次の兄弟要素を選択します.次のLI要素とか.

prev : 要素の前の兄弟要素を選択します.前のLI要素とか.

DOM操作 ( Manipulation )

Manipulation - jQuery API 1.4.4 日本語リファレンス - StackTrace

要素を動かしたり,追加したり,置き換えたりする機能群.

append, appendTo : 要素を,別の要素の後尾に追加します.Toの有無は文脈の違い.詳しくはリファレンスを参照.

prepend, prependTo : 要素を,別の要素の先頭に追加します.Toの有無は文脈の違い,詳しくはリファレンスを参照.

after, insertAfter : 要素を,別の要素の後ろに追加します.insertの有無は文脈の違い.詳しくはリファレンスを参照.

before, insertBefore : 要素を,別の要素の前に追加します.insertの有無は文脈の違い.詳しくはリファレンスを参照.

イベント ( Events )

Events - jQuery API 1.4.4 日本語リファレンス - StackTrace

イベントに対して,何かしらの処理を発生させる機能群.

click : クリックイベント.要素をクリックしたときに,何かを起こします.

hover : ホバーイベント.要素の上にマウスが来たときと,要素の上からマウスが去ったときに,何かを起こします.

change : チェンジイベント.要素のvalueに変更を加えたときに,何かを起こします.

エフェクト ( Effects )

Effects - jQuery API 1.4.4 日本語リファレンス - StackTrace

フェードしたり移動させたり,アニメーション制御をするときの機能群.

show, fadeIn, slideDown : 何かを表示する系.単純な表示.フェードで表示.スライドして表示.

hide, fadeOut, slideUp : 何かを非表示にする系.単純な非表示.フェードで非表示.スライドして非表示.

toggle, fadeToggle, slideToggle : 表示/非表示を切り替える系.要素が表示状態であれば,非表示にします.要素が非表示状態であれば,表示します.


Author

ahomuAyumu Sato

overflow, Inc.VPoE

東京資本で生きる名古屋の鳥類

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn にも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu

Related

Latest

Archives

Tags

Search