Exemple d'utilisation simple du filtre de contenu dans jQuery

Cet article présente principalement l'utilisation simple des filtres de contenu dans jQuery et analyse les concepts, fonctions, scénarios d'application et méthodes d'utilisation associées des filtres de contenu dans jQuery sous forme d'exemples. Les amis dans le besoin peuvent s'y référer

L'exemple de cet article décrit l'utilisation simple du filtre 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 et :has(selector), comme indiqué dans le tableau ci-dessous. :parent

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(&#39;wgh&#39;)").css("color","red");     //将含有文本wgh的单元格的文字颜色设置为红色
  });
</script>

Quatre résultats en cours

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Explication détaillée de l'idée d'utiliser Vue pour créer un composant de carrousel d'images

Une brève analyse de Exemples de fonctions de rappel dans JS

Implémenter un effet de défilement de contenu basé sur iScroll

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!