Ancora la factory function $()

Fino ad ora abbiamo usato la funzione factory $() solo per recuperare gli oggetti. Ma si possono anche creare. Il DOM è un albero cui posso toglere ed aggiungere nodi.

e nella mia pagina voglio creare un'ancora che mi riporti all'inizio della pagina posso scrivere:

Javascript code: 

$(document).ready(function() {

  $('<a href="#top">back to top</a>');

  $('<a id="top"></a>');

});

In questo modo, al caricamento della pagina, ho creato due elementi ma non li ho inseriti nell'albero.

Come posso fare? Posso usare i metodi insertBefore() e insertAfter().

Javascript code: 

$(document).ready(function() {

  $('<a href="#top">back to top</a>').insertAfter('div.chapter p:gt(2)');

  $('<a id="top"></a>');

});

Esempio: Inserire link

Ho quindi aggiunto i link. Manca di aggiungere l'ancora. Userò un nuovo metodo prependTo() che serve ad inserire elementi all'interno di altri elementi, al primo posto

Javascript code:

$(document).ready(function() { $('<a href="#top">back to top</a>').insertAfter('div.chapter p'); $('<a id="top"></a>').prependTo('body'); });

Esempio: Inserire link e ancore

Ma i nodi del DOM non solo si possono creare e posizionare, ma si possono anche spostare.

HTML code:

All'interno del mio testo ho delle note:<p>Rarely&mdash;in proportion to the vast numbers of Isosceles births&mdash;is a genuine and certifiable Equal-Sided Triangle produced from Isosceles parents. <span class="footnote">"What need of a certificate?" a Spaceland critic may ask: "Is not the procreation of a Square Son a certificate from Nature herself, proving the Equal-sidedness of the Father?" I reply that no Lady of any position will marry an uncertified Triangle. Square offspring has sometimes resulted from a slightly Irregular Triangle; but in almost every such case the Irregularity of the first generation is visited on the third; which either fails to attain the Pentagonal rank, or relapses to the Triangular.</span> Such a birth requires, as its antecedents, not only a series of carefully arranged intermarriages, but also a long-continued exercise of frugality and self-control on the part of the would-be ancestors of the coming Equilateral, and a patient, systematic, and continuous development of the Isosceles intellect through many generations.</p>

Voglio prendere ciascuno di quegli spam e spostarli in una lista in fondo alla pagina, al loro posto voglio posizionare dei numeri che facciano da link alle ancore relative a ciascuna nota

Javascript code: 

$(document).ready(function() {

  $('<ol id="notes"></ol>').insertAfter('div.chapter');

  $('span.footnote').each(function(index) {

    $(this).before(
<a href="#foot-note-' + (index+1) + '" id="context-' + (index+1) + '" class="context"><sup>' +  (index+1) + '</sup></a>')

      .appendTo('#notes')

      .append('&nbsp;(<a href="#context-' + (index+1) + '">context </a>)' )

  });

});

Analizziamo il codice:

Esempio: Creiamo delle note a pie' di pagina

A questo punto non resta che numerare le note. Per questo useremo una nuova funzione di JQuery .wrap() che permette di includere qualsiasi elemento all'interno di un altro. Nel nostro caso:

Risultato: Creiamo delle note a pie' di pagina numerate


Clonare gli elementi della pagina

Oltre ad aggiungere elementi e spostarli li posso anche clonare. Per questo posso usare il metodo .clone()

Bisogna tenere presente che quando si clona un elemento, lo si crea ma ancora non lo si è aggiunto alla pagina

Il metodo .clone() può accettare un parametro in ingresso: clone(fasle) permette di copiare solo l'elemento senza i discendenti

Adesso sulla nostra pagina copieremo delle citazioni che stanno all'interno dei paragrafi e creeremo alla destra di ogni paragrafo un box con la citazione stessa, con background e dropshadow

JAVASCRIPT CODE:

$(document).ready(function() {

  $('span.pull-quote').each(function(index) {

    var $parentParagraph = $(this).parent('p');

    $parentParagraph.css('position', 'relative');

    var $clonedCopy = $(this).clone();

    $clonedCopy

      .addClass('pulled')

      .find('span.drop')

      .html('…')

      .end()

      .prependTo($parentParagraph)

      .wrap('
');

    var clonedText = $clonedCopy.text();

    $clonedCopy.html(clonedText);

  });

});

Analizziamolo:

Risultato: Copiare le citazioni