jQuery コンテンツ フィルター セレクターの学習tutorial_jquery

コンテンツ フィルターのフィルター ルールは、主に含まれるサブ要素またはテキスト コンテンツに基づいています。

$('div:contains("xxx")').css('background', '#ccc'); //选择元素文本节点含有xxx 文本的元素 
 
$('div:empty').css('background', '#ccc'); //选择空元素 
 
$('ul:has(.red)').css('background', '#ccc'); //选择子元素含有class 是red 的元素 
 
$(':parent').css('background', '#ccc'); //选择非空元素 

jQuery は、:has フィルターのパフォーマンスを向上させるための has() メソッドを提供します。

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有class 是red 的元素 

jQuery には :parent と似た名前のメソッドが用意されていますが、このメソッドは子要素やテキストを含む要素を選択するのではなく、現在の要素の親要素を取得して要素のコレクションを返します。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素 
 
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素 
 
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到div 父元素停止 

jQuery コンテンツ フィルタリング セレクターのフィルタリング ルールは、主に DOM 要素に含まれるサブ要素またはそのテキスト コンテンツに適用されます。主に次の 4 つのフィルタリング メソッドが含まれます。

より良く学ぶために、まずいくつかの DOM 要素の HTML 構造を作成します。

<div>John Resign</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J.Ohn</div>
<div></div>
<p></p>
<div><p>Has p</p></div>

1. コンテンツ フィルタリング セレクター—:contains(text)
セレクター:

E:contains(text) //E は DOM 要素、:contains(text) に含まれるテキストを指します。text は検索対象として指定された文字列です

説明:

テキストコンテンツ「text」を持つ要素を選択します

戻り値:

コレクション要素

例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:contains(John)').css('background','#f36');
 });
</script>

機能:

テキスト「John」を含む div 要素の背景色を変更します

効果:

前の HTML 構造に戻ると、2 つの div 要素にテキスト「John」が含まれていることがわかります。ここでは主に、テキスト「John」を含む div の背景色を変更しているため、全員が効果 1 番目と 3 番目の div の背景色が「#f36」に変更されていることがわかります。変更をよりよく理解するために、Firefox の Firebug ツールを使用して HTML の変更を確認できます。

2. コンテンツ フィルタリング セレクター—:空

セレクター:

E:empty //E が DOM 要素である場合、:empty は DOM 要素にサブ要素やテキストが含まれていないことを意味します

説明:

子要素やテキストのない空の要素を選択します

戻り値:

コレクション要素

例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:empty').css('background','#f36');
 });
</script>

機能:

子要素を含まない (テキスト要素を含む) div の背景色を変更します。つまり、何も含まれていない div の背景色を変更します

効果:

前の HTML のすべての要素には子要素が含まれていませんが、一部の要素には、子要素やテキスト コンテンツを持たない div 要素と p 要素が 1 つだけ含まれています。さらに、この例では、子要素とテキスト コンテンツを含まない div の背景色のみを変更したため、結果として div のみが "#f36" の背景色になります。 HTML の変更を見てみましょう。 :

3. コンテンツ フィルタリング セレクター—:has(selector)

セレクター:

E:has(selector) //E は有効な DOM 要素タグ、:has(selector) にはセレクターが含まれており、セレクターはフィルタリングに使用されます

説明:

セレクターによって一致した要素を含む要素を選択します

戻り値:

コレクション要素

例:

<script type="text/javascript">
 $(document).ready(function(){
  $('div:has(p)').css('background','#f36');
 });
</script>

機能:

子要素 P
を含む div 要素の背景色を変更します 効果:

在我们这个实例中，只有一个div中包含了子元素P，所以包含了符合这个要求的div元素其背景色被设置为“#f36”，改变后的HTML:

四、内容过滤选择器——:parent

选择器：

E:parent  //E为有效的DOM元素标签，:parent含有子元素或文本内容。

描述：

选取含有子元素或者文本的元素标签

返回值：

集合元素

实例：

<script type="text/javascript">
 $(document).ready(function(){
  $('div:parent').css('background','#f36');
 });
</script> <br />

功能：
改变含有子元素或文本内容的div的背景色。换句话说只在div包含了任何一个子元素或者任何内容，其背景色都将会改变。
效果：

本例子，只有一个div和一个p元素中不包含任何子元素和文本内容，因为我们这里是对div进行设置，所以效果中显示，除了这两个不含有子元素和任何内容的div的背景色都变成了“#f36”，变化后的HTML：

有关于jQuery选择器中的内容过滤选择器，就简单的说到这里，大家如果想更深的体会其具体的用法，可以在本地多做几个实例练习。如果大家对jQuery选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，同时也可以随时观注本站的内容更新。