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>

在我们这个实例中，只有一个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 />