jQueryの基本（ID/クラスセレクター）

pタグは複数使われる場合が多いためタグ名だけでは、指定したいタグが絞り込めません。
そこで、よくつかわれるのが、タグのid属性や、class属性で絞り込む方法です。

たとえば、複数あるpタグの中から、class属性が”hoge”のタグだけ選択したい場合は
以下のようにします。

$('p.hoge')

1	$('p.hoge')

おなじように、id属性が”foo”のタグだけ選択したい場合は以下のようにします。

$('p#foo')

1	$('p#foo')

例として”show”ボタンと”hide”ボタンを用意し、指定したタグに対して
表示/非表示の操作ができるサンプルを示します。

<title>sample1</title>


function clickClassHide(className){
        $('p.'+className).hide();
}
function clickClassShow(className){
        $('p.'+className).show();
}
function clickIdHide(idName){
        $('p#'+idName).hide();
}
function clickIdShow(idName){
        $('p#'+idName).show();
}



<form name="test">
<p id="test1">TEST1 ID STRING</p>
<p id="test2">TEST2 ID STRING</p>
<p class="test1">TEST1 CLASS STRING</p>
<p class="test2">TEST2 CLASS STRING</p>
<div>


</div>
<div>


</div>
<div>


</div>
<div>


</div>
</form>

<title>sample1</title>

function clickClassHide(className){

$('p.'+className).hide();

}

function clickClassShow(className){

$('p.'+className).show();

}

function clickIdHide(idName){

$('p#'+idName).hide();

}

function clickIdShow(idName){

$('p#'+idName).show();

}

<p id="test1">TEST1 ID STRING</p>

<p id="test2">TEST2 ID STRING</p>

<p class="test1">TEST1 CLASS STRING</p>

<p class="test2">TEST2 CLASS STRING</p>

<div>

</div>

<div>

</div>

<div>

</div>

<div>

</div>

</form>

この場合divタグすべてを選択したことになります。
そこで、class属性に”hogehoge”を持ったdivタグだけ選択したい！
という場合は以下のようにします。

また、タグは条件にせず、”hogehoge”というクラスをもったタグ全て
を選択したい場合は以下のようになります。

$('.hogehoge')

1	$('.hogehoge')