jQuery 如何根据样式选择元素

在本文中，我们将介绍如何使用jQuery根据元素的样式选择元素。jQuery是一个流行的JavaScript库，它简化了HTML文档遍历、操作和事件处理。

通过CSS选择器选择具有特定样式的元素

通过使用CSS选择器，我们可以轻松地选择具有特定样式的元素。在jQuery中，可以使用$()函数以及CSS选择器来选择元素。下面是一些常见的CSS选择器示例：

使用class选择器选择具有特定class的元素

$('.classname')

上面的代码将选择所有具有指定class的元素，并返回一个包含这些元素的jQuery对象。

例如，如果我们想选择所有class为”red”的元素，可以使用以下代码：

$('.red')

使用属性选择器选择具有特定样式的元素

$('[style="property:value"]')

上面的代码将选择具有指定样式的元素，并返回一个包含这些元素的jQuery对象。

例如，如果我们想选择所有color:red的元素，可以使用以下代码：

$('[style="color:red"]')

使用过滤器选择具有特定样式的元素

jQuery还提供了一系列可以根据元素的样式属性进行过滤的过滤器。下面是一些常见的过滤器示例：

:visible和:hidden过滤器

:visible过滤器可以选择所有可见的元素，而:hidden过滤器可以选择所有隐藏的元素。

例如，如果我们想选择所有可见的元素，可以使用以下代码：

$(':visible')

:not过滤器

:not过滤器可以选择不匹配指定选择器的所有元素。

例如，如果我们想选择所有不具有指定class的元素，可以使用以下代码：

$(':not(.classname)')

:has过滤器

:has过滤器可以选择包含匹配指定选择器的元素的元素。

例如，如果我们想选择所有包含class为”red”的元素的父元素，可以使用以下代码：

$(':has(.red)')

示例

为了更好地理解如何根据元素的样式选择元素，以下是一些示例：

示例1：选择具有特定class的元素

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function(){$ ('.red').css('background-color', 'yellow');
});
</script>
</head>
<body>

<p class="red">This paragraph has a red class.</p>
<p>This paragraph does not have a red class.</p>

</body>
</html>

上面的代码将选择所有具有class为”red”的元素，并将它们的背景颜色更改为黄色。

示例2：选择具有特定样式的元素

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
 $(document).ready(function(){$ ('[style="color:red"]').hide();
});
</script>
</head>
<body>

<p style="color:red">This paragraph has red text color.</p>
<p>This paragraph does not have red text color.</p>

</body>
</html>

上面的代码将选择所有具有color:red样式的元素，并隐藏它们。