セレクターその２２（jQueryの独自フィルター　headerフィルター／containsフィルター／hasフィルター／parentフィルター）

jQuery セレクター

header ：h1〜h6要素のこと。独自フィルターにするほど使うのか？ contains：特定の文字列が含まれている要素。 has ：特定の「要素」が含まれている要素。 parent ：子要素やテキストを含む要素を指定可能。IsParent?みたいなニュアンスかな。とりあえず競…

2010-03-02

セレクターその２１（jQueryの独自フィルター　eqフィルター / gtフィルター / ltフィルター）

jQuery セレクター

これは今までのセレクターでは代用できないかなぁ。覚えてた方が便利だろ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:lt(2)").css("color","red"); $("li:eq(2)").css("col…</head></html>

2010-03-02

セレクターその２０（jQueryの独自フィルター　evenフィルター / oddフィルター）

jQuery セレクター

このセレクターは前にnth-child擬似クラスでちょっと出てきたからまぁ迷わんだろう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:odd").css("color","red"); $("li:even").cs…</head></html>

2010-03-02

セレクターその１９（jQueryの独自フィルター　firstフィルター / lastフィルター）

jQuery セレクター

う〜ん、わかんねぇ。。 first-child／last-childセレクターが共通の親要素を持つ要素から最初（または最後）の要素を選択するのに対して、 last／firstフィルターは指定したセレクターで最初（最後）に登場する要素を指定できます。first-child、last-child…

2010-03-01

セレクターその１８（CSSの属性セレクター[attribute^='value'],[attribute$='value'],[attribute*='value'],[attributeFilter1][attributeFilter2](複合タイプ)　[CSS3]）

jQuery セレクター

属性値を文字列とみなして、「^」は先頭、「$」は末尾、「*」は含むかどうか、複合タイプは全ての条件をandで、それぞれ判定する。んで、合致する場合のみ抽出する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //先頭が'f'で…</head></html>

2010-03-01

セレクターその１７（CSSの属性セレクター[attribute='value'] [attribute!='value']　[CSS3]）

jQuery セレクター

前エントリにさらに等号と不等号の条件をつけることが可能。サンプルは指定した属性の値が同じく指定した値に等しいものを抽出する。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("[class='fourth']").css("c…</head></html>

2010-03-01

セレクターその１６（CSSの属性セレクター[attribute]　[CSS3]）

jQuery セレクター

[attribute]で指定したattribute属性を持っている要素が抽出される感じ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //id属性を持つタグだけ色が赤になる。 $("[id]").css("color","red…</head></html>

2010-03-01

セレクターその１５（only-child擬似クラス[CSS3]）

jQuery セレクター

こいつは使い道がイメージできないなぁ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //一行目のspanだけ色が赤になる。 $("li span:only-child").css("color","red"); }) </head></html>

2010-03-01

セレクターその１４（last-child擬似クラス[CSS3]）

jQuery セレクター

これも〜、最後の合計金額を出す為のフッターとかで背景色を指定したいときとか使えるか。そんなこと行ったらfirst-childもヘッダーのバックカラー指定できるな。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:las…</head></html>

2010-03-01

セレクターその１３（nth-child擬似クラス[CSS3]）

jQuery セレクター

こ、これは・・・！！テーブル行の背景色を交互に変更したい場合なんかにものすげー役に立つぞ！特定のセレクターから指定した番号の要素だけを指定できる。セレクターの後ろに :nth-child(番号) と記述する。チーと長いが、後でみて参考にするためにも。…

2010-03-01

セレクターその１２（empty擬似クラス[CSS3]）

jQuery セレクター

子要素やテキストを含まない要素を指定できる。セレクターの後ろに :empty と記述する。あ〜、これはテーブルでやってみたいなぁ。自前タグをテーブルでやってみよう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li:no…</head></html>

2010-03-01

セレクターその１１（否定擬似クラス[CSS3]）

jQuery セレクター

セレクター内で特定の条件「以外」のものを指定できる。セレクターの後ろに :not(...) を付け、除外する条件を (...) 内に記述すると。サンプルだとnotの括弧中には擬似クラスである:first-childが指定されているけど、ようするにセレクターフォーマットの…

2010-03-01

セレクターその１０（間接セレクター[CSS3]）

jQuery セレクター

特定のセレクターの後に出現する要素を指定できる。セレクターと要素を ~(チルダ)で結びつける。前とか後ろとか先頭とか、そういう表現があるときは要素の並びのことを意味するっぽい。サンプルの状態から、また別のケースを考えてやってみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.</script></head></html>…

2010-03-01

セレクターその９（first-child擬似クラス[CSS2]）

jQuery セレクター

特定のセレクターのうち最初に登場する要素のみを指定するセレクター。ってことなんだけど、いまいちわかんねー。サンプルではli要素を指定しているけど、liは連続していることが前提なのか？と思ったので、ちょっと自分でも要素を追加してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">goog</script></head></html>…

2010-03-01

セレクターその８（隣接セレクター[CSS2]）

jQuery セレクター

隣接セレクター指定したセレクターの次に出現するセレクターを指定できる。「基準となるセレクター + 次に隣接しているセレクター」のフォーマットで指定。idだけでなく、classや子セレクターとも混ぜてみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(…</head></html>

2010-03-01

セレクターその７（子セレクター[CSS２]）

jQuery セレクター

特定の要素の直下に配置された要素を指定できるのが「子セレクター」です。子セレクターは親要素と子要素を >（大なり/greater than）で結びます。入れ子と別のセレクター（IDとclass）も試してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(…</head></html>

2010-02-28

セレクターその６（グループセレクター）

jQuery セレクター

複数のセレクターを,(カンマ)区切りで並べて指定できるのが「グループセレクター」です。それぞれのセレクターに対する命令をまとめて記述できます。サンプルでは "," の両サイドに半角スペースを挿入しているけどつなげるとどうなるんだろう。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.lo</script></head></html>…

2010-02-28

セレクターその５（ユニバーサルセレクター）

jQuery セレクター

すべての要素を指定できるのが「ユニバーサルセレクター」です。ユニバーサルセレクターは*(アスタリスク)で記述します。ですって。では早速。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { $("li *").css("color","…</head></html>

2010-02-28

セレクターその４（子孫セレクター）

jQuery セレクター

複数のセレクターをスペース区切りで指定することにより、特定の要素の内側にある要素をさらに絞りこんで指定できます。例ではclassセレクター＋要素セレクターの組み合わせだけになっていたけど、ちょっと修正してIDセレクターも含めて試してみた。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">goo</script></head></html>…

2010-02-28

セレクターその３（classセレクター）

jQuery セレクター

classセレクターの記述方法。指定情報を「.class名」にするだけ。こちらで指定した場合、同一classを適用されている要素は全て反映されるっぽ。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //classが「secon…</head></html>

2010-02-28

セレクターその２（IDセレクター）

jQuery セレクター

次にIDセレクターの記述方法。単純に、指定情報を「#ID名」にしてあげるだけ。但し、同一IDが存在する場合、先頭のIDが優先される感じ？全部が対象になるわけじゃないのかな。 <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3.2");</script> <script type="text/javascript"> $(function() { //ID…</head></html>

2010-02-27

セレクターその１（要素セレクター）

jQuery セレクター

一回、要素セレクター、IDセレクター、クラスセレクターをまとめてエントリ作ったんだが、セレクターの手法がもっと沢山あることがわかったので、それら一つ一つに対してエントリを立てるように変更します。画面の操作は自分が意図した要素の状態を変更した…