Exemple d'utilisation simple du filtre de contenu dans jQuery-js tutoriel-php.cn

Exemple d'utilisation simple du filtre de contenu dans jQuery

亚连

Libérer： 2018-05-28 10:16:06

original

1151 Les gens l'ont consulté

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>

Copier après la connexion

Quatre résultats en cours