jQuery
DOM-Manipulation

Erstellen von DOM-Elementen

Die jQuery Funktion (normalerweise als $ ) kann sowohl zum Auswählen von Elementen als auch zum Erstellen neuer Elemente verwendet werden.

var myLink = $('<a href="http://stackexchange.com"></a>');

Sie können optional ein zweites Argument mit Elementattributen übergeben:

var myLink = $('<a>', { 'href': 'http://stackexchange.com' });

'<a>' -> Das erste Argument gibt den Typ des DOM-Elements an, das Sie erstellen möchten. In diesem Beispiel handelt es sich um einen Anker , es könnte sich jedoch um alles auf dieser Liste handeln . Siehe die Spezifikation für eine Referenz des a Elements.

{ 'href': 'http://stackexchange.com' } -> Das zweite Argument ist ein JavaScript-Objekt mit Attributnamen / Wert-Paaren.

Die 'name': 'value' -Paare werden zwischen den < > des ersten Arguments <a name:value> , zum Beispiel <a name:value> wäre in unserem Beispiel <a href="http://stackexchange.com"></a>

Elementklassen bearbeiten

Angenommen, die Seite enthält ein HTML-Element wie:

<p class="small-paragraph">
  This is a small <a href="https://en.wikipedia.org/wiki/Paragraph">paragraph</a>
  with a <a class="trusted" href="http://stackexchange.com">link</a> inside.
</p>

jQuery bietet nützliche Funktionen zum Bearbeiten von DOM-Klassen, insbesondere hasClass() , addClass() , removeClass() und toggleClass() . Diese Funktionen ändern direkt das class der übereinstimmenden Elemente.

$('p').hasClass('small-paragraph'); // true
$('p').hasClass('large-paragraph'); // false

// Add a class to all links within paragraphs
$('p a').addClass('untrusted-link-in-paragraph');

// Remove the class from a.trusted
$('a.trusted.untrusted-link-in-paragraph')
.removeClass('untrusted-link-in-paragraph')
.addClass('trusted-link-in-paragraph');

Klasse umschalten

Mit dem Beispielmarkup können wir eine Klasse mit unserer ersten .toggleClass() hinzufügen:

$(".small-paragraph").toggleClass("pretty");

Jetzt würde dies true : $(".small-paragraph").hasClass("pretty")

toggleClass bietet den gleichen Effekt mit weniger Code als:

if($(".small-paragraph").hasClass("pretty")){
   $(".small-paragraph").removeClass("pretty");}
else {
   $(".small-paragraph").addClass("pretty"); }

zwei Klassen umschalten:

$(".small-paragraph").toggleClass("pretty cool");

Boolean zum Hinzufügen / Entfernen von Klassen:

$(".small-paragraph").toggleClass("pretty",true); //cannot be truthy/falsey

$(".small-paragraph").toggleClass("pretty",false);

Funktion für Klassenumschaltung (siehe Beispiel weiter unten, um ein Problem zu vermeiden)

$( "div.surface" ).toggleClass(function() {
  if ( $( this ).parent().is( ".water" ) ) {
    return "wet";
  } else {
    return "dry";
  }
});

In Beispielen verwendet:

// functions to use in examples
function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
function isOdd(num) { return num % 2;}
var showClass = true; //we want to add the class

Beispiele:

Verwenden Sie den Elementindex, um die Klassen ungerade / gerade umzuschalten

$( "div.gridrow" ).toggleClass(function(index,oldClasses, false), showClass ) {
  showClass
  if ( isOdd(index) ) {
    return "wet";
  } else {
    return "dry";
  }
});

Komplexeres toggleClass Beispiel bei einer einfachen Rastermarkierung

<div class="grid">
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow">row</div>
  <div class="gridrow gridfooter">row but I am footer!</div>
</div>

Einfache Funktionen für unsere Beispiele:

function isOdd(num) {
  return num % 2;
}

function stringContains(myString, mySubString) {
  return myString.indexOf(mySubString) !== -1;
}
var showClass = true; //we want to add the class

Fügen Sie Elementen mit einer gridrow Klasse eine ungerade / gerade Klasse gridrow

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  if (isOdd(index)) {
    return "odd";
  } else {
    return "even";
  }
  return oldClasses;
}, showClass);

Wenn die Zeile eine gridfooter Klasse hat, entfernen Sie die ungeraden / geraden Klassen. gridfooter den Rest bei.

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (isFooter) {
    oldClasses = oldClasses.replace('even', ' ').replace('odd', ' ');
    $(this).toggleClass("even odd", false);
  }
  return oldClasses;
}, showClass);

Die Klassen, die zurückgegeben werden, sind das, was bewirkt wird. Wenn ein Element keinen gridfooter , fügen Sie hier eine Klasse für gerade / ungerade hinzu. Dieses Beispiel veranschaulicht die Rückgabe der ALD-Klassenliste. Wenn dies else return oldClasses; wird entfernt, nur die neuen Klassen werden hinzugefügt, daher würden in der Zeile mit einer gridfooter Klasse alle Klassen entfernt, wenn wir die alten nicht zurückgegeben hätten - sie wären sonst umgeschaltet (entfernt).

$("div.gridrow").toggleClass(function(index, oldClasses, showThisClass) {
  var isFooter = stringContains(oldClasses, "gridfooter");
  if (!isFooter) {
    if (isOdd(index)) {
      return "oddLight";
    } else {
      return "evenLight";
    }
  } else return oldClasses;
}, showClass);

Andere API-Methoden

jQuery bietet eine Vielzahl von Methoden, die zur DOM-Manipulation verwendet werden können.

Die erste ist die .empty () -Methode.

Stellen Sie sich folgendes Markup vor:

<div id="content">
  <div>Some text</div>
</div>

Durch Aufruf von $('#content').empty(); Das innere Div würde entfernt werden. Dies kann auch mit $('#content').html(''); .

Eine weitere praktische Funktion ist die .closest () - Funktion:

<tr id="row_1">
  <td><button type="button" class="delete">Delete</button>
</tr>

Wenn Sie die nächste Zeile einer Schaltfläche suchen möchten, die in einer der Zeilenzellen angeklickt wurde, können Sie Folgendes tun:

$('.delete').click(function() {
  $(this).closest('tr');
});

Da es wahrscheinlich mehrere Zeilen sein, jede mit ihren eigenen delete verwenden wir $(this) innerhalb der .click () Funktion den Bereich auf die Schaltfläche begrenzen wir tatsächlich angeklickt.

Wenn Sie die id der Zeile mit der Schaltfläche " Delete möchten, auf die Sie geklickt haben, können Sie etwa Delete eingeben:

$('.delete').click(function() {
  var $row = $(this).closest('tr');
  var id = $row.attr('id');
});

In der Regel wird empfohlen, Variablen, die jQuery-Objekte enthalten, ein $ (Dollarzeichen) voranzustellen, um die Variablen eindeutig darzustellen.

Eine Alternative zu .closest() ist die Methode .parents () :

$('.delete').click(function() {
  var $row = $(this).parents('tr');
  var id = $row.attr('id');
});

und es gibt auch eine .parent () - Funktion:

$('.delete').click(function() {
  var $row = $(this).parent().parent();
  var id = $row.attr('id');
});

.parent() geht nur eine Ebene des DOM-Baums nach oben. .parent() ist es ziemlich unflexibel. Wenn Sie die Schaltfläche "Löschen" so ändern, dass sie zum Beispiel innerhalb eines span , wird der jQuery-Selektor beschädigt.

.html ()

Sie können diese Methode verwenden, um den gesamten HTML-Code innerhalb des Selektors zu ersetzen. Angenommen, Sie haben ein HTML-Element wie dieses

<div class="row">
    <div class="col-md-12">
        <div id="information">
            <p>Old message</p>
        </div>
    </div>
</div>

Sie könnten .html() . Entfernen und Hinzufügen eines Warn- oder Informationstextes, um Benutzer mit einer Zeile zu warnen.

$("#information").html("<p>This is the new alert!</p>");

Elemente sortieren

Um Elemente effizient zu sortieren (alle gleichzeitig und mit minimaler DOM-Unterbrechung), müssen wir:

1. Finde die Elemente
2. Sortiere basierend auf einer festgelegten Bedingung
3. Legen Sie in dem DOM zurück

<ul id='my-color-list'>
    <li class="disabled">Red</li>
    <li>Green</li>
    <li class="disabled">Purple</li>
    <li>Orange</li>
</ul>

1. Finde sie - .children() oder .find()

   Dies gibt uns ein Array-ähnliches Objekt, mit dem wir spielen können.

   var $myColorList = $('#my-color-list');
   
   // Elements one layer deep get .children(), any deeper go with .find()
   var $colors = $myColorList.children('li');
   

2. Ordnen Sie sie neu an - Array.prototype.sort()

   Dies ist derzeit so eingestellt, dass die Elemente in aufsteigender Reihenfolge basierend auf dem HTML-Inhalt (auch bekannt als deren Farben) zurückgegeben werden.

   /**
    * Bind $colors to the sort method so we don't have to travel up
    * all these properties more than once.
    */
   var sortList = Array.prototype.sort.bind($colors);
   
   sortList(function ( a, b ) {
   
       // Cache inner content from the first element (a) and the next sibling (b)
       var aText = a.innerHTML;
       var bText = b.innerHTML;
    
       // Returning -1 will place element `a` before element `b`
       if ( aText < bText ) {
           return -1;
       }
   
       // Returning 1 will do the opposite
       if ( aText > bText ) {
           return 1;
       }
   
       // Returning 0 leaves them as-is
       return 0;
   });
   

3. Fügen Sie sie ein - .append()

   Beachten Sie, dass wir die Elemente nicht zuerst append() - append() wird Elemente verschieben, die bereits im DOM vorhanden sind, sodass keine zusätzlichen Kopien vorhanden sind

   // Put it right back where we got it
   $myColorList.append($colors);
   

Mach es niedlich

Fügen Sie eine Sortierschaltfläche hinzu

<!-- previous HTML above -->
<button type='button' id='btn-sort'>
    Sort
</button>

Legen Sie den Anfangswert der Sortierrichtung fest

var ascending = true;

Zwischenspeichern Sie unsere DOM-Elemente und sortList() hier, um die DOM-Verarbeitung zu minimieren

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

Wickeln Sie alles in eine doSort() Funktion

// Put the sortList() and detach/append calls in this portable little thing
var doSort = function ( ascending ) {

    sortList(function ( a, b ) {
        // ...
    });

    $myColorList.append($colors);
};

Klick-Handler für $('#btn-sort')

$('#btn-sort').on('click', function () {
    // Run the sort and pass in the direction value
    doSort(ascending);

    // Toggle direction and save
    ascending = !ascending;
});

Jetzt alle zusammen

var ascending = true;

var $myColorList = $('#my-color-list');
var $colors = $myColorList.children('li');
var sortList = Array.prototype.sort.bind($colors);

var doSort = function ( ascending ) {
    
    sortList(function ( a, b ) {

        var aText = a.innerHTML;
        var bText = b.innerHTML;

        if ( aText < bText ) {
            return ascending ? -1 : 1;
        }

        if ( aText > bText ) {
            return ascending ? 1 : -1;
        }

        return 0;
    });
    
    $myColorList.append($colors);

};

$('#btn-sort').on('click', function () {
    doSort(ascending);
    ascending = !ascending;
});

Bonus

Mehrstufige Sortierung (Gruppierung sortierter Elemente)

// ...

var doSort = function ( ascending ) {

    sortList(function ( a, b ) {

        // ...initial sorting...

    }).sort(function ( a, b ) {
        
        // We take the returned items and sort them once more
        var aClass = a.className;
        var bClass = b.className;
        
        // Let's group the disabled items together and put them at the end

        /**
         * If the two elements being compared have the same class
         * then there's no need to move anything.
         */
        if ( aClass !== bClass ) {
            return aClass === 'disabled' ? 1 : -1;
        }
        return 0;
    });

    // And finalize with re-insert
    $myColorList.append($colors);
};

// ...

Kannst du noch einen Schritt weiter gehen?

Fügen Sie eine weitere Schaltfläche hinzu, um die deaktivierte Gruppensortierung umzuschalten

MDN - Array.prototype.sort ()