jQuery
DOM-manipulatie

DOM-elementen maken

De jQuery -functie (meestal aliased als $ ) kan zowel gebruikt worden om elementen te selecteren en om nieuwe elementen te creëren.

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

U kunt desgewenst een tweede argument met elementattributen doorgeven:

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

'<a>' -> Het eerste argument geeft het type DOM-element aan dat u wilt maken. In dit voorbeeld is het een anker, maar het kan van alles op deze lijst zijn . Zie de specificatie voor een referentie van het a element.

{ 'href': 'http://stackexchange.com' } -> het tweede argument is een JavaScript-object met kenmerknaam / waardeparen.

de paren 'name': 'value' verschijnen tussen de < > van het eerste argument, bijvoorbeeld <a name:value> die voor ons voorbeeld <a href="http://stackexchange.com"></a>

Manipuleren van elementklassen

Ervan uitgaande dat de pagina een HTML-element bevat zoals:

<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 biedt handige functies om DOM-klassen te manipuleren, met name hasClass() , addClass() , removeClass() en toggleClass() . Deze functies wijzigen rechtstreeks het class attribuut van de overeenkomende elementen.

$('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');

Schakel een klas in

Gezien de voorbeeldmarkering kunnen we een klasse toevoegen met onze eerste .toggleClass() :

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

Dit zou nu true terugkeren: $(".small-paragraph").hasClass("pretty")

toggleClass biedt hetzelfde effect met minder code als:

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

schakelen tussen twee klassen:

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

Boolean om klassen toe te voegen / te verwijderen:

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

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

Functie voor klasse-omschakeling (zie voorbeeld verderop om een probleem te voorkomen)

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

Gebruikt in voorbeelden:

// 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

Voorbeelden:

Gebruik de elementindex om klassen even / oneven te schakelen

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

Complexer toggleClass voorbeeld, gegeven een eenvoudige rasteropmaak

<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>

Eenvoudige functies voor onze voorbeelden:

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

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

Voeg een oneven / even-klasse toe aan elementen met een gridrow

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

Als de rij een gridfooter klasse heeft, verwijder dan de oneven / even-klassen, bewaar de rest.

$("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);

De klassen die worden geretourneerd, worden uitgevoerd. Als een element geen gridfooter , voegt u hier een klasse toe voor even / oneven. Dit voorbeeld illustreert de terugkeer van de OUDE klassenlijst. Als dit else return oldClasses; is verwijderd, alleen de nieuwe klassen worden toegevoegd, dus de rij met een gridfooter klasse zou alle klassen hebben verwijderd als we die oude niet hadden geretourneerd - ze zouden anders zijn geschakeld (verwijderd).

$("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 biedt verschillende methoden die kunnen worden gebruikt voor DOM-manipulatie.

De eerste is de .empty () -methode.

Stel je de volgende markup voor:

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

Door $('#content').empty(); roepen $('#content').empty(); , zou de innerlijke div worden verwijderd. Dit kan ook worden bereikt met $('#content').html(''); .

Een andere handige functie is de .closest () functie:

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

Als u de rij wilt vinden die het dichtst bij een knop is geklikt binnen een van de rijcellen, dan kunt u dit doen:

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

Aangezien er waarschijnlijk meerdere rijen zijn, elk met hun eigen delete , gebruiken we $(this) in de .click () -functie om het bereik te beperken tot de knop waarop we daadwerkelijk hebben geklikt.

Als u het id van de rij met de knop Delete waarop u hebt geklikt, wilt krijgen, kunt u zoiets als dit doen:

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

Het wordt meestal als een goede gewoonte beschouwd om variabelen die jQuery-objecten bevatten, te prefixen met een $ (dollarteken) om duidelijk te maken wat de variabele is.

Een alternatief voor .closest() is de .parents () -methode:

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

en er is ook een .parent () functie:

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

.parent() gaat slechts één niveau van de DOM-structuur omhoog, dus het is behoorlijk inflexibel, als u bijvoorbeeld de verwijderknop in een span zou wijzigen, dan zou de jQuery-selector worden verbroken.

.html ()

U kunt deze methode gebruiken om alle HTML in de selector te vervangen. Ervan uitgaande dat u een HTML-element als dit hebt

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

U kunt .html() . om een waarschuwing of informatieve tekst te verwijderen en toe te voegen om gebruikers met één regel te waarschuwen.

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

Sorteerelementen

Om elementen efficiënt te sorteren (allemaal tegelijk en met minimale DOM-onderbreking), moeten we:

1. Zoek de elementen
2. Sorteren op basis van een ingestelde voorwaarde
3. Plaats terug in de DOM

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

1. Vind ze - .children() of .find()

   Dit geeft ons een Array-achtig object om mee te spelen.

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

2. Array.prototype.sort() ze - Array.prototype.sort()

   Dit is momenteel ingesteld om de elementen in oplopende volgorde te retourneren op basis van de HTML-inhoud (ook wel hun kleuren genoemd).

   /**
    * 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. Invoegen - .append()

   Merk op dat we de elementen niet eerst moeten loskoppelen - append() verplaatst elementen die al in de DOM bestaan, dus we hebben geen extra exemplaren

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

Maak het schattig

Sorteerknop toevoegen

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

Stel de beginwaarde van de sorteerrichting in

var ascending = true;

Cache onze DOM-elementen en sortList() hier om onze DOM-verwerking te minimaliseren

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

doSort() alles af in een doSort() -functie

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

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

    $myColorList.append($colors);
};

Klikhandler toevoegen voor $('#btn-sort')

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

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

Allemaal samen nu

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

Sorteren op meerdere niveaus (gesorteerde elementen groeperen)

// ...

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);
};

// ...

Kun je nog een stap verder gaan?

Voeg nog een knop toe om het sorteren van groepen uit te schakelen

MDN - Array.prototype.sort ()