Comment utiliser les filtres de contenu dans jQuery

Cette fois, je vais vous montrer comment utiliser le filtre de contenu dans jQuery. Quelles sont les précautions lors de l'utilisation du filtre de contenu dans jQuery. Voici un cas pratique, jetons un coup d'œil.

Les exemples de cet article décrivent l'utilisation simple des filtres de contenu dans jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Introduction

Le filtre de contenu est le contenu textuel contenu dans le DOM L'élément et s'il contient des éléments correspondants sont filtrés. Il existe quatre types de filtres de contenu : :contains(text), :empty, :has(selector) et :parent, comme indiqué dans le tableau ci-dessous.

Filtre	Description	Exemple
contient(texte)	Correspondance éléments qui contiennent le texte donné	$("li:contains('DOM')") //Match les éléments li qui contiennent le contenu du texte "DOM"
:empty	Correspond à tous les éléments vides qui ne contiennent pas d'éléments enfants ou de texte	$("td:empty") // Correspond aux unités qui ne contiennent pas d'éléments enfants ou texte Grid
:has(selector)	correspond aux éléments contenant l'élément correspondant par le sélecteur	$("td:has(p) ") //Faire correspondre les cellules contenant les balises dans les cellules du tableau
: parent	Faire correspondre les éléments contenant des éléments enfants ou du texte	$("td: parent") //Faire correspondre les cellules qui ne sont pas vides, c'est-à-dire que la cellule comprend également des sous-éléments ou du texte

Deuxième application

Appliquer un filtre de contenu qui correspond aux cellules vides, aux cellules qui ne sont pas vides et aux cellules qui contiennent le texte spécifié

Trois codes

<script language="javascript" src="JS/jquery-3.1.1.min.js"></script>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
 <tr>
 <td width="11%" height="27">编号</td>
 <td width="14%">祝福对象</td>
 <td width="12%">祝福者</td>
 <td width="33%">字条内容</td>
 <td width="30%">发送时间</td>
 </tr>
 <tr>
 <td height="27">1</td>
 <td>琦琦</td>
 <td>妈妈</td>
 <td>愿你健康快乐的成长！</td>
 <td>2011-07-05 13:06:06</td>
 </tr>
 <tr>
 <td height="27">1</td>
 <td>wgh</td>
 <td>爸爸</td>
 <td>愿你健康快乐的成长！</td>
 <td>2011-07-05 13:06:06</td>
 </tr>
 <tr>
 <td height="27">1</td>
 <td>花花</td>
 <td>wgh</td>
 <td>愿你健康快乐的成长！</td>
 <td>2011-07-05 13:06:06</td>
 </tr>
  <tr>
 <td height="27">1</td>
 <td>科科</td>
 <td>wgh</td>
 <td></td>
 <td>2011-07-05 13:06:06</td>
 </tr>
</table>
<script type="text/javascript">
  $(document).ready(function() {
   $("td:parent").css("background-color","#E8F3D1");  //为不为空的单元格设置背景颜色
   $("td:empty").html("暂无内容");         //为空的单元格添加默认内容
   $("td:contains('wgh')").css("color","red");     //将含有文本wgh的单元格的文字颜色设置为红色
  });
</script>

Quatre résultats en cours

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser VUE pour réduire le nombre de requêtes au serveur

Comment Vue utilise le CDN pour optimiser le chargement du premier écran La vitesse de

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!