「ゴール達成までのステップ」の「要素の指定」で、以下の jQuery セレクタを入力して要素を指定できます。
ドロップダウンメニューやアコーディオン上のボタンなど、マウスクリックやマウスホバーなどのアクションで表示する要素を jQuery セレクタで指定します。
ウェブページからの要素のセレクタの取得について詳しくは「ゴールの新規作成：セレクタのコードをウェブページから取得する」や「SiTestブログ」をご確認ください。
| jQuery セレクタ | 説明 |
$("body")
|
body 要素を取得します。body 部分を違う文字に置き換えれば、別要素も取得します。 |
$("#sample")
|
id 属性が sample の要素を取得します。sample 部分を違う文字に置き換えれば、別の id 属性の要素も取得します。 |
$(".sample")
|
class 属性が sample の要素を取得します。sample 部分を違う文字に置き換えれば、別の class 属性の要素も取得します。 |
$("body").children("div")
|
body 要素の子要素のうち、div 要素を取得します。 |
$("body > div")
|
|
$("body").children("div").eq(0)
|
取得した div 要素のうち、1番目の要素を取得します。 ※ eq(x) は x+1 番目の要素のことを指しますので、ご注意ください。 |
ひとつの要素だけを指定する
【例】他の要素に使用されていない class 属性「class="btn1"」を与えられたボタン要素を指定する
$(".btn1")
【例】Google Chrome のデベロッパーツールで取得したセレクタが「#price > div:nth-child(2) > p > a」の要素を指定する
$("#price > div:nth-child(2) > p > a")
| 💡Google Chrome のデベロッパーツールを使用してセレクタを取得する方法について、詳しくは「ゴールの新規作成：セレクタのコードをウェブページから取得する」をご確認ください。 |
複数の要素をまとめて指定する
【例】共通で使用されている class 属性「class="btn"」を与えられた複数のボタン要素を指定する
$(".btn")
AND条件やOR条件で複数の要素をまとめて指定する
| AND条件（AかつB） |
$('A' + 'B')
|
| OR条件（AまたはB） |
$('A , B')
|
【例】「class="btn1"」、「class="btn2"」、「id="link3"」の属性が与えられた複数のボタン要素を指定する
$(".btn1,.btn2,#link3")
前方一致、後方一致、部分一致で複数の要素をまとめて指定する
| 前方一致 |
$("[ 属性 ^='値']")
|
| 後方一致 |
$("[ 属性 $='値' ]")
|
| 部分一致 |
$("[ 属性 *= '値' ]")
|
【例】「class="btn1"」、「class="btn2"」、「class="btn3"」の属性が与えられた複数のボタン要素を指定する
$("[class ^='btn' ]")
【例】「href="/a_thanks.html"」、「href="/b_thanks.html"」、「href="/c_thanks.html"」の属性が与えられた複数の要素を指定する
$("[href $='_thanks.html']")