Home > Web Front-end > JS Tutorial > body text

Detailed explanation of using jQuery content filter method

php中世界最好的语言
Release: 2018-05-02 16:09:21
Original
1234 people have browsed it

This time I will bring you a detailed explanation of the method of using jQuery content filter, and what are the precautions when using jQuery content filter. Here is a practical case, let's take a look.

1 Introduction

The content filter filters through the text content contained in DOM elements and whether they contain matching elements. There are 4 types of content filters: :contains(text), :empty, :has(selector) and :parent, as follows shown in the table.

Filter Description Example
contains(text) Match elements that contain the given text $("li:contains('DOM')") //Match li elements that contain "DOM" text content
:empty Matches all empty elements that do not contain child elements or text $("td:empty") //Match units that do not contain child elements or text Grid
:has(selector) Matches elements containing elements matched by the selector $("td:has(p)") //Match cells containing

tags in the cells of the table

:parent Match elements containing child elements or text $("td: parent") //Match cells that are not empty, that is, the cell also includes sub-elements or text

Second Application

Apply the content filter to match cells that are empty, cells that are not empty, and cells that contain the specified text

Three 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>
Copy after login

Four running results

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What are the ways for vue-cli to shorten the first screen loading time

Using the jQuery compound selector method Detailed explanation

The above is the detailed content of Detailed explanation of using jQuery content filter method. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!