ドキュメント

チュートリアル: jQuery 実例集

出典: jQuery JavaScript ライブラリ

jQuery の基礎を対話的にデモ

オリジナル: http://codylindley.com/Javascript/241/jquery-to-the-rescue
作者: Cody Lindley

類似のチュートリアル: SelectorsAttributesTraversingEffectsManipulation

左側の各例のボタンを使って、下の構造化マークアップを対象に jQuery のコードを実行してください。各例のコードを表示するボタンをクリックすると、構造化マークアップの表示を変更するのに必要な jQuery コードが表示されます。

実例:

例 A

カラム 2 の段落数を取得し、取得した値を警告ダイアログボックスに表示します。赤いボックスも段落の数に含めています。

jQuery コードの表示/非表示
alert($("div.contentToChange p").size());

例 B

カラム 2 の 1 つの段落に対し、スライドアニメーションを使ってアニメーション効果を実行します。

jQuery コードの表示/非表示
$("div.contentToChange p.firstparagraph:hidden").slideDown("slow");
$("div.contentToChange p.firstparagraph:visible").slideUp("slow");

例 C

カラム 2 のすべての <p> 要素 (赤いボックスは除く) の最後にテキストを追加または削除します。

jQuery コードの表示/非表示
$("div.contentToChange p:not(.alert)")
  .append("<strong class="addedtext"> This text was just appended to this paragraph</strong>")});
$("strong.addedtext").remove();

例 D

アニメーション効果付きで段落を非表示にします。

jQuery コードの表示/非表示
$("div.contentToChange p.thirdparagraph").hide("slow");

例 E

すべての <em> 要素に CSS のプロパティと値を追加して、カラム 2 に含まれるすべてのイタリック体テキストのフォントの太さ (weight) と色を変更します。

jQuery コードの表示/非表示
$("div.contentToChange em").css({color:"#993300", fontWeight:"bold"});

例 F

<p> 要素にクラスを追加し、カラム 2 の 5 番目の段落の CSS を変更します。

jQuery コードの表示/非表示
$("p.fifthparagraph").addClass("changeP");
$("p.fifthparagraph").removeClass("changeP");

カラム 2:

下の HTML を対象に jQuery のコードを実行するには、左側のボタンを使ってください。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.