Heim  >  Artikel  >  Web-Frontend  >  Der JQuery-Attributfilter enthält nicht

Der JQuery-Attributfilter enthält nicht

PHPz
PHPzOriginal
2023-05-18 17:55:381009Durchsuche

Beim Erlernen und Verwenden von jQuery sind Attributselektoren ein sehr wichtiger Selektortyp. Attributselektoren können Elemente basierend auf ihren Attributwerten filtern: „Gleich“, „Ungleich“, „Enthält“ und „Enthält nicht“.

Unter den Attributfiltern scheint der Ausschlussfilter jedoch nicht so häufig verwendet zu werden wie andere Attributfilter. Der Ausschlussfilter ist ein relativ komplexer Filter, der die Eingabe eines bestimmten Selektors zum Filtern erfordert. In diesem Artikel werden wir den Ausschlussfilter in jQuery und seine Verwendung untersuchen.

1. Syntax, die keine Attributfilter enthält

Die Syntax zum Ausschließen von Attributfiltern ähnelt der Syntax anderer Attributfilter, Sie müssen jedoch Doppelpunkte verwenden: in eckigen Klammern. Seine allgemeine Form ist wie folgt:

$('selector:not([attribute!=value])'); $('selector:not([attribute!=value])');

这个选择器使用了not()方法,它将筛选器包裹起来并排除了所有满足选择器的元素。我们可以在方括号内使用一个或多个属性、值和运算符。

如果我们不希望元素匹配一个特定的属性值,则可以使用不包含的筛选器。在方括号内使用一个感叹号!,跟随一个等号=。在等号后面的引号内,我们可以编写我们不希望匹配的属性值。

二、不包含属性筛选器的使用

为了更好地理解不包含属性筛选器,让我们看一些具体的例子。

我们有如下的HTML代码:

    <div class="example" data-value="9"></div>
    <div class="example" data-value="10"></div>
    <div class="example" data-value="12"></div>

现在,我们希望在这些元素中,只选择那些data-value属性的值不包含“5”的元素。我们可以使用以下代码来实现:

$('.example:not([data-value="5"])');

这将给我们返回data-value属性为9、10和12的三个元素。这是因为5是我们不想要的属性值,not()方法将匹配的结果反转,并返回我们想要的元素。

接下来,我们可以使用其他的属性和运算符来扩展这个选择器。例如,我们可以使用<运算符来选择data-value属性小于十的元素:

$('.example:not([data-value<"10"])');

Dieser Selektor verwendet die not()-Methode, die den Filter umschließt und ausschließt alle Elemente, die den Selektor erfüllen. Wir können eine oder mehrere Eigenschaften, Werte und Operatoren in eckigen Klammern verwenden.

Wenn wir nicht möchten, dass Elemente einem bestimmten Attributwert entsprechen, können wir einen Ausschlussfilter verwenden. Verwenden Sie in eckigen Klammern ein Ausrufezeichen !, gefolgt von einem Gleichheitszeichen =. Innerhalb der Anführungszeichen nach dem Gleichheitszeichen können wir Attributwerte schreiben, mit denen wir nicht übereinstimmen möchten.

2. Verwendung von Attributfiltern, die nicht enthalten

Um Attributfilter, die nicht enthalten, besser zu verstehen, schauen wir uns einige konkrete Beispiele an.

Wir haben den folgenden HTML-Code: 🎜rrreee🎜Jetzt möchten wir nur diejenigen Elemente auswählen, deren Datenwertattribut unter diesen Elementen nicht „5“ enthält. Wir können den folgenden Code verwenden, um dies zu erreichen: 🎜🎜 $('.example:not([data-value="5"])'); 🎜🎜Dies gibt uns den Datenwert zurück Attribut als Die drei Elemente von 9, 10 und 12. Dies liegt daran, dass 5 der Attributwert ist, den wir nicht wollen, und die Methode not() das übereinstimmende Ergebnis invertiert und das gewünschte Element zurückgibt. 🎜🎜Als nächstes können wir diesen Selektor um weitere Attribute und Operatoren erweitern. Beispielsweise können wir den Operator < verwenden, um Elemente auszuwählen, deren Datenwertattribut kleiner als zehn ist: 🎜🎜 $('.example:not([data-value<"10"])'); /code> 🎜🎜Dadurch werden Elemente mit den Datenwertattributen 9 und 5 anstelle von 10 und 12 ausgewählt. 🎜🎜3. Zusammenfassung🎜🎜Der Nicht-Attribut-Filter ist ein sehr nützlicher Selektor, der uns helfen kann, schnell Code zu schreiben, um die gewünschten Elemente zu filtern. Obwohl es etwas kompliziert ist, können Sie, solange Sie die grundlegende Syntax und Verwendung verstehen, seine Leistungsfähigkeit nutzen, um Ihren Code prägnanter und leichter lesbar zu machen. 🎜🎜Bevor Sie jQuery-Selektoren schreiben, stellen Sie sicher, dass Sie die Syntax und Verwendung vollständig verstanden haben, und testen Sie Ihren Code, um sicherzustellen, dass er ordnungsgemäß funktioniert. Vielen Dank, dass Sie diesen Artikel gelesen haben. Wir hoffen, dass er Ihnen beim Schreiben von jQuery-Code hilfreich sein wird. 🎜

Das obige ist der detaillierte Inhalt vonDer JQuery-Attributfilter enthält nicht. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn