jQuery - 多个：非选择器

Javascript
$('p, div') // 选择所有的
和<div>元素

元素。

根据位置选择元素

多个非选择器还允许我们根据元素在文档中的位置进行选择。以下是一些常见的位置选择器：

- :first：选择匹配选择器的第一个元素。

- :last：选择匹配选择器的最后一个元素。

- :even：选择索引为偶数的元素。

- :odd：选择索引为奇数的元素。

下面的例子展示了如何使用这些位置选择器：

Javascript
$('p:first') // 选择第一个
元素
$('div:last') // 选择最后一个<div>元素
$('ul li:even') // 选择所有偶数索引的<li>元素

根据属性选择元素

多个非选择器还允许我们根据元素的属性进行选择。以下是一些常见的属性选择器：

- [attribute]：选择具有指定属性的元素。

- [attribute=value]：选择具有指定属性和值的元素。

以下是一个例子：

Javascript
$('input[type]') // 选择所有带有"type"属性的<input>元素
$('a[class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=https://example.com"]') // 选择所有链接到"https://example.com"的<a>元素

根据内容选择元素

多个非选择器还允许我们根据元素的内容进行选择。以下是一些常见的内容选择器：

- :contAIns(text)：选择包含指定文本的元素。

以下是一个例子：

Javascript
$('p:contAIns("Hello")') // 选择包含文本"Hello"的所有
元素

案例代码

下面是一个使用多个非选择器的示例代码：

html
<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.JS"></script>
</head>
<body>
    <h1>多个非选择器示例</h1>
    <div>
        
Hello
        
World
    </div>
    <ul>
        <li>Apple</li>
        <li>Banana</li>
        <li>Orange</li>
    </ul>
    <script>
        // 选择所有的
和<li>元素，并将它们的文本内容改为"Hello jQuery"
        $('p, li').text('Hello jQuery');
    </script>
</body>
</html>

在这个例子中，我们选择了所有的

和

元素，并将它们的文本内容改为"Hello jQuery"。这是一个简单的示例，演示了多个非选择器的使用。

多个非选择器是jQuery中强大且实用的功能之一。它使我们能够方便地选择和操作一组元素。我们可以根据元素的位置、属性、内容等进行选择。通过合理地使用多个非选择器，我们可以更加高效地开发网页。希望本文对你理解多个非选择器的用法有所帮助！