HTML/CSSを操作する、今日から使えるJQueryチートシート。よく使うものをまとめてみました。実例付きなのでどういう時に使うかがイメージしやすいと思います。今回ご紹介できなかったメソッドはまたいずれやっていきましょう。それでは早速いってみましょう。

実例付き JQuery Cheat Sheet

テキストの変更

text("変更後のテキスト")

変更したい箇所のテキストを置き換えるメソッドです。基本的にテキストだけを置き換えるものなので、HTMLやCSSを含む箇所には使いません。実際の使用には

$("メール送信").text("メール送信（無料）");

このように置き換え先前のテキストを指定して置き換えます。

HTMLの変更

html("変更後のHTML")

HTMLを置き換えしたいときに使用するメソッドになります。

$(".mail").html("<p>メールでお問い合わせ（無料）</p>");

この場合はclassに .mail　が指定された箇所全てが置き換わります。

HTMLの挿入

全く新しくHTMLを挿入する場合に使用します。4種類のメソッドがありますので、時と場合によって使い分けるとよいでしょう。

prepend("挿入するHTML")
append("挿入するHTML")
before("挿入するHTML")
after("挿入するHTML")

1. prepend　・・・　要素内の先頭にHTMLを挿入
2. append　・・・　要素内の最後にHTMLを挿入
3. before　・・・　要素の前にHTMLを挿入
4. after　・・・　要素の後ろにHTMLを挿入

それぞれ使い方が異なりますね。

$("#main").prepend("<div class=\"mainheader\"><ul><li><a href=\"...\"><img src=\"...\"></a></li></ul></div>");

$("#main").before("<div id=\"mainheader\"><ul><li><a href=\"...\"><img src=\"...\"></a></li></ul></div>");

なんとなくイメージできるでしょうか？？

HTMLの移動

HTMLの挿入と違い、HTMLを移動するメソッドです。

prependTo("移動先の指定")
appendTo("移動先の指定")
insertBefore("移動先の指定")
insertAfter("移動先の指定")

1. prependTo　・・・　要素内の先頭にHTMLを移動
2. appendTo　・・・　要素内の最後にHTMLを移動
3. insertBefore　・・・　要素の前にHTMLを移動
4. insertAfter　・・・　要素の後ろにHTMLを移動

挿入の時と違い(“移動先の指定”)で指定した箇所へ移動します。

$("#main").insertBefore("#header");

#headerの　div id=”header” の前に　div id=”main”が丸ごと移動します。

classの追加・削除

addClass("class属性値")
removeClass("class属性値")

特定の箇所にだけclassを追加したい場合は

$("#main>li>img").addClass("style01");

これで div id=”main” の中にある li で、更に img にだけclassが追加されます。

cssの制御

css("プロパティ","値")

特定箇所にだけCSSを反映させたり、CSSの値を削除することが可能です。

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

classにfont-sizeプロパティを追加し、font-size:20pxを設定します。
実際にはstyle=”” で反映される仕組みになっています。

$(".red").css("color", "");

classにredが指定され、更にその中にcolor:red; が指定されている場合に colorを削除するメソッドです。

その他の操作

他にも　wrap(“<要素>“) や、remove() などもありますが今回は特によく使いそうなものだけをチョイスしました。機会があればまた便利なTipsを更新していきたいと思います。

まとめ一覧シート