JavaScript++かも日記: 【jQuery】Selectors

このページは[ 入門 Ajax ](ソフトバンククリエイティブ )と[ だれでもカンタンJavaScriptサンプル集 ](秀和システム)と
[ だれでもカンタンDynamicHTMLサンプル集 ](秀和システム)などの著者
でAllaboutのJavaScriptガイドとか牛久大仏の足元で草むしりをしながら
暮らしている【高橋登史朗】によるサポートページ兼無駄話ブログです

*このスクリプト動かないよ～、とかの情報は
各「コメント欄」へ書き込んでいただけるとうれしいです。
直せないかもしれないけどf^^;;;

2007年10月25日

【jQuery】Selectors

【jQuery , リファレンス】

ブックマーク-- Buzzurl

/ Hatena

/ Livedoor

Basics(基本):

#id String

与えられたID名にマッチするエレメント

$("#myId").show();

element String

与えられた要素名(タグ名)にマッチするエレメント(s)

$("div").css("font-size","12px");

.class String

与えられたクラス名にマッチするエレメント(s)

$(".myClass").html("myClassです");

*String

すべてのエレメント(s)

$("*").css("border","3px dotted #888");

selector1, selector2, ...selectorN String

指定したすべてのエレメント(s)。「,」で区切っていくつでもセレクタを増やせます。

$("#id1 , #id2 , li").css("font-size","1.2em");

Hierarchy(階層):

ancestor descendant String

左辺の「先祖 ancestor」要素内にある右辺の「子孫 descendant」要素に該当するすべてのエレメント(s)

$("form input").attr("disabled","");

parent > child String

左辺の「親 parent」要素内にある右辺の「子 child」要素に該当するすべてのエレメント(s)

$("#myId div").css("color","red");

prev + next String

左辺の「前 prev」要素の「次 next」の要素に該当するエレメント

$(".myClass + p").css("font-size","10px");

prev ~ siblingsString

左辺の「前 prev」要素以降にある右辺の「兄弟 siblings」要素に該当するすべてのエレメント(s)

$("form ~ input").css("color","#ddd");

Basic Filters(基本フィルタ):

:first String

最初のエレメント(s)

$("td:first").css("color","#ddd");

:last String

最後のエレメント(s)

$("tr:last").css("color","#ddd");

:not(selector) String

与えられたセレクタを無視します

$("input:not(:checked)").css("color","#ddd");

:even String

0からはじめてindexが偶数の要素(s) 　→:even

$("tr:even").css("color","#ddd");

:odd String

0からはじめてindexが奇数の要素(s) 　→:odd

$("tr:odd").css("color","#ddd");

:eq(index) String

与えたインデックス番号に合致する要素

$("td:eq(5)").css("color","#ddd");

:gt(index) String

与えたインデックス番号を超えるインデックスの要素

$("td:gt(5)").css("color","#ddd");

:lt(index) String

与えたインデックス番号未満のインデックスの要素

$("td:lt(1)").css("color","#ddd");

:header String

すべての<H>見出し要素

$(":header").css("color","#ddd");

:animated String

現在アニメーション動作中の要素(s)

$("div:animated").css("color","#ddd");

Content Filters(コンテンツフィルタ):

:contains(text) String

与えられたtextにマッチするすべての要素(s)

("div:contains('ウルトラマン')").css("font-size","xx-large");

:empty String

内容が空のすべての要素

$("td:empty").html("-")

:has(selector) String

与えられたセレクタにマッチするすべての要素(s)

$("div:has(li)").css("color","#ddd");

:parent String

文字列を含む親要素

$("td:parent").css("background","#ddd");

Visibility Filters(可視フィルタ):

:hidden String

hiddenな状態のすべての要素　inputのhiddn

$("div:hidden").show();

:visible String

文字列を含む親要素

$("td:parent").css("background","#ddd");

Attribute Filters(属性フィルタ):

[attribute] String

指定された属性attributeを持つ要素(s)

("a[href]").css("background","#ddd");

[attribute=value] String

指定された属性attributeが、指定された値valueの要素(s)

$("a[href='http://jsgt.org/mt/01/']").css("background","#ddd");

[attribute^=value] String

指定された属性attributeが、指定された値valueで始まる要素(s)

$("a[href^='http://jsgt.org/mt/01/']").css("background","#ddd");

[attribute$=value] String

指定された属性attributeが、指定された値valueで終わる要素(s)

$("a[href$='index.html']").css("background","#ddd");

[attribute*=value] String

指定された属性attributeが、指定された値valueをどこかに持つ要素(s)

$("div[id*='test']").css("background","#ddd");

Child Filters(Childフィルタ):

:nth-child(index/even/odd/equation) String

:nth-childで指定された要素のうちindex番目/偶数/奇数/式の要素(s)

$("div:nth-child(5)").css("background","#ddd");//5番目のdiv

$("div:nth-child(even)").css("background","#ddd");//偶数番目のdiv

$("div:nth-child(odd)").css("background","#ddd");//奇数番目のdiv

$("div:nth-child(2n+1)").css("background","#ddd");//奇数番目のdiv

$("div:nth-child(2n)").css("background","#ddd");//偶数番目のdiv

//3色を順番に繰り返す
$("tr:nth-child(3n+1)").css("color", "red");
$("tr:nth-child(3n+2)").css("color", "orange");
$("tr:nth-child(3n+3)").css("color", "pink");

:first-child String

最初の子要素

$("div:first-child").css("background","#ddd");

:last-child String

最後の子要素

$("div:last-child").css("background","#ddd");

:only-child String

その親要素内で唯一の(兄弟を持たない)子要素

$("div:only-child").css("background","#ddd");

Forms(フォーム):

:input String

input, textarea, select と button 要素

$(":input").css("background","#ddd");

:text String

type="text"のinput要素

$(":text").css("background","#ddd");

:password String

type="password"のinput要素

$(":password").css("background","#ddd");

:radio String

type="radio"のinput要素

$(":radio").css("background","#ddd");

:checkbox String

type="checkbox"のinput要素

$(":checkbox").css("background","#ddd");

:submit String

type="submit"のinput要素

$(":submit").css("background","#ddd");

:image String

type="image"のinput要素

$(":image").css("background","#ddd");

:reset String

type="reset"のinput要素

$(":reset").css("background","#ddd");

:button String

type="submit"のinput要素

$(":button").css("background","#ddd");

:file String

type="file"のinput要素

$(":file").css("background","#ddd");

:hidden String

type="hidden"のinput要素、または、display:noneなどhiddenな要素

$(":hidden").css("background","#ddd");

$("div:hidden").show(3000);

Form Filters(フォームフィルタ):

:enabled String

enabledな要素

$(":enabled").css("background","#ddd");

:disabled String

disabledな要素

$(":disabled").css("background","#ddd");

:checked String

checkedな要素

$(":checked").css("background","#ddd");

:selected String

selectedな要素

$(":selected").css("background","#ddd");

#jQuery UI のtab を使ってみました。

com2 ( 2007年10月26日 16:32 )

縦に長いコンテンツでアコーディオンを使うと、上下に行ったり来たりが増えてとても見づらいです……

高橋 ( 2007年10月27日 01:11 )

私も設置してみてそれ感じました(^^;;ということで、showAll/hideAllチェックをつけてみました。

見る人以外は、全部開くとかなり場所をとるので、デフォルトでhideAll。

読みたいときだけ読みたい部分をクリックで引き出しのように開くか、showAllで全部開いてゆっくり見る、という形になりますが、どうでしょう。

高橋 ( 2007年10月27日 02:26 )

hideAllに不具合があったのでshowAllのみのボタンに変更しましたｆ^^;;;

高橋 ( 2007年10月28日 22:00 )

アコーディオンをやめて、Tabに変更しました。コピーミスで、</div>を2個多く書いたせいで一瞬ページがぐちゃぐちゃに(^^;

【コメント】

2008年04月23日
日	月	火	水	木	金	土
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

2008年04月23日

日

月

火

水

木

金

土