jQuery sélecteur de filtre de contenu apprentissage tutoriel_jquery

Les règles de filtrage du filtre de contenu sont principalement basées sur les sous-éléments ou le contenu textuel contenus.

$('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 fournit une méthode has() pour améliorer les performances du filtre :has :

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

jQuery fournit une méthode avec un nom similaire à :parent, mais cette méthode ne sélectionne pas les éléments contenant des éléments enfants ou du texte, mais obtient l'élément parent de l'élément actuel et renvoie une collection d'éléments.

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

Les règles de filtrage du sélecteur de filtrage de contenu jQuery sont principalement appliquées aux sous-éléments ou à leur contenu texte contenu dans les éléments DOM. Elles incluent principalement les quatre méthodes de filtrage suivantes :

.

Afin de mieux apprendre, écrivez d'abord la structure HTML de plusieurs éléments du DOM :

<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. Sélecteur de filtrage de contenu——:contient(text)
Sélecteur :

E:contains(text) //E fait référence à l'élément DOM, au texte contenu dans :contains(text) et text est la chaîne spécifiée pour la recherche
Descriptif :

Sélectionnez les éléments avec le contenu texte "text"

Valeur de retour :

Éléments de collection

Exemple :

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

Fonction :

Changer la couleur d'arrière-plan de l'élément div contenant le texte "John"

Effet :

En revenant à la structure HTML précédente, nous pouvons voir que deux des éléments div contiennent le texte "John", car ici nous changeons principalement la couleur de fond du div contenant le texte "John", donc tout le monde est dans le effet On peut voir que la couleur d'arrière-plan de nos première et troisième div a changé en "#f36". Afin de mieux comprendre les changements, vous pouvez voir les changements en HTML via l'outil Firebug dans Firefox :
.

2. Sélecteur de filtrage de contenu——:vide

Sélecteur :

E:empty //Où E est un élément DOM, :empty signifie que l'élément DOM ne contient aucun sous-élément ni texte
Descriptif :

Sélectionnez un élément vide sans aucun élément enfant ni texte

Valeur de retour :

Éléments de collection

Exemple :

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

Fonction :

Changer la couleur d'arrière-plan d'un div qui ne contient aucun élément enfant (y compris aucun élément de texte), en d'autres termes, changer la couleur d'arrière-plan d'un div qui ne contient rien

Effet :

Bien que tous les éléments de notre code HTML précédent ne contiennent pas d'éléments enfants, certains contiennent des éléments de texte. Il n'y a qu'un seul élément div et un élément p sans éléments enfants ni contenu texte. De plus, dans notre exemple, nous avons uniquement modifié la couleur d'arrière-plan du div qui ne contient pas d'éléments enfants ni de contenu textuel, donc dans notre effet, seul le div a la couleur d'arrière-plan "#f36". :

3. Sélecteur de filtrage de contenu——:has(selector)

Sélecteur :

E:has(selector) //E est la balise d'élément DOM efficace, :has(selector) contient un sélecteur et le sélecteur est utilisé pour le filtrage

Description :

Sélectionnez les éléments contenant l'élément correspondant par le sélecteur

Valeur de retour :

Éléments de collection

Exemple :

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

Fonction :
Changer la couleur d'arrière-plan de l'élément div contenant l'élément enfant P
Effet :

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