jQuery
DOM-manipulation

Skapa DOM-element

Funktionen jQuery (vanligtvis alias som $ ) kan användas både för att välja element och för att skapa nya element.

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

Du kan valfritt överföra ett andra argument med elementattribut:

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

'<a>' -> Det första argumentet anger vilken typ av DOM-element du vill skapa. I det här exemplet är det ett ankare men kan vara vad som helst på den här listan . Se specifikationen för en referens till a elementet.

{ 'href': 'http://stackexchange.com' } -> det andra argumentet är ett JavaScript-objekt som innehåller attributnamn / värdepar.

paren 'namn': 'värde' visas mellan < > för det första argumentet, till exempel <a name:value> som för vårt exempel skulle vara <a href="http://stackexchange.com"></a>

Hantera elementklasser

Förutsatt att sidan innehåller ett HTML-element som:

<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 tillhandahåller användbara funktioner för att manipulera DOM-klasser, främst hasClass() , addClass() , removeClass() och toggleClass() . Dessa funktioner direkt ändra class attribut av de matchade element.

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

Växla en klass

Med tanke på exemplet kan vi lägga till en klass med vår första .toggleClass() :

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

Nu skulle återvända true : $(".small-paragraph").hasClass("pretty")

toggleClass ger samma effekt med mindre kod som:

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

växla mellan två klasser:

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

Boolean för att lägga till / ta bort klasser:

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

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

Funktion för klassväxling (se exempel längre ner för att undvika problem)

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

Används i exempel:

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

Exempel:

Använd elementindex för att växla klasser udda / jämnt

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

Mer komplext exempel på toggleClass , med en enkel rutnätsmarkering

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

Enkla funktioner för våra exempel:

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

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

Lägg till en udda / jämn klass till element med en gridrow klass

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

Om raden har en gridfooter bort udda / jämna klasser, behåll resten.

$("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 klasser som kommer tillbaka är vad som genomförs. Om ett element inte har en gridfooter lägga till en klass för jämnt / udda. Detta exempel illustrerar återkomsten av OLD-klasslistan. Om detta else return oldClasses; tas bort, bara de nya klasserna läggs till, därmed skulle raden med en gridfooter ha alla klasser bort om vi inte hade returnerat de gamla - de skulle ha blivit växlade (borttagna) annars.

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

Andra API-metoder

jQuery erbjuder en mängd olika metoder som kan användas för DOM-manipulation.

Den första är metoden .empty () .

Föreställ dig följande markering:

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

Genom att ringa $('#content').empty(); , den inre div skulle tas bort. Detta kan också uppnås genom att använda $('#content').html(''); .

En annan praktisk funktion är .closest () -funktionen:

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

Om du ville hitta den närmaste raden till en knapp som klickades in i en av radcellerna kan du göra detta:

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

Eftersom det förmodligen kommer att finnas flera rader, var och en med sina egna delete , använder vi $(this) i funktionen .click () för att begränsa räckvidden till den knapp vi faktiskt klickade på.

Om du ville få radens id innehåller knappen Delete som du klickade på så kan du göra något liknande:

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

Det anses vanligtvis god praxis att prefixa variabler som innehåller jQuery-objekt med $ (dollartecken) för att göra det klart vad variabeln är.

Ett alternativ till .closest() är metoden .parents () :

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

och det finns också en .parent () -funktion också:

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

.parent() går bara upp en nivå av DOM-trädet så det är ganska oflexibelt, om du skulle ändra raderingsknappen så att den till exempel innehåller ett span , skulle jQuery-väljaren vara trasig.

.html()

Du kan använda den här metoden för att ersätta all HTML i väljaren. Förutsatt att du har ett html-element som det här

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

Du kan använda .html() . att ta bort och lägga till en varning eller informationstekst för att varna användare alla med en rad.

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

Sortera element

För att sortera element effektivt (samtidigt och med minimal DOM-avbrott) måste vi:

1. Hitta elementen
2. Sortera baserat på ett inställt villkor
3. Sätt tillbaka i DOM

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

1. Hitta dem - .children() eller .find()

   Detta kommer att ge oss tillbaka ett Array-liknande objekt att leka med.

   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() dem - Array.prototype.sort()

   Detta är för närvarande inställt för att returnera elementen i stigande ordning baserat på HTML-innehållet (även deras färger).

   /**
    * 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. Sätt i dem - .append()

   Observera att vi inte behöver ta bort elementen först - append() kommer att flytta element som redan finns i DOM, så vi kommer inte att ha extra kopior

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

Gör det söt

Lägg till en sorteringsknapp

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

Ställ in det ursprungliga värdet för sorteringsriktningen

var ascending = true;

Cache våra DOM-element och sortList() här för att minimera vår DOM-behandling

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

Packa upp allt i en 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);
};

Lägg till klickhanterare 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;
});

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

Flernivåsortering (gruppering av sorterade element)

// ...

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

// ...

Kan du ta det ett steg längre?

Lägg till en annan knapp för att växla gruppsortering för funktionshindrade

MDN - Array.prototype.sort ()