フォローする

中級編 jQueryの書き方

HTML編集がダメな場合とその理由

このステップでは、コンテキストメニューを使ったHTML編集で起こりうる不具合について説明します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

jQueryの基本知識

このステップでは、jQueryをコーディングするための基本知識について図を用いて説明します。

Learn Kaizen Video

特定要素のidとクラスを編集

メソッド

  • attr
  • addClass

このステップでは、jQueryのメソッドを使い実際のページ要素のid名とクラス名を編集します。
説明中に添付ファイルやリンク先の案内があった場合、↓Item / ↓Codeをご確認ください。

Learn Kaizen Video

Item

Code

このステップで使うコード:idとクラスを追加

$("h2").attr("id", "h2_title");
$("h3:contains('について')").attr("id", "about_cat");
$("h3:contains('の気を付けたい病気')").attr("id", "point_sick");
$("h3:contains('ペット用品を探す')").attr("id", "search_pet");
$("h3:contains('その他')").attr("id", "other");
$("h3:contains('を見た人はこの猫も見てます')").attr("id", "relation_cat");
$("div.wrap:contains('ウィキペディアより引用')").addClass("detail01");
$("#about_cat").parent("div").addClass("detail02");

要素の移動

メソッド

  • insertBefore

このステップでは、jQueryのメソッドを使い実際のページ要素を移動します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

要素の追加

メソッド

  • before
  • addClass

このステップでは、jQueryのメソッドを使い実際のページに要素を追加します。
説明中に添付ファイルやリンク先の案内があった場合、↓Codeをご確認ください。

Learn Kaizen Video

Code

このステップで使うコード:HTML

<ul id="anchor">
<li><a href="#about_cat">このネコについて</a></li>
<li><a href="#point_sick">気を付けたい病気</a></li>
<li><a href="#search_pet">ペット用品を探す</a></li>
<li><a href="#relation_cat">他のネコを探す</a></li>
</ul>

要素の複製

メソッド

  • append
  • appendTo
  • clone

このステップでは、jQueryのメソッドを使い実際のページ要素を複製します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

要素を囲む

メソッド

  • contains
  • wrapAll

このステップでは、jQueryのメソッドを使い実際のページに親要素を追加します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

  • jQuery日本語リファレンス:wrap
  • jQuery日本語リファレンス:wrapInner

要素の属性値を編集

メソッド

  • attr

このステップでは、jQueryのメソッドを使い実際のページのHTML属性値を編集します。
説明中に添付ファイルやリンク先の案内があった場合、↓Itemをご確認ください。

Learn Kaizen Video

Item

要素の削除

メソッド

  • remove

このステップでは、jQueryのメソッドを使い実際のページ要素を削除します。

Learn Kaizen Video

PageTop
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

0 コメント

ログインしてコメントを残してください。