Blog

今日から使える 実例付き JQuery Cheat Sheet

2015.08.04 | jQuery | 376views


https---www.pakutaso.com-assets_c-2015-07-YUKA863_uresiina15202157-thumb-1000xauto-18745 (1)

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を更新していきたいと思います。

まとめ一覧シート

書式 詳細
text(“変更後のテキスト”) テキストを変更する
html(“変更後のHTML”) HTMLを変更する
prepend(“挿入するHTML”) 要素内の先頭にHTMLを挿入
append(“挿入するHTML”) 要素内の最後にHTMLを挿入
before(“挿入するHTML”) 要素の前にHTMLを挿入
after(“挿入するHTML”) 要素の後にHTMLを挿入
prependTo(“移動先の指定”) 要素内の先頭にHTMLを移動
appendTo(“移動先の指定”) 要素内の最後にHTMLを移動
insertBefore(“移動先の指定”) 要素の前にHTMLを移動
insertAfter(“移動先の指定”) 要素の後にHTMLを移動
addClass(“class属性値”) class属性を追加する
css(“プロパティ”,”値”) cssを追加する

このエントリーが役に立ったらシェアしてください


LLC JIRIKI HOME

この記事を書いた人

淵上 喜弘

著者:LLC JIRIKI

合同会社ジリキ 代表社員兼、業務執行社員。
1979年生まれ 兵庫県尼崎市出身・明石市育ち。

川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始する。

SEOで「大阪 探偵」や「離婚 行政書士」などのキーワードや「子ども 教材」「スマートフォンケース」など各種キーワードで1位を獲得。サイト制作でも毎日コミュニケーションズ・マイナビ女子オープンのサイトを制作。その後ECサイト運営サポートに着手し、売上月商50万のストアを1年半で1700万の月商に成長させる。

スマートフォンケースなどの商品企画開発も手がけ、楽天ランキングでも1位獲得、家電ジャンルMVPなどECサイトコンサルティングでも実績あり。

現在、グロースハックに注力しており様々な業種のサイトのCVアップをサポート中。チームとしてのグロースハック実績ではKaizenグロースハッカー総合 Top 20%、不動産 Top 10などを頂いています。

プログラミングは本業ではなくあくまでも趣味の一環として取り組んでいます。月1回ペースで東京へ出張へ行っておりますので、機会があれば是非お話をしましょう。

LLC JIRIKI