前端必知必会-JQuery过滤器

编程岁月

于 2024-10-01 09:00:00 发布

阅读量306

点赞数 6

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/qq_24018193/article/details/142614444

版权

文章目录

jQuery - 过滤器
总结

jQuery - 过滤器

使用 jQuery 过滤/搜索特定元素。

过滤表格

对表格中的项目执行不区分大小写的搜索：

示例
在输入字段中输入内容以在表格中搜索名字、姓氏或电子邮件：

搜索…

名字	姓氏	电子邮件
John	Doe	john@example.com
Mary	Moe	mary@mail.com
July	Dooley	july@greatstuff.com
Anja	Ravendale	a_r@test.com

<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});

</script>

示例说明：我们使用 jQuery 循环遍历每个表行，以检查是否有任何文本值与输入字段的值匹配。toggle() 方法隐藏与搜索不匹配的行 (display:none)。我们使用 toLowerCase() DOM 方法将文本转换为小写，这使搜索不区分大小写（允许搜索“john”、“John”甚至“JOHN”）。

过滤列表

对列表中的项目执行不区分大小写的搜索：

示例
在输入字段中输入一些内容以在列表中搜索项目：

搜索…

第一项
第二项
第三项
第四项

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList li").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>

<h2>Filterable List</h2>
<p>Type something in the input field to search the list for specific items:</p>  
<input id="myInput" type="text" placeholder="Search..">
<br>

<ul id="myList">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth</li>
</ul>
  
</body>
</html>

过滤任何内容

对 div 元素内的文本执行不区分大小写的搜索：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myDIV *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});
</script>
</head>
<body>

<h2>Filter Anything</h2>
<p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p>
<input id="myInput" type="text" placeholder="Search..">

<div id="myDIV">
  <p>I am a paragraph.</p>
  <div>I am a div element inside div.</div>
  <button>I am a button</button>
  <button>Another button</button>
  <p>Another paragraph.</p>
</div>
  
</body>
</html>