Detaillierte Erläuterung der Verwendung von jQuery.not(selector)-js-Tutorial-php.cn

Detaillierte Erläuterung der Verwendung von jQuery.not(selector)

巴扎黑

Freigeben： 2017-06-22 17:51:57

Original

2429 Leute haben es durchsucht

.not(selector) Gibt zurück: jQuery

Beschreibung: Elemente aus dem Satz übereinstimmender Elemente entfernen.

Version hinzugefügt: 1.0.not (Selektor)

Auswählen

Typ: Selektor oder Element oder Array

enthält Selektorausdruck, DOM-Element oder eine Zeichenfolge von Arrays von Elementen, die dieser Menge entsprechen.

Version erhöht: 1.4. (Funktion)

Funktion

Typ: Funktion(Ganzzahlindex, Elementelement) => Boolean

Funktion, die als Test für jedes Element in der Sammlung verwendet wird. Es akzeptiert zwei Parameter: index, der der Index des Elements im jQuery-Sammlungselement ist, das das DOM-Element ist. Innerhalb dieser Funktion bezieht sich dies auf das aktuelle DOM-Element.

Version hinzugefügt: 1.4 Nicht ausgewählt (ausgewählt)

Ausgewählt

Typ: jQuery

Ein vorhandenes jQuery-Objekt, das mit der aktuellen Gruppe von Elementen übereinstimmt.

Gegeben ein jQuery-Objekt, das eine Menge von DOM-Elementen darstellt.not(), erstellt diese Methode ein neues jQuery-Objekt aus einer Teilmenge übereinstimmender Elemente. Der bereitgestellte Selektor wird für jedes Element getestet. Elemente, die nicht mit dem Selektor übereinstimmen, werden in das Ergebnis einbezogen.

Stellen Sie sich eine Seite mit einer einfachen Liste vor:

fünf

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Nach dem Login kopieren

Wir können diese Methode auf eine Reihe von Listenelementen anwenden:

$( "li" ).not( ":even" ).css( "background-color", "red" );

Nach dem Login kopieren

Das Ergebnis dieses Aufrufs ist ein roter Hintergrund für die Elemente 2 und 4, da sie nicht mit dem Selektor übereinstimmen (zur Erinnerung: even:odd verwendet einen Index von 0).

Bestimmte Elemente entfernen

Die zweite Version der .not()-Methode ermöglicht es uns, Elemente aus der übereinstimmenden Menge zu entfernen, vorausgesetzt, wir haben sie zuvor mit anderen Methoden gefunden. Nehmen wir zum Beispiel an, dass in unserer Liste eine ID auf eines ihrer Elemente angewendet wird:

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li id="notli">list item 3</li>
  <li>list item 4</li>
  <li>list item 5</li>
</ul>

Nach dem Login kopieren

Wir können das dritte Listenelement mithilfe der nativen Funktion JavaScript getElementById() abrufen und dann abrufen it from jQuery Entfernen Sie es aus dem Objekt:

$( "li" ).not( document.getElementById( "notli" ) )
  .css( "background-color", "red" );

Nach dem Login kopieren

Diese Anweisung ändert die Farbe der Elemente 1, 2, 4 und 5. Mit einfacheren jQuery-Ausdrücken könnten wir dasselbe erreichen, aber diese Technik wäre nützlich, wenn beispielsweise andere Bibliotheken Verweise auf reine DOM-Knoten bereitstellen.

Ab jQuery 1.4 kann die .not()-Methode auf die gleiche Weise wie .filter() eine Funktion als Parameter annehmen. Von der Funktion true zurückgegebene Elemente werden aus der gefilterten Sammlung ausgeschlossen; alle anderen Elemente werden eingeschlossen.

Hinweis: Wenn die Zeichenfolge CSS-Selektor an .not() übergeben wird, werden Text- und Kommentarknoten während des Filtervorgangs immer aus dem resultierenden jQuery-Objekt entfernt. Wenn Sie einen bestimmten Knoten oder ein bestimmtes Knotenarray bereitstellen, wird der Text- oder Kommentarknoten nur dann aus dem jQuery-Objekt entfernt, wenn er mit einem der Knoten im gefilterten Array übereinstimmt.

Beispiel:

Fügen Sie einem Div einen Rahmen hinzu, der nicht grün oder blau ist.

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>not demo</title>
  <style>
  div {
    width: 50px;
    height: 50px;
    margin: 10px;
    float: left;
    background: yellow;
    border: 2px solid white;
  }
  .green {
    background: #8f8;
  }
  .gray {
    background: #ccc;
  }
  #blueone {
    background: #99f;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<div></div>
<div id="blueone"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
 
<script>
$( "div" ).not( ".green, #blueone" )
  .css( "border-color", "red" );
</script>
 
</body>
</html>

Nach dem Login kopieren

Demo:

Entfernen Sie das Element mit der ID „ausgewählt“ aus der Sammlung aller Absätze.

$( "p" ).not( $( "#selected" )[ 0 ] );

Nach dem Login kopieren

Entfernt das Element mit der ID „ausgewählt“ aus der Sammlung aller Absätze.

$( "p" ).not( "#selected" );

Nach dem Login kopieren

Entfernt alle Elemente, die mit „div p.selected“ übereinstimmen, aus der Gesamtmenge aller Absätze.

$( "p" ).not( $( "div p.selected" ) );

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von jQuery.not(selector). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!