Lernprogramm für den jQuery-Inhaltsfilterselektor_jquery

Die Filterregeln des Inhaltsfilters basieren hauptsächlich auf den enthaltenen Unterelementen bzw. Textinhalten.

$('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 bietet eine has()-Methode, um die Leistung des :has-Filters zu verbessern:

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

jQuery stellt eine Methode mit einem ähnlichen Namen wie :parent bereit, aber diese Methode wählt keine Elemente aus, die untergeordnete Elemente oder Text enthalten, sondern ruft das übergeordnete Element des aktuellen Elements ab und gibt eine Sammlung von Elementen zurück.

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

Die Filterregeln des jQuery-Inhaltsfilterselektors werden hauptsächlich auf die Unterelemente oder deren Textinhalt angewendet, die in DOM-Elementen enthalten sind. Sie umfassen hauptsächlich die folgenden vier Filtermethoden:

Um besser zu lernen, schreiben Sie zunächst die HTML-Struktur mehrerer DOM-Elemente:

<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. Inhaltsfilterselektor——:contains(text)
Selektor:

E:contains(text) //E bezieht sich auf das DOM-Element, der in :contains(text) enthaltene Text, text ist die zu durchsuchende Zeichenfolge
Beschreibung:

Elemente mit Textinhalt „Text“ auswählen

Rückgabewert:

Sammlungselemente

Beispiel:

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

Funktion:

Ändern Sie die Hintergrundfarbe des div-Elements, das den Text „John“ enthält

Wirkung:

Wenn wir zur vorherigen HTML-Struktur zurückkehren, können wir sehen, dass zwei der div-Elemente den Text „John“ enthalten, da wir hier hauptsächlich die Hintergrundfarbe des div ändern, das den Text „John“ enthält, sodass jeder im ist Wirkung Es ist ersichtlich, dass sich die Hintergrundfarbe unseres ersten und dritten Divs in „#f36“ geändert hat. Um die Änderungen besser zu verstehen, können Sie die Änderungen im HTML über das Firebug-Tool in Firefox sehen:

2. Inhaltsfilterauswahl——:leer

Selektor:

E:empty //Wobei E ein DOM-Element ist, bedeutet :empty, dass das DOM-Element keine Unterelemente oder Text enthält
Beschreibung:

Wählen Sie ein leeres Element ohne untergeordnete Elemente oder Text aus

Rückgabewert:

Sammlungselemente

Beispiel:

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

Funktion:

Ändern Sie die Hintergrundfarbe eines Divs, das keine untergeordneten Elemente enthält (einschließlich keiner Textelemente), mit anderen Worten, ändern Sie die Hintergrundfarbe eines Divs, das nichts enthält

Wirkung:

Obwohl alle Elemente in unserem vorherigen HTML keine untergeordneten Elemente enthalten, enthalten einige Textelemente. Es gibt nur ein div- und ein p-Element ohne untergeordnete Elemente und ohne Textinhalt. Darüber hinaus haben wir in unserem Beispiel nur die Hintergrundfarbe des Divs geändert, das keine untergeordneten Elemente und Textinhalte enthält, sodass in unserem Effekt nur das Div die Hintergrundfarbe „#f36“ hat . HTML-Änderungen:

3. Inhaltsfilterselektor——:has(selector)

Selektor:

E:has(selector) //E ist das effektive DOM-Element-Tag, :has(selector) enthält einen Selektor und der Selektor wird zum Filtern verwendet

Beschreibung:

Wählen Sie Elemente aus, die das vom Selektor übereinstimmende Element enthalten

Rückgabewert:

Sammlungselemente

Beispiel:

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

Funktion:
Ändern Sie die Hintergrundfarbe des div-Elements, das das untergeordnete Element P
enthält Wirkung:

在我们这个实例中，只有一个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选择器的其他选择器用法感兴趣的话，可以在本站中了解其他的选择器的具体功能和用法，同时也可以随时观注本站的内容更新。