JavaScript jQuery セレクタ 拡張セレクタ
jQueryにはCSSには存在しない独自のセレクタがあります。「:animated」はjQueryの拡張機能であり、アニメーションが実行中の要素を取得するセレクタです。拡張セレクタの使用は簡潔にプログラミングすることにも繋がります。書式$(':animated')$('div:animated')サンプル拡張セレクタの利用。サンプルでは、3つ並んでいる長方形(div要素)のうち、真ん中のひとつが....
セレクタ
JavaScript 
JavaScript jQuery セレクタ 属性のセレクタ
さまざまな方法で要素の属性値を調べ、マッチする要素を見つけてくれ るのが、これらのセレクタ群です。 まず、最も単純な属性名だけのセレク タ 「$('')」 は、与えられた属性名の属性を持つ要素すべてが マッチします。 例えば、 aタグであれば hrefや targetが属性となりマッチ します。 値がどうであろうと、 要素にその属性さえ指定されていれば抽出 されます。「$('')」 「$('')」...
JavaScript jQuery セレクタ フォームのセレクタ
jQueryでは、フォーム要素に対しても、様々なセレクタが用意されています。:inputは、フォーム内のすべてのコントロールにマッチします。:inputは、フォーム内のすべてのコントロールにマッチします。「input type="text"」や「input type="checkbox"」といった、タグに「input」を含む要素だけでなく、select、textareaにもマッチします。:text...
JavaScript jQuery セレクタ 可視条件のセレクタ
これらは、要素の表示状態を利用して抽出条件とするセレクタです。:hiddenはページ上で隠された要素にマッチします。隠されたと判断される条件は、次のようにいくつかあります。display:noneが指定されている要素input type="hidden"のフォーム要素widthやheightが0に設定されている要素親要素、より上階層の要素が隠されているため表示されていない要素ただし、スタイル「vi...
JavaScript jQuery セレクタ 階層のセレクタ
これらは、DOMの階層構造を利用して抽出条件とするセレクタです。「＞」を使って表現する「$('親>子')」のセレクタでは、「親」で指定した要素の中にある子要素を選択します。つまり、直接の親子関係が指定した条件に合致する要素だけマッチします。「スペース」を使って表現する「$('先祖 子孫')」のセレクタは、両者が直接親子関係になくても、階層的に先祖と子孫の関係にあればまっちします。つまり、祖父、曾祖...
JavaScript jQuery セレクタ 子ノードのセレクタ
これらの、「子ノード」に着目して抽出条件とするセレクタです。:first-childと:last-childは、それぞれ:firstと:lastに似ていますが、:first及び:lastが選択された要素そのものにマッチするのに対し、選択された要素の子ノードを対象にする点が異なります。また、:firstが必ず１つの要素だけにマッチするのに対し、:first-childは元なるセレクタにマッチする要素...
JavaScript jQuery コンテンツの内容によるセレクタ
contains()、empty、has()、parentは、要素に含まれる内容によって、マッチする要素を抽出します。:contains()は、与えた引数の文字列を含む要素だけがマッチします。:has()は、与えたセレクタにマッチする要素を子ノードとして持つ要素だけがマッチします。:emptyと:parentは正反対の意味になります。:emptyは、子ノードを持たない空の要素だけがマッチします。:...
JavaScript jQuery セレクタ インデックスによるセレクタ
要素には、出現順に0あｋら始まる番号が「インデックス」として割り振られます。:eq、:lt、:gt、:odd、:evenは、インデックスの値に応じて抽出条件を指定するセレクタです。これらのセレクタでは、元になる選択条件に加え、与えたインデックス番号によって結果が抽出されます。:eqは「equel」つまりイコールの意味で、与えたインデックス値に合致する要素を選択します。インデックス値は0から始まりま...
JavaScript jQuery セレクタ 複数のセレクタをまとめて使う
指定したセレクタそれぞれにマッチした要素の集合が、1つのjQueryオブジェクトとして返されます。ただし、要素の順番は特に決まっていませんので、ドキュメント内の出現順や指定したセレクタの順に返されることを期待して処理を書かないようにしなければなりません。書式$(' セレクタ1,セレクタ2,セレクタ3,・・・ ')$('div, p, .myClass, #myId')サンプル複数のセレクタ<hea...
JavaScript jQuery セレクタ 要素
HTMLタグから<>を除いたものが、要素セレクタです。ドキュメントの中で該当するタグで記述されたすべての要素にマッチします。書式$(' 要素名 ')$('div')$('p')$('body')サンプル要素セレクタ。サンプルではセレクタにspanタグを設定し、文字色を変更しています。<head> <meta charset="UTF-8"> <title>テストページ</title> <scrip...
JavaScript jQuery セレクタ クラス
「.」で始まるセレクタは、class属性で要素を抽出します。id属性では1つのid名を複数の要素に付与できませんが、class属性ではそれが可能となり、１つのクラス名を複数の要素にあてられます。書式$(' .クラス名 ')$('.header')サンプルクラスによる選択。サンプルではredクラスが付与された要素のみ、文字色を赤にするように記述しています。<body> <button>クリック</b...
JavaScript jQuery セレクタ id
「#」はid属性を指定するセレクタです。id属性は、ドキュメント内で必ず一意になるように定義されていなければなりません。つまり、このセレクタでは、選択される要素は必ず１つです。複数の要素に同じid名を付けることはできません。書式$('#id名')$('#content')サンプルid属性による選択。サンプルでは、id属性に「select」と設定したp要素だけ、クリックボタンをクリックすると赤い線で...
JavaScript jQuery セレクタ「*」全選択
DOMのすべての要素を選択します。全要素を調べるため、処理に時間がかかる場合があります。書式$('*')サンプルすべての要素を選択。サンプルでは、クリックボタンをクリックすると、セレクタで選択したbodyを含むすべての要素に赤い線が付与されます。<body> <button>クリック</button> <div> div <p>p</p> </div> <p>p</p> <span>span</s...