- 索引
-
- ├ 目次
- ├ jQuery(selector)
- ├ jQuery(html)
- ├ jQuery(function)
- ├ jQuery.holdReady()
- ├ jQuery.noConflict()
- └ jQuery.sub()
- 他ページ参照
- └ jQuery.when()
-
- └ 目次
- 基礎
- ├ *(すべて)
- ├ element(html要素)
- ├ #id名(ID属性)
- ├ .class名(clas属性)
- ├ 複数のセレクタ(and)
- └ 複数のセレクタ(or)
- 階層関連
- ├ 先祖 子孫
- ├ >(子要素)
- ├ +(直近の後要素)
- └ ~(後要素)
- 属性
- ├ [属性名]
- ├ [属性名='値']
- ├ [属性名!='値']
- ├ [属性名^='値']
- ├ [属性名$='値']
- ├ [属性名*='値']
- ├ [属性名-='値']
- ├ [属性名|='値']
- └ 複数の属性
- 基本フィルタ
- ├ :root
- ├ :header
- ├ :lang()
- ├ :target
- ├ :animated
- ├ :first
- ├ :last
- ├ :even
- ├ :odd
- ├ :eq()
- ├ :gt()
- ├ :lt()
- └ :not()
- 子要素フィルタ
- ├ :first-child
- ├ :first-of-type
- ├ :last-child
- ├ :last-of-type
- ├ :only-child
- ├ :only-of-type
- ├ :nth-child()
- ├ :nth-of-type()
- ├ :nth-last-child()
- └ :nth-last-of-type()
- 可視性フィルタ
- ├
- └ :visible
- コンテンツフィルタ
- ├ :contains()
- ├ :has()
- ├ :empty
- └ :parent
- フォーム
- ├ :checked
- ├ :selected
- ├ :disabled
- ├ :enabled
- ├ :focus
- ├
- ├ :checkbox
- ├ :file
- ├ :image
- ├ :input
- ├ :password
- ├ :radio
- ├ :reset
- ├ :submit
- └ :text
-
- ├ .目次
- ├ .hasClass()
- ├ .addClass()
- ├ .removeClass()
- ├ .toggleClass()
- ├ .attr()
- ├ .removeAttr()
- ├ .prop()
- ├ .removeProp()
- └ .val()
-
- └ 目次
- ツリー(階層)
- ├ .siblings()
- ├ .next()
- ├ .nextAll()
- ├ .nextUntil()
- ├ .prev()
- ├ .prevAll()
- ├ .prevUntil()
- ├ .children()
- ├ .find()
- ├ .parent()
- ├ .parents()
- ├ .parentsUntil()
- ├ .offsetParent()
- └ .closest()
- フィルタリング
- ├ .eq()
- ├ .slice()
- ├ .first()
- ├ .last()
- ├ .filter()
- ├ .has()
- ├ .not()
- ├ .is()
- └ .map()
- その他
- ├ .add()
- ├ .andSelf()
- ├ .addBack()
- ├ .end()
- ├ .contents()
- └ .each()
-
- ├ 目次
- 要素の挿入
- ├ .after()
- ├ .before()
- ├ .append()
- ├ .prepend()
- ├ .insertAfter()
- ├ .insertBefore()
- ├ .appendTo()
- └ .prependTo()
- 要素の削除
- ├ .empty()
- └ .remove()
- ├ .detach()
- 要素を囲む
- ├ .wrap()
- ├ .wrapAll()
- └ .wrapInner()
- ├ .unwrap()
- その他
- ├ .text()
- ├ .html()
- ├ .clone()
- ├ .replaceAll()
- └ .replaceWith()
- 他ページ参照
- ├ .toggleClass()
- ├ .hasClass()
- ├ .addClass()
- ├ .removeClass()
- ├ .attr()
- ├ .removeAttr()
- ├ .prop()
- ├ .removeProp()
- ├ .val()
- ├ .css()
- ├ .offset()
- ├ .position()
- ├ .height()
- ├ .innerHeight()
- ├ .outerHeight()
- ├ .width()
- ├ .innerWidth()
- ├ .outerWidth()
- ├ .scrollLeft()
- └ .scrollTop()
-
- ├ 目次
- ├ jQuery.cssHooks
- ├ .css()
- ├ .height()
- ├ .innerHeight()
- ├ .outerHeight()
- ├ .width()
- ├ .innerWidth()
- ├ .outerWidth()
- ├ .offset()
- ├ .position()
- ├ .scrollTop()
- └ .scrollLeft()
- 他ページ参照
- ├ .addClass()
- ├ .hasClass()
- ├ .removeClass()
- └ .toggleClass()
-
- └ 目次
- マウスイベント
- ├ .click()
- ├ .dblclick()
- ├ .mousedown()
- ├ .mouseup()
- ├ .mouseover()
- ├ .mouseout()
- ├ .mouseenter()
- ├ .mouseleave()
- ├ .mousemove()
- ├ .hover()
- └ .toggle()
- キーイベント
- ├ .keydown()
- ├ .keypress()
- ├ .keyup()
- ├ .focusin()
- └ .focusout()
- フォームイベント
- ├ .focus()
- ├ .blur()
- ├ .change()
- ├ .select()
- └ .submit()
- ブラウザイベント
- ├ .resize()
- ├ .scroll()
- └ .error()
- ロードイベント
- ├ .load()
- ├ .unload()
- └ .ready()
- イベントハンドラアタッチ
- ├ .bind()
- ├ .unbind()
- ├ .live()
- ├ .die()
- ├ .delegate()
- ├ .undelegate()
- ├ .on()
- ├ .off()
- ├ .one()
- ├ .triggerHandler()
- └ .trigger()
- イベントオブジェクト
- ├ jQuery.Event
- ├ eo.type
- ├ eo.data
- ├ eo.pageX
- ├ eo.pageY
- ├ eo.timeStamp
- ├ eo.which
- ├ eo.result
- ├ eo.namespace
- ├ eo.target
- ├ eo.currentTarget
- ├ eo.delegateTarget
- ├
- ├ eo.stopPropagation()
- ├ eo.stopImmediateP...
- ├ eo.preventDefault()
- ├ eo.isPropagationSt...
- ├ eo.isImmediatePre...
- └ eo.isDefaultPreven...
-
- └ 目次
- 基礎
- ├ .hide()
- ├ .show()
- └ .toggle()
- スライド
- ├ .slideUp()
- ├ .slideDown()
- └ .slideToggle()
- フェード
- ├ .fadeOut()
- ├ .fadeIn()
- ├ .fadeTo()
- └ .fadeToggle()
- カスタム
- ├ .animate(prop)
- ├ .animate(prop,opt...
- ├ .stop()
- ├ .delay()
- ├ .queue()
- ├ .dequeue()
- ├ .clearQueue()
- ├ .finish()
- ├ jQuery.queue()
- ├ jQuery.dequeue()
- ├ jQuery.fx.interval
- └ jQuery.fx.off
-
- └ 目次
- 簡易メソッド
- ├ .load()
- ├ jQuery.get()
- ├ jQuery.getJSON()
- ├ jQuery.getScript()
- └ jQuery.post()
- グローバルイベントハンドラ
- ├ .ajaxComplete()
- ├ .ajaxSuccess()
- ├ .ajaxError()
- ├ .ajaxSend()
- ├ .ajaxStart()
- └ .ajaxStop()
- 低レベル・インターフェイス
- ├ jQuery.ajax()
- ├ jQuery.ajaxSetup()
- └ jQuery.ajaxPrefilt...
- お助け機能
- ├ jQuery.param()
- ├ .serialize()
- └ .serializeArray()
-
- └ 目次
- チェック
- ├ jQuery.contains()
- ├ jQuery.isArray()
- ├ jQuery.isEmptyO...
- ├ jQuery.isPlainO...
- ├ jQuery.isNumeric()
- ├ jQuery.isFunction()
- ├ jQuery.isWindow()
- └ jQuery.isXMLDoc()
- 配列/Object関連
- ├ jQuery.makeArray()
- ├ jQuery.inArray()
- ├ jQuery.grep()
- ├ jQuery.each()
- ├ jQuery.map()
- ├ jQuery.merge()
- ├ jQuery.extend()
- └ jQuery.unique()
- その他
- ├ jQuery.globalEval()
- ├ jQuery.noop()
- ├ jQuery.now()
- ├ jQuery.parseHTML()
- ├ jQuery.parseJSON
- ├ jQuery.parseXML()
- ├ jQuery.proxy()
- ├ jQuery.trim()
- ├ jQuery.type()
- ├ jQuery.support
- ├ jQuery.boxModel
- └ jQuery.browser
- 他ページ参照
- ├ .queue()
- ├ .dequeue()
- ├ .clearQueue()
- ├ jQuery.queue()
- ├ jQuery.dequeue()
- ├ jQuery.data()
- └ jQuery.removeData()
-
- ├ 目次
- ├ .data()
- ├ .removeData()
- ├ jQuery.data()
- ├ jQuery.removeData()
- └ jQuery.hasData()
- 他ページ参照
- ├ .queue()
- ├ .dequeue()
- ├ .clearQueue()
- ├ jQuery.queue()
- └ jQuery.dequeue()
-
- └ 目次
- deferredの作成
- └ jQuery.deferred()
- promiseの作成
- ├ jQuery.when()
- ├ .promise()
- └ deferred.promise()
- コールバックの設定
- ├ deferred.done()
- ├ deferred.fail()
- ├ deferred.always()
- ├ deferred.progress()
- ├ deferred.then()
- └ deferred.pipe()
- 状態の取得
- ├ deferred.state()
- ├ deferred.isReso...
- └ deferred.isReje...
- 状態の変更
- ├ deferred.resolve()
- ├ deferred.resolveW...
- ├ deferred.reject()
- ├ deferred.rejectW...
- ├ deferred.notify()
- └ deferred.notifyW...
-
- ├ 目次
- ├ jQuery.error()
- ├ .context
- ├ .jquery
- └ .pushStack()
Selectors:セレクタ
- サンプルについての注意点
- サンプルではセレクタが確認しやすいように、可能な限り紹介しているセレクタのみを利用しています。しかし実際は複数のセレクタを組みあわせて調査範囲を絞るようにした方が良いパフォーマンスを得られます。
body内全体を調べるよりも、特定の範囲内(例えばid属性がtestのdiv内)の〜を選択とした方が調べる範囲が狭く高速に処理できるからです。
基礎
基礎となるセレクタです。
*(すべて)
全ての要素を選択します。単独で利用するのではなく、他のセレクタと組みあわせて特定範囲内の全てを選択するときなどに利用します。
→詳細
element(html要素)
htmlの要素を選択します。
→詳細
#id名(ID属性)
任意のid属性を持つ要素を選択します。
→詳細
.class名(clas属性)
任意のclass属性を持つ要素を選択します。
→詳細
複数のセレクタ(and)
複数のセレクタ(主にhtml要素+id属性 or class属性)を記述し、その全てにマッチする要素を選択します。
→詳細
複数のセレクタ(or)
複数のセレクタを記述し、そのいずれかにマッチする要素をすべて選択します。
→詳細
階層関連
階層や前後関係に関連するセレクタです。
先祖 子孫
親要素内にある任意の要素を選択します。以下の「> 子要素」とは異なり、直下の要素である必要はありません。
→詳細
>(子要素)
親要素内にある任意の要素を選択します。上記の「先祖 子孫」とは異なり、直下の要素のみを選択します。
調査範囲が狭い分「> 子要素」より高速です。
→詳細
+(直近の後要素)
前要素にある「直後」の要素を1つだけ選択します。複数選択したい場合は以下の「~(後要素)」を利用します。
→詳細
~(後要素)
前要素の後ろにある全ての要素を選択します。
→詳細
属性
属性によって要素を選択するセレクタです。
[属性名]
任意の属性をもつ要素を選択します。
→詳細
[属性名='値']
任意の属性が指定した「値を持つ」要素を選択します。
→詳細
[属性名!='値']
任意の属性が指定した値「以外」の値を持つ要素を選択します。
→詳細
[属性名^='値']
任意の属性が指定した値から「始まる」要素を選択します。
→詳細
[属性名$='値']
任意の属性が指定した値で「終わる」要素を選択します。
→詳細
[属性名*='値']
任意の属性が指定した値を「含む」要素を選択します。
→詳細
[属性名-='値']
任意の属性が指定した値を「単語として持つ」要素を選択します。
→詳細
[属性名|='値']
任意の属性が指定した値と「一致またはハイフンを付け派生した」要素を選択します。
→詳細
複数の属性
複数の属性セレクタ記述し、その全てにマッチする要素を選択します。
→詳細
- フィルタとは
- :(コロン)から始まるセレクタ。
単独でも利用できますが、他のセレクタと組合わせて利用し選択対象を絞ります。
基本フィルタ
基本となるフィルタです。比較的よく利用されます。
:root
最上位の要素(つまりhtml)を選択します。
→詳細
:header
見出し要素を選択します。
→詳細
:lang()
引数で指定したlang属性の要素を選択します。
→詳細
:target
リンク先の要素を選択します。
→詳細
:animated
アニメしている要素を選択します。
→詳細
:first
最初の要素を選択します。
→詳細
:last
最後の要素を選択します。
→詳細
:even
偶数番目の要素を選択します。
→詳細
:odd
奇数番目の要素を選択します。
→詳細
:eq( )
引数で指定したインデックス番号の要素を選択します。
→詳細
:gt()
引数で指定したインデックス番号より大きい要素を選択します。
→詳細
:lt( )
引数で指定したインデックス番号より小さい要素を選択します。
→詳細
:not( )
引数で指定した「セレクタ」以外の要素を選択します。
→詳細
子要素フィルタ
子要素ごとに効力を発揮するセレクタです。
:first-child
最初の子要素を選択します。セレクタで指定した要素が最初でない場合は選択されません。
→詳細
:first-of-type
セレクタで指定された最初の子要素を選択します。:first-childと異なり、指定したセレクタが最初の子要素である必要はありません。
→詳細
:last-child
最後の子要素を選択します。セレクタで指定した要素が最後でない場合は選択されません。
→詳細
:last-of-type
セレクタで指定された最後の子要素を選択します。:last-childと異なり、指定したセレクタが最後の子要素である必要はありません。
→詳細
:only-child
子要素が1つしかないときに、その子要素を選択します。
→詳細
:only-of-type
セレクタで指定された子要素が単独の場合に選択します。:only-childと異なり、指定したセレクタが単独であれば他に要素があっても構いません。
→詳細
:nth-child( )
引数を設定することで親要素内の様々な要素を選択することができます。引数にはインデックス番号の他、even/oddや数式が利用できます。
→詳細
:nth-of-type( )
セレクタと引数で指定した子要素を選択します。引数にはインデックス番号の他、even/oddや数式が利用できます。nth-childと異なりセレクタで指定した要素しかカウントしません。
→詳細
:nth-last-child( )
「後から数えた」引数を設定することで親要素内の様々な要素を選択することができます。引数にはインデックス番号の他、even/oddや数式が利用できます。
→詳細
:nth-last-of-type( )
セレクタと「後から数えた」引数で指定した子要素を選択します。引数にはインデックス番号の他、even/oddや数式が利用できます。nth-last-childと異なりセレクタで指定した要素しかカウントしません。
→詳細
可視性フィルタ
見えている/隠れているを選別するセレクタです。
:hidden
cssの設定で表示されていない(display:noneやwidth:0px等)要素やフォームのhidden要素を選択します。
→詳細
:visible
表示されている要素を選択します。
→詳細
コンテンツフィルタ
要素の内容に関するセレクタです。divタグなら開始タグから終了タグの間が要素の内容になります。
:contains( )
引数で指定した文字列を含む要素を選択します。
→詳細
:has( )
引数で指定した子要素を持つ要素を選択します。
→詳細
:empty
何も持っていない要素を選択します。
→詳細
:parent
子要素またはテキストを持っている要素を選択します。
名称からは想像しにくいのですが上記の:emptyとは逆の機能を持ったセレクタです。
→詳細
フォーム
フォームに関するセレクタです。
:checked
チェックされた要素(チェックボックス/ラジオボタン)を選択します。
→詳細
:selected
セレクト要素で選択されている要素を選択します。
→詳細
:disabled
無効になっているフォームの要素を選択します。
→詳細
:enabled
有効になっているフォームの要素を選択します。
→詳細
:focus
フォーカスされている要素を選択します。
→詳細
:button
ボタン(button要素、typeがbuttonのinput要素)を選択します。
→詳細
:checkbox
チェックボックス(type属性がcheckboxの要素)を選択します。
→詳細
:file
ファイル選択ボタン(type属性がfileである要素)を選択します。
→詳細
:image
画像を利用したフォームボタン(type属性がimageの要素)を選択します。
→詳細
:input
input要素を選択します。
→詳細
:password
type属性がpasswordの要素を選択します。
→詳細
:radio
ラジオボタン(type属性がradioの要素)を選択します。
→詳細
:reset
リセットボタン(type属性がresetの要素)を選択します。
→詳細
:submit
送信ボタン(type属性がsubmitの要素)を選択します。
type属性を設定していないbutton要素も、初期設定値がsubmitのため選択されます。
→詳細
:text
type属性がtextの要素を選択します。
→詳細