jQuery APIリファレンスDOM要素：コンテンツフィルター
: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>
