MooTools - Selektoren

Selektoren werden verwendet, um HTML-Elemente auszuwählen. Wann immer Sie interaktive Webseiten erstellen möchten, müssen Sie einige Daten oder eine Aktion von dieser Webseite auswählen. Selektoren helfen uns, Daten durch HTML-Anfrage von Elementen zu erhalten.

Grundauswahl ($)

Das $ist der grundlegende Selektor in MooTools. Auf diese Weise können Sie das DOM-Element anhand seiner ID auswählen. Angenommen, Sie haben ein HTML-Element (z. B. div) mit dem Namenbody_id.

<div id = "body_id">

</div>

Wenn Sie dieses div auswählen möchten, verwenden Sie die folgende Syntax:

Syntax

//selects the element with the ID 'body_id'
$('body_id');

getElement ()

getElement () ist eine Methode, die den Basis-Selektor ($) erweitert. Sie können Ihre Auswahl mithilfe der Element-ID verfeinern. getElement () wählt nur das einzelne Element aus und gibt das erste zurück, wenn mehrere Optionen vorhanden sind. Sie können auch den Klassennamen verwenden, um das erste Vorkommen eines Elements abzurufen. Es wird jedoch kein Array von Elementen erhalten.

Mehrfachauswahl ($$)

Das $$ wird verwendet, um mehrere Elemente auszuwählen und diese mehreren Elemente in einem Array zu platzieren. Von diesem Array aus können wir die Liste auf verschiedene Arten bearbeiten, abrufen und neu anordnen. Schauen Sie sich die folgende Syntax an. Es definiert, wie alle div-Elemente aus einer Sammlung von HTML-Elementen auf einer Webseite ausgewählt werden.

Syntax

<div>
   <div>a div</div>
   <span id = "id_name">a span</span>
</div>

Wenn Sie alle Divs auswählen möchten, verwenden Sie die folgende Syntax:

Syntax

//all divs in the page
$$('div');

Wenn Sie mehrere Divs mit demselben ID-Namen auswählen möchten, verwenden Sie die folgende Syntax:

Syntax

//selects the element with the id 'id_name' and all divs
$$('#id_name', 'div');

getElements ()

Die Methode getElements () ähnelt der Methode getElement (). Diese Methode gibt alle Elemente gemäß den Kriterien zurück. Sie können entweder verwendenelement name (a, div, input) um diese Sammlungen oder ein bestimmtes Element auszuwählen class name zum Auswählen einer Sammlung von Elementen derselben Klasse.

Schließen Sie Ergebnisse mit Operatoren ein und aus

MooTools unterstützt verschiedene Operatoren, mit denen Sie Ihre Auswahl verfeinern können. Sie können alle diese Operatoren in der Methode getElements () verwenden. Jeder dieser Operatoren kann verwendet werden, um ein Eingabeelement nach Namen auszuwählen.

Schauen Sie sich die folgende Tabelle an. Es definiert die verschiedenen Operatoren, die MooTools unterstützt.

Operator	Beschreibung	Beispiel
= (gleich)	Wählen Sie das Eingabeelement anhand seines Namens aus.	$ ('body_wrap'). getElements ('input [name = phone_number]');
^ = (beginnt mit)	Wählen Sie das Eingabeelement aus, indem Sie die Anfangsbuchstaben des Namens vergleichen.	$ ('body_wrap'). getElements ('input [name ^ = phone]');
$ = (endet mit)	Wählen Sie das Eingabeelement aus, indem Sie die Endbuchstaben des Namens vergleichen.	$ ('body_wrap'). getElements ('input [name $ = number]');
! = (ist nicht gleich)	Deaktivieren Sie das Eingabeelement anhand seines Namens.	$ ('body_wrap'). getElements ('input [name! = address]');
* = (Enthält)	Wählen Sie das Eingabeelement aus, das ein bestimmtes Buchstabenmuster enthält.	$ ('body_wrap'). getElements ('input [name * = phone]');

Selektoren basierend auf der Elementreihenfolge

MooTools-Selektoren folgen bei der Elementauswahl einer bestimmten Reihenfolge. Die Selektoren folgen hauptsächlich zwei Ordnungen; einer ist gerade und der andere ist seltsam.

Note - Dieser Selektor beginnt bei 0, das erste Element ist also gerade.

Gleichmäßige Bestellung

In dieser Reihenfolge wählt der Selektor die Elemente aus, die in einer gleichmäßigen Reihenfolge angeordnet sind. Verwenden Sie die folgende Syntax, um alle geraden Divs in Ihrer HTML-Seite auszuwählen.

Syntax

// selects all even divs
$$('div:even');

Seltsame Reihenfolge

In dieser Reihenfolge wählt der Selektor das Element aus, das in einer ungeraden Reihenfolge angeordnet ist. Verwenden Sie die folgende Syntax, um alle ungeraden Divs in Ihrer HTML-Seite auszuwählen.

Syntax

// selects all odd divs
$$('div:odd');

Example

Das folgende Beispiel zeigt, wie ein Selektor funktioniert. Angenommen, auf einer Webseite befindet sich ein Textfeld und eine Liste der Technologien. Wenn Sie eine Technologie aus der Liste auswählen, indem Sie diesen Namen in das Textfeld eingeben, werden in der Liste die gefilterten Ergebnisse basierend auf Ihrer Eingabe angezeigt. Dies ist mit dem MooTools-Selektor möglich. Mit dem Selektor können wir dem Textfeld ein Ereignis hinzufügen. Der Ereignis-Listener wählt die Daten aus dem Textfeld aus und überprüft sie aus der Liste. Wenn es in der Liste vorhanden ist, werden in der Liste die gefilterten Ergebnisse angezeigt. Schauen Sie sich den folgenden Code an.

<html>

   <head>
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready',function(){
            var input = $('filter');
            
            // set the title attribute of every element
            // to it's text in lowercase
            $$('ul > li').each(function(item){
               item.set('title', item.get('text').toLowerCase());
            });
            
            // the function we'll call when the user types
            var filterList = function(){
               var value = input.value.toLowerCase();
               $$('li').setStyle('display','none');
               
               // check the title attribute if it contains whatever the user is typing
               $$('ul > li[title*=' + value + ']').setStyle('display','');
            };
            
            // make it happen
            input.addEvent('keyup', filterList);
         });
      </script>
   </head>
   
   <body>
      <p><input id = "filter" type = "text" /></p>
      <ul>
         <li>C</li>
         <li>Cpp</li>
         <li>Java</li>
         <li>JavaScript</li>
         <li>Hadoop</li>
         <li>Hive</li>
         <li>CouchDB</li>
      </ul>
   </body>
   
</html>

Sie erhalten folgende Ausgabe:

Output