LLC JIRIKI inc.

アイコンシルバー
岡山県

今日から使えるJQuery


A/Bテストしてますか? A/Bテストは変更要素を色々入れてしまうと、どれが効果を発揮したかわかりにくくなってしまいます。さらに、わざわざA/Bテスト用にHTMLを書き換えたりしていませんか。修正箇所が少ない場合はまるっとコピーして、後はJQueryに任せましょう。

JQuery チートシート

JQueryを読み込む細かいところは省略して、今すぐ使えるJQueryでのHTML置き換え。CSSの変更をご紹介しましょう。

よく使うメソッドを一覧でまずはご覧ください。

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を追加する

これだけでもほとんどのことは出来てしまうのですが、問題はセレクターですね。セレクターの理解を深めることでよりJQueryを活用して積極的にHTMLの変更が可能です。

セレクターの理解

$(".mail").html("

メールでお問い合わせ(無料)

");

メソッドの前に付いているのがセレクターです。この場合は$(".mail")がセレクターになっているわけですね。見て分かる通り、div class="mail" を探しだしているわけです。ここを $("#mail") とすれば id を特定しているという意味合いですね。

要素セレクター・IDセレクター・クラスセレクターと呼ばれるものです。

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

このようにすれば、親要素を特定しその中の子要素にClassを追加することも可能です。修正したい箇所を細かく特定することで、他の要素にJQueryでの変更を適用しない時などに便利です。

他にも指定した要素に特定の文字列が含まれているかどうかをフィルターすることも可能で、

$("#main:contains('指定文字列')")

としてやればOKです。

クオテーションの使い分けをすれば \" \" などと処理しなくても良いので可読性があがりますね。

A/Bテストでボタンだけを変える、位置を変える。などという場合は積極的にJQueryを使ってみてください。

ご相談はこちらから

企画や要件が固まっていないご相談でも
お気軽にお問い合わせください。

  1. 01

    相談する

  2. 02

    要件ヒアリング

  3. 03

    専門企業のご紹介

  4. 04

    企業との
    ご面談&見積取得

  5. 05

    企業選定〜契約締結
    サポート

  6. 06

    専門企業と直接
    プロジェクト進行

※ステップ5以降はご希望に応じて
サポートいたします。

お急ぎの方はお電話で

03-6427-5422

サポートデスク直通(平日10:00〜18:00)

必須お名前
必須メールアドレス
必須電話番号
必須会社名
任意依頼内容・希望
利用規約及び、個人情報保護方針にご同意のうえ、送信ください。

申し込み完了後、サポートデスクから
お電話またはメールにてご連絡させていただきます。

本サイトは、reCAPTCHAとGoogleにより保護されています。(プライバシーポリシー利用規約)

EDITOR PROFILE

LLC JIRIKI inc.

淵上 喜弘

会社設立から10年目となります。今でもまだ合同会社という形態の法人は少ないように思いますが、フットワークの軽さ、意思決定の速さというメリットから合同会社という形態を取っております。 Webに関する様々な悩みを解決し、Webをもっと自由にもっと豊かに。Webにアハ体験を、という信念のもと活動しております。 直近ではグロースハックをメインとしており、今あるPVをいかにコンバージョンに結びつけていくか。という分析・仮説・検証を重視したサイト改修を行っています。 Win-Winの関係を多くの会社様と築いて参りたいと、2015年より港区赤坂に東京営業所を構えました。ご訪問エリアは岡山・兵庫・大阪・東京となっております。 合同会社ジリキ 代表社員兼、業務執行社員。 1979年生まれ 兵庫県尼崎市出身・明石市育ち。 川崎医療福祉大学を卒業後、日産サティオ岡山に就職し初年度新人賞をカルロス・ゴーンCEOより受賞。その後NTT関連フレッツ販売会社に再就職し、地域賞2位を受賞。OCN販売表彰2位も同時受賞するとともにBフレッツ単独販売数の記録を打ち立てる。2006年合同会社ジリキ設立。SEO、WEBサイト制作業を開始。

LLC JIRIKI inc.

岡山県
ホームページ・WEBサイト制作 SEO対策・サイトコンサルティング

LLC JIRIKI inc.でできること

  • ホームページ・WEBサイト制作

  • SEO対策・サイトコンサルティング

会社選び・業者探しに迷った方はこちら
ご要望にあった会社を無料でご紹介いたします!
専門のサポートデスクがヒアリングを行い、
要件にあった最適な企業・業者をご紹介いたします。
ご要望にあった会社を無料でご紹介いたします