jquery

jqueryを使っていろいろ試してみた
jqueryのプラグインを使ったサンプルと使い方を説明しています

jqueryの入門 エレメントにアクセス

エレメントへのアクセス

a01.指定したID名を持つエレメントにアクセス

$("#header").css("backgroundColor","yellow"); サンプルを見る コードを見る

a02.指定したタグにアクセス

$("div").css("backgroundColor","yellow"); サンプルを見る コードを見る

a03.指定したクラス名を持つエレメントにアクセス

$(".note").css("backgroundColor","yellow"); サンプルを見る コードを見る

a04.全てのエレメントにアクセス

$("*").css("backgroundColor","yellow"); サンプルを見る コードを見る

a05.指定した複数のセレクタに該当するエレメントにアクセス

$("#header, #footer, p").css("backgroundColor","yellow"); サンプルを見る コードを見る

a06.指定したエレメントを祖先に持つエレメントにアクセス

$("p span").css("backgroundColor","yellow"); サンプルを見る コードを見る

a07.指定した親子関係を持つエレメントにアクセス

$("div>span").css("backgroundColor","yellow"); サンプルを見る コードを見る

a08.指定したエレメントの兄弟要素にアクセス

$("a+span").css("backgroundColor","yellow"); サンプルを見る コードを見る

a09.指定したエレメント以降で兄弟となるエレメントにアクセス

$("h1~div").css("backgroundColor","yellow"); サンプルを見る コードを見る

a10.最初のエレメントにアクセス

$("a:first").css("backgroundColor","yellow"); サンプルを見る コードを見る

a11.最後のエレメントにアクセス

$("a:last").css("backgroundColor","yellow"); サンプルを見る コードを見る

a12.指定したセレクタ以外のエレメントにアクセス

$("a:not([target='newPage'])").css("backgroundColor","yellow"); サンプルを見る コードを見る

a13.偶数番目のエレメントにアクセス

$("a:even").css("backgroundColor","yellow"); サンプルを見る コードを見る

a14.奇数番目のエレメントにアクセス

$("a:odd").css("backgroundColor","yellow"); サンプルを見る コードを見る

a15.指定した番号のエレメントにアクセス

$("a:eq(2)").css("backgroundColor","yellow"); サンプルを見る コードを見る

a16.指定した番号順より大きいエレメントにアクセス

$("a:gt(1)").css("backgroundColor","yellow"); サンプルを見る コードを見る

a17.指定した番号順より小さいエレメントにアクセス

$("a:lt(3)").css("backgroundColor","yellow"); サンプルを見る コードを見る

a18.<h1>〜<h6>までのエレメントにアクセス

$(":header").css("backgroundColor","yellow"); サンプルを見る コードを見る

a19.指定された文字列を含むエレメントにアクセス

$("a:contains('クリップ')").css("backgroundColor","yellow"); サンプルを見る コードを見る

a20.内容が空のエレメントにアクセス

$("div:empty").css("backgroundColor","yellow").text("emptyです"); サンプルを見る コードを見る

a21.指定したセレクタを子孫に持つエレメントにアクセス

$("div:has(p)").css("backgroundColor","yellow"); サンプルを見る コードを見る

a22.親エレメントにアクセス

$(".note:parent").css("backgroundColor","yellow"); サンプルを見る コードを見る

a23.指定した属性を持つエレメントにアクセス

$("a[target]").css("backgroundColor","yellow"); サンプルを見る コードを見る

a24.指定した属性が指定した値に一致しているエレメントにアクセス

$("a[href='#']").css("backgroundColor","yellow"); サンプルを見る コードを見る

a25.指定した属性が指定した値ではないエレメントにアクセス

$("a[target!='newPage']").css("backgroundColor","yellow"); サンプルを見る コードを見る

a26.指定した属性が指定した値で始まるエレメントにアクセス

$("a[target^='new']").css("backgroundColor","yellow"); サンプルを見る コードを見る

a27.指定した属性が指定した値で終わるエレメントにアクセス

$("a[target$='Page']").css("backgroundColor","yellow"); サンプルを見る コードを見る

a28.指定した属性に指定した値が含まれるエレメントにアクセス

$("a[target*='new']").css("backgroundColor","yellow"); サンプルを見る コードを見る

a29.指定された複数の属性セレクタに該当するエレメントにアクセス

$("a[href][target]").css("backgroundColor","yellow"); サンプルを見る コードを見る

a30.指定されたタグの順番を式で指定し、式で示されたエレメントにアクセス

$("div span:nth-child(2)").css("backgroundColor","yellow"); サンプルを見る コードを見る

a31.最初の子要素にアクセス

$("#main span:first-child").css("backgroundColor","yellow"); サンプルを見る コードを見る

a32.最後の子要素にアクセス

$("div span:last-child").css("backgroundColor","yellow"); サンプルを見る コードを見る

a33.子要素が一つだけのエレメントにアクセス

$("div span:only-child").css("backgroundColor","yellow"); サンプルを見る コードを見る