Appunti JQuery

var img = $("<img/>", {
  src: url,
  alt: desc
});

jQuery(function() {
  // Codice da eseguire quando il DOM è pronto
});

elements#surname // the element with id="surname".warning // all elements with class="warning"- Il valore restituito da $() è un oggetto jQuery. Glihanno una proprietà length eoggetti jQuery sono simili a array:proprietà numeriche da 0 a length-1. Ciòsignifica che è possibile accedere al contenuto dell'oggetto jQuery utilizzando la notazione standard dell'array tra parentesi quadre:

$("body").length // => 1: i documenti hanno un solo corpo
$("body")[0] // È uguale a document.body

Se preferisci non usare la notazione array con gli oggetti jQuery, puoi usare il metodo `eq()` invece della parentesi quadre e il metodo `size()` o la proprietà `length` invece dell'indicizzazione con il metodo `get()` con parentesi:

$("body").eq(0) // È uguale a document.body
$("body").size() // => 1: i documenti hanno un solo corpo

Se hai bisogno di convertire un oggetto jQuery in un vero array, chiama il metodo `toArray()`:

var array = $("body").toArray();

Se vuoi eseguire il ciclo su tutti gli elementi in un oggetto jQuery, chiama il metodo `each()` invece di scrivere un ciclo for. Si aspetta una funzione di callback come unico argomento e invoca quella funzione di callback una volta per ogni elemento nell'oggetto jQuery (nell'ordine del documento). Il callback viene invocato come metodo dell'elemento corrispondente, quindi all'interno del callback la parola chiave `this` fa riferimento all'elemento corrente:

$("body").each(function() {
  // codice da eseguire per ogni elemento
  // this fa riferimento all'elemento corrente
});

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $("div").each(function(index, element) {
      var $element = $(element);
      $element.prepend(index + 1 + ". ");
    });
  });
</script>

of it.$(this).prepend(idx + ": ");// Stop iterating when we reach #lastif (this.id === "last")return false;});

- method map( )…

- method index( )…

- method is( )…

Metodi

- Il metodo attr( ) è il getter/setter jQuery per gli attributi HTML.removeAttr() è una funzione correlata che rimuove completamente unattributo da tutti gli elementi selezionati.Ecco alcuni esempi:

// Query the action attr of 1st form$("form").attr("action");

// Set the src attribute of element with id icon $("#icon").attr("src", "icon.gif");

// Set 4 attributes at once$("#banner").attr({src:"banner.gif",alt:"Advertisement",width:720, height:64});

- Il metodo css( ) restituisce il valore degli attributi css e permette disettarne i valori.$("h1").css("font-weight"); // Get font weight of 1st <h1>$("h1").css("fontWeight"); // Camel case works,

<script>
  $(document).ready(function() {
    $("h1").css("font");
    $("h1").css("font-variant", "smallcaps");
    $("div.note").css("border", "solid black 2px");
    $("h1").css({
      backgroundColor: "black",
      textColor: "white",
      fontVariant: "small-caps",
      padding: "10px 2px 4px 20px",
      border: "dotted black 4px"
    });
    $("h1").css("font-size", function(i, curval) {
      return Math.round(1.25 * parseInt(curval));
    });
    $("h1").addClass("classname");
    $("h1").removeClass("classname");
    $("h1").toggleClass("classname");
    $("h1").hasClass("classname");
  });
</script>

<script> $(document).ready(function() { // Add 2 classes to <p> tags after <h1> $("h1 + p").addClass("hilite firstpara"); // Remove a class from all <p> tags $("p").removeClass("hilite"); // Multiple classes are allowed $("p").removeClass("hilite firstpara"); // Remove all classes from all <div>s $("div").removeClass(); // Toggle a CSS class: add the class if it is not there or remove it if it is. $("tr:odd").toggleClass("oddrow"); // Toggle two classes at once $("h1").toggleClass("big bold"); // Testing for CSS classes: does any <p> have this class? $("p").hasClass("firstpara"); // This does the same thing. $("#lead").is(".firstpara"); // is() is more flexible than hasClass() $("#lead").is(".firstpara.hilite"); }); </script>

deglival()elementi del modulo HTML, e anche per interrogare e impostare lo statodi selezione di caselle di controllo, pulsanti di opzione ed elementi<select>:

// Get value from the surname text field

<input type="text" id="surname">

$("#surname").val()

// Get single value from <select>

<select id="usstate">

<option value="1">Option 1</option>

<option value="2">Option 2</option>

</select>

$("#usstate").val()

// Get array of values from <select multiple>

<select id="extras" multiple>

<option value="1">Option 1</option>

<option value="2">Option 2</option>

</select>

$("select#extras").val()

// Get val of checked radio button

<input type="radio" name="ship" value="1"> Option 1

<input type="radio" name="ship" value="2"> Option 2

$("input:radio[name=ship]:checked").val()

// Set value of a text field

<input type="text" id="email">

$("#email").val("Invalid email address")

// Check any checkboxes with these names or values

<input type="checkbox" name="opt1" value="1"> Option 1

<input type="checkbox" name="opt2" value="2"> Option 2

$("input:checkbox").val(["opt1", "opt2"])

- I metodi e interrogano e impostano il testo normale o iltext() html()contenuto HTML di un elemento. Quando viene invocato senzaargomenti, text() restituisce il contenuto di testo normale di tutti i nodi ditesto discendenti di tutti gli elementi corrispondenti. Funziona anche neibrowser che non supportano le

che restituisce le coordinate relative all'elemento padre invece che al documento.

Che è solo un position() getter e restituisce le posizioni degli elementi relative al loro genitore, piuttosto che al documento nel suo insieme. Nel DOM, ogni elemento ha una proprietà offsetParent alla quale la sua posizione è relativa. Gli elementi posizionati fungono sempre da genitori di offset per i loro discendenti, ma alcuni browser trasformano anche altri elementi, come le celle di tabella, in genitori di offset. jQuery considera solo gli elementi posizionati come genitori offset e il metodo offsetParent() di un oggetto jQuery mappa ogni elemento all'elemento antenato posizionato più vicino o all'elemento <body>. Notare la sfortunata mancata corrispondenza dei nomi per questi metodi: offset() restituisce la posizione assoluta di un elemento, nelle coordinate del documento; position() restituisce l'offset di un elemento relativo al suo offsetParent().

Ci sono tre getter per interrogare la larghezza di un elemento e tre per interrogare l'altezza.

I metodi `width()` e `height()` restituiscono la larghezza e l'altezza di base di un elemento, senza includere padding, bordi o margini. I metodi `innerWidth()` e `innerHeight()` restituiscono la larghezza e l'altezza di un elemento, inclusi il suo padding. La parola "inner" si riferisce al fatto che questi metodi restituiscono le dimensioni misurate all'interno del bordo. I metodi `externalWidth()` e `outerHeight()` restituiscono di solito le dimensioni dell'elemento, inclusi il suo padding e il bordo. Se passi il valore `true` a uno di questi metodi, aggiungeranno anche la dimensione del margine.