Web制作の現場で使えるjQuery　UIデザイン入門 ― 第4回

初めてのjQuery：セレクターAPIを一挙解説（後編） (4/5)

■headerフィルター

　「headerフィルター」は、h1～h6までのheading要素をまとめて指定できるフィルターです。

▼サンプルコード（HTML部分）

<h1>テキストテキストテキストテキストテキスト</h1>
<p>テキストテキストテキストテキストテキスト</p>
<h6>テキストテキストテキストテキストテキスト</h6>

▼サンプルコード（スクリプト部分）

$(function(){
    $(":header").css("color","red");
})

▼実行結果（実際のWebページ）

　1行目のh1要素、3行目のh6要素が赤色になります。

■containsフィルター / hasフィルター

　「containsフィルター」は特定の文字列が含まれている要素を、「hasフィルター」は特定の要素が含まれている要素を指定できます。

▼サンプルコード（HTML部分）

<ul>
    <li><strong>テキスト</strong>テキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li>サンプルサンプルサンプルサンプルサンプル</li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:contains('サンプル')").css("color","red");
    $("li:has(strong)").css("color","red");
})

▼実行結果（実際のWebページ）

　「サンプル」という文字列が含まれる4番目のli要素と、strong要素を含む最初のli要素が赤色になります。

■parentフィルター

　「parentフィルター」は、子要素やテキストを含む要素を指定できるフィルターです。CSS3セレクターで紹介したempty擬似クラスと逆のフィルターです。

▼サンプルコード（HTML部分）

<ul>
    <li>テキストテキストテキストテキストテキスト</li>
    <li></li>
    <li>テキストテキストテキストテキストテキスト</li>
    <li></li>
</ul>

▼サンプルコード（スクリプト部分）

$(function(){
    $("li:parent").css("color","red");
})

▼実行結果（実際のWebページ）

　空のli要素以外のli要素、つまり1行目と3行目が赤色になります。