jQuery => Manipolazione DOM

Creare elementi DOM

La funzione jQuery (solitamente con alias come $ ) può essere utilizzata sia per selezionare gli elementi sia per creare nuovi elementi.

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

Puoi facoltativamente passare un secondo argomento con gli attributi dell'elemento:

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

'<a>' -> Il primo argomento specifica il tipo di elemento DOM che si desidera creare. In questo esempio è un'ancora ma potrebbe essere qualsiasi cosa in questa lista . Vedere la specifica per un riferimento di a elemento.

{ 'href': 'http://stackexchange.com' } -> il secondo argomento è un oggetto JavaScript contenente coppie nome / valore di attributo.

le coppie "valore" appariranno tra il < > del primo argomento, ad esempio <a name:value> che per il nostro esempio sarebbe <a href="http://stackexchange.com"></a>

Manipolazione delle classi di elementi

Supponendo che la pagina includa un elemento HTML come:

<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 fornisce utili funzioni per manipolare le classi DOM, in particolare hasClass() , addClass() , removeClass() e toggleClass() . Queste funzioni modificano direttamente l'attributo di class degli elementi corrispondenti.

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

Attiva / disattiva una classe

Dato il markup di esempio, possiamo aggiungere una classe con il nostro primo .toggleClass() :

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

Ora ciò restituisce true : $(".small-paragraph").hasClass("pretty")

toggleClass fornisce lo stesso effetto con meno codice di:

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

Attiva / disattiva due classi:

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

Booleano per aggiungere / rimuovere classi:

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

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

Funzione per interruttore di classe (vedere l'esempio più in basso per evitare problemi)

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

Utilizzato in esempi:

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

Esempi:

Usa l'indice degli elementi per alternare le classi pari / dispari

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

Esempio di toggleClass più complesso, dato un semplice markup della griglia

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

Funzioni semplici per i nostri esempi:

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

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

Aggiungi una classe pari / dispari agli elementi con una classe di gridrow

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

Se la riga ha una classe gridfooter , rimuovi le classi dispari / pari, tieni il resto.

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

Le classi che vengono restituite sono ciò che viene effettuato. Qui, se un elemento non ha un gridfooter , aggiungi una classe pari / dispari. Questo esempio illustra il ritorno dell'elenco delle classi OLD. Se questo else return oldClasses; viene rimosso, solo le nuove classi vengono aggiunte, quindi la riga con una classe gridfooter avrebbe rimosso tutte le classi se non avessimo restituito quelle vecchie - altrimenti sarebbero state rimosse (rimosse) altrimenti.

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

Altri metodi API

jQuery offre una varietà di metodi che possono essere utilizzati per la manipolazione del DOM.

Il primo è il metodo .empty () .

Immagina il seguente markup:

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

Chiamando $('#content').empty(); , il div interno sarebbe rimosso. Ciò potrebbe anche essere ottenuto usando $('#content').html(''); .

Un'altra funzione utile è la funzione .closest () :

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

Se si desidera trovare la riga più vicina a un pulsante su cui è stato fatto clic all'interno di una cella riga, è possibile eseguire questa operazione:

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

Poiché probabilmente ci saranno più righe, ognuna con i propri pulsanti di delete , utilizzeremo $(this) all'interno della funzione .click () per limitare l'ambito al pulsante su cui abbiamo effettivamente fatto clic.

Se volessi ottenere l' id della riga contenente il pulsante Delete cui hai fatto clic, potresti avere qualcosa del genere:

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

Di solito è considerata una buona pratica prefixare le variabili contenenti oggetti jQuery con un $ (simbolo del dollaro) per chiarire quale sia la variabile.

In alternativa alla .closest() è la .parents () Metodo:

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

e c'è anche una funzione .parent () :

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

.parent() sale solo di un livello dell'albero DOM, quindi è abbastanza inflessibile, se si dovesse cambiare il pulsante di cancellazione per essere contenuto all'interno di uno span ad esempio, il selettore jQuery verrà interrotto.

.html ()

È possibile utilizzare questo metodo per sostituire tutto l'HTML all'interno del selettore. Supponendo che tu abbia un elemento html come questo

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

Potresti usare .html() . rimuovere e aggiungere un avviso o un testo informativo per avvisare tutti gli utenti con una sola riga.

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

Elementi di ordinamento

Per ordinare gli elementi in modo efficiente (tutto in una volta e con un'interruzione DOM minima), è necessario:

Trova gli elementi
Ordina in base a una condizione impostata
Inserisci di nuovo nel DOM

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

.children() - .children() o .find()

Questo ci restituirà un oggetto simile ad Array con cui giocare.

var $myColorList = $('#my-color-list');

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

Array.prototype.sort() - Array.prototype.sort()

Questo è attualmente impostato per restituire gli elementi in ordine crescente in base al contenuto HTML (ovvero i loro colori).

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

Inseriscili - .append()
Nota che non abbiamo bisogno di staccare prima gli elementi - append() sposta elementi già esistenti nel DOM, quindi non avremo copie aggiuntive
```
// Put it right back where we got it
$myColorList.append($colors);
```

Rendilo carino

Aggiungi un pulsante di ordinamento

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

Imposta il valore iniziale della direzione di smistamento

var ascending = true;

Cache i nostri elementi DOM e `sortList()` qui per minimizzare la nostra elaborazione DOM

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

`doSort()` tutto in una funzione `doSort()`

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

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

    $myColorList.append($colors);
};

Aggiungi gestore di clic per `$('#btn-sort')`

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

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

Adesso tutti insieme

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

indennità

Ordinamento multilivello (raggruppamento di elementi ordinati)

// ...

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

// ...

Puoi fare un ulteriore passo avanti?

Aggiungi un altro pulsante per attivare l'ordinamento di gruppo disattivato

MDN - Array.prototype.sort ()

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

jQuery
Manipolazione DOM

Ricerca…

Creare elementi DOM

Manipolazione delle classi di elementi

Altri metodi API

.html ()

Elementi di ordinamento

Rendilo carino

Aggiungi un pulsante di ordinamento

Imposta il valore iniziale della direzione di smistamento

Cache i nostri elementi DOM e `sortList()` qui per minimizzare la nostra elaborazione DOM

`doSort()` tutto in una funzione `doSort()`

Aggiungi gestore di clic per `$('#btn-sort')`

Adesso tutti insieme

Ordinamento multilivello (raggruppamento di elementi ordinati)

Aggiungi un altro pulsante per attivare l'ordinamento di gruppo disattivato

Creare elementi DOM

Manipolazione delle classi di elementi

Altri metodi API

.html ()

Elementi di ordinamento

Rendilo carino

Aggiungi un pulsante di ordinamento

Imposta il valore iniziale della direzione di smistamento

Cache i nostri elementi DOM e sortList() qui per minimizzare la nostra elaborazione DOM

doSort() tutto in una funzione doSort()

Aggiungi gestore di clic per $('#btn-sort')

Adesso tutti insieme

Ordinamento multilivello (raggruppamento di elementi ordinati)

Aggiungi un altro pulsante per attivare l'ordinamento di gruppo disattivato

Cache i nostri elementi DOM e `sortList()` qui per minimizzare la nostra elaborazione DOM

`doSort()` tutto in una funzione `doSort()`

Aggiungi gestore di clic per `$('#btn-sort')`