今日から使える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を使ってみてください。