菜单
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

jQuery - 过滤器


jQuery 过滤器

使用 jQuery 筛选/搜索特定元素。


过滤表格

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

示例

在输入框中键入内容以搜索表格中的名字、姓氏或电子邮件


邮箱
John Doe john@example.com
Mary Moe mary@mail.com
July Dooley july@greatstuff.com
Anja Ravendale a_r@test.com

jQuery

<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”)。



过滤列表

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

示例

在输入框中键入内容以搜索列表中的项


  • First item
  • Second item
  • Third item
  • Fourth
自己动手试一试 »

过滤任意内容

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

示例


我是一个段落。

我是一个嵌套在 div 中的 div 元素。

另一个段落。

自己动手试一试 »

×

联系销售

如果您想将 W3Schools 服务用于教育机构、团队或企业,请发送电子邮件给我们
sales@w3schools.com

报告错误

如果您想报告错误,或想提出建议,请发送电子邮件给我们
help@w3schools.com

W3Schools 经过优化,旨在方便学习和培训。示例可能经过简化,以提高阅读和学习体验。教程、参考资料和示例会不断审查,以避免错误,但我们无法保证所有内容的完全正确性。使用 W3Schools 即表示您已阅读并接受我们的使用条款Cookie 和隐私政策

版权所有 1999-2024 Refsnes Data。保留所有权利。W3Schools 由 W3.CSS 提供支持