Search
  1. :contains〔指定したテキストを含む要素を選択〕
  2. :empty〔テキストノードを含む子要素がない要素をすべて選択〕
  3. :has〔指定したセレクタにマッチする少なくとも1つの要素を含む要素を選択〕
  4. :parent〔テキストを含む子要素を持つ親要素をすべて選択〕

:contains
指定したテキストを含む要素を選択

2009/2/27

戻り値:配列<要素>

指定したテキストを含む要素をすべて選択します。

  • 第1引数textには、検索する文字列を指定します(大文字小文字区別あり)。

:containsの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素:コンテンツフィルター(Content Filters):「:contains」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("li:contains('John')").css("text-decoration", "underline");
            });
        </script>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素:コンテンツフィルター(Content Filters):「:contains」の使用例 | jQuery</h1>
            <p>▼"John"が含まれるli要素に下線を付けます。</p>
<!-- CODE -->
            <ul>
                <li>John Resig</li>
                <li>George Martin</li>
                <li>Malcom John Sinclair</li>
                <li>J. Ohn</li>
                <li>JOHN</li>
            </div>
<!-- CODE / -->ul
        </div>
    </body>
</html>

:empty
テキストノードを含む子要素がない要素をすべて選択

2009/2/27

戻り値:配列<要素>

テキストや子要素がない空要素をすべて選択します。

:emptyの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素:コンテンツフィルター(Content Filters):「:empty」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("td:empty").text("空です!").css("background-color","pink");
            });
        </script>
        <style type="text/css">
            td { text-align:center; background-color:#fff; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素:コンテンツフィルター(Content Filters):「:empty」の使用例 | jQuery</h1>
            <p>▼テキストや子要素がない空の要素に「空です!」というテキストを挿入し、背景色をピンク色にします。</p>
<!-- CODE -->
            <table>
                <tr><td>TD #0</td><td></td></tr>
                <tr><td>TD #2</td><td></td></tr>
                <tr><td></td><td>TD#5</td></tr>
            </table>
<!-- CODE / -->
        </div>
    </body>
</html>

:has
指定したセレクタにマッチする少なくとも1つの要素を含む要素を選択

2009/2/27

戻り値:配列<要素>

指定したセレクタとマッチする要素を少なくとも1つ含んでいる要素をすべて選択します。

  • 第1引数selectorには、フィルタリングするセレクタを指定します。

:has(selector)の使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素:コンテンツフィルター:「:has(selector)」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("div#sample :has(p)").addClass("text");
            });
        </script>
        <style type="text/css">
            #sample div { margin-bottom:1em; padding:0 10px; }
            .text{ border:1px solid red; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素:コンテンツフィルター:「:has(selector)」の使用例 | jQuery</h1>
            <p>▼p要素を含んでいるdiv要素に"text"クラスを設定します。</p>
<!-- CODE -->
            <div id="sample">
                <div><p>このdiv要素はp要素(段落)を含んでいます。</p></div>
                  <div>このdiv要素にp要素(段落)は含まれません。</div>
                <div><p>このdiv要素はp要素(段落)を含んでいます。</p></div>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

:parent
テキストを含む子要素を持つ親要素をすべて選択

2009/2/27

戻り値:配列<要素>

テキストや子要素のない親要素をすべて選択します。

:parentの使用例サンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="imagetoolbar" content="no" />
        <title>DOM要素:コンテンツフィルター(Content Filters):「:parent」の使用例 | jQuery</title>
        <link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
        <!-- JS -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function(){
                $("td:parent").fadeTo(1500, 0.5);
            });
        </script>
        <style type="text/css">
            td { width:40px; background:green; }
        </style>
    </head>
    <body>
        <div id="wrap">
            <h1>DOM要素:コンテンツフィルター(Content Filters):「:parent」の使用例 | jQuery</h1>
            <p>▼td要素の子要素(テキスト含む)が透明度が0.5になるまでフェードをかけます。</p>
<!-- CODE -->
            <table>
                <tr><td>Value 1</td><td></td></tr>
                <tr><td>Value 2</td><td></td></tr>
            </table>
            </div>
<!-- CODE / -->
        </div>
    </body>
</html>

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women