jQueryの基本（ユニバーサルセレクタ、グループセレクタ、子セレクタ、隣接セレクター first-child擬似クラス、否定擬似クラス、empty擬似クラス）

1. ユニバーサルセレクター
いわゆるワイルドカード。
以下の場合は、divタグの子孫すべてが選択される。

$(“div *”).hide();

2. グループセレクター
複数の選択をまとめられる。
以下の場合は、divタグすべてとclass属性に”hoge”を持つものすべて。

$(“div , .hoge”).hide();

3. 子セレクター
子孫セレクターと似ているが、こちらは一階層下まで。
子孫セレクタは何階層下でもＯＫ

$(“div > p”).hide();

4. 隣接セレクター
直近のタグを指定するためのもの。
以下の場合は、fooというidを持つ要素の後に最初に来るdivタグ。

$(“#foo + div”).css(“color”,”aqua”);

5. 間接セレクター
指定した要素の次の要素以降に出現する要素すべてを選択する。
以下の場合は、fooというidを持つ要素の後に出てくるdivタグすべてを選択。

$(“#foo ~ div”).css(“color”,”aqua”);

<title>sample1</title>


function clickHide(){
        $('.test1 &gt; p.hoge + p, .test2 &gt; p.hoge ~ p').hide();
        $('.test2 *').css("color", "aqua");
}
function clickShow(){
        $('div p').show();
}



<p>JRA</p>
<div class="test1">
<p class="hoge">Japan Racing Association1</p>
<p>Japan Racing Association2</p>
<p>Japan Racing Association3</p>
</div>
<p>DVD</p>
<div class="test2">
<p>Digital Versatile Disc1</p>
<p class="hoge">Digital Versatile Disc2</p>
<p>Digital Versatile Disc3</p>
<p>Digital Versatile Disc4</p>
</div>
<form name="test">
<div>


</div>
</form>

<title>sample1</title>

function clickHide(){

$('.test1 > p.hoge + p, .test2 > p.hoge ~ p').hide();

$('.test2 *').css("color", "aqua");

}

function clickShow(){

$('div p').show();

}

<p class="hoge">Japan Racing Association1</p>

<p>Japan Racing Association2</p>

<p>Japan Racing Association3</p>

</div>

<p>Digital Versatile Disc1</p>

<p class="hoge">Digital Versatile Disc2</p>

<p>Digital Versatile Disc3</p>

<p>Digital Versatile Disc4</p>

</div>

<div>

</div>

</form>