jquery 过滤数据 - Javascript (1)

📌 相关文章

📜 jquery 过滤数据 - Javascript (1)

📅 最后修改于: 2023-12-03 14:43:19.158000 🧑 作者: Mango

jQuery 过滤数据 - JavaScript

jQuery是一种快速、简洁的JavaScript库，致力于简化HTML文档遍历和操作、事件处理、AJAX和动画效果的封装。在前端开发中，我们经常需要对数据进行过滤，jQuery提供了一些非常方便的方法来实现这个功能。

jQuery中过滤数据的方法

filter()：根据指定的选择器或函数过滤元素集合。

$('p').filter(':even').css('background-color', 'yellow');

not()：从元素集合中过滤出与指定选择器或元素集合不匹配的元素。

$('p').not('.selected').css('background-color', 'red');

has()：过滤出包含指定选择器或元素集合的元素。

$('ul').has('li:gt(2)').addClass('new');

first()：过滤出第一个元素。

$('li').first().addClass('first');

last()：过滤出最后一个元素。

$('li').last().addClass('last');

eq()：过滤出指定索引位置的元素。

$('li').eq(2).addClass('active');

实例

下面是一个简单的HTML页面，包含四个按钮和一个列表。用户可以选择一个按钮来过滤列表元素。

<!DOCTYPE html>
<html>
<head>
	<title>jQuery 过滤数据 - JavaScript</title>
	<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('.filter-button').click(function(){
				// 获取按钮的data属性值
				var filter = $(this).data('filter');
				// 过滤列表元素
				$('li').filter(filter).css('background-color', 'yellow');
				$('li').not(filter).css('background-color', 'white');
			});
		});
	</script>
	<style type="text/css">
		button {
			margin: 10px;
		}
		li {
			font-size: 18px;
			margin: 10px;
			padding: 5px;
			border: 1px solid #ccc;
			list-style-type: none;
		}
	</style>
</head>
<body>
	<button class="filter-button" data-filter=":even">偶数项</button>
	<button class="filter-button" data-filter=":odd">奇数项</button>
	<button class="filter-button" data-filter=".selected">已选中</button>
	<button class="filter-button" data-filter=".new">新添加</button>
	<ul>
		<li>项1</li>
		<li class="selected">项2（已选中）</li>
		<li class="new">项3（新添加）</li>
		<li>项4</li>
		<li class="selected">项5（已选中）</li>
		<li>项6</li>
		<li class="new">项7（新添加）</li>
		<li>项8</li>
		<li class="selected">项9（已选中）</li>
	</ul>
</body>
</html>

上面的代码中，我们使用了data属性来存储过滤器的值，当用户点击按钮时，我们将该值提取出来，并使用filter()和not()方法来过滤列表元素。具体过程如下：

当用户点击某个按钮时，执行$('.filter-button').click()事件处理程序。
使用$(this).data('filter')方法获取按钮的data-filter属性值。
使用$('li').filter(filter)方法过滤出满足条件的列表项，并将其背景色设为黄色。
使用$('li').not(filter)方法过滤出不满足条件的列表项，并将其背景色设为白色。

总结

在jQuery中过滤数据的方法非常灵活和方便，可以根据不同的需求使用不同的方法来实现。在开发过程中，可以根据具体的业务需求选择合适的方法来过滤数据，提高代码的可读性和可维护性。