jQuery core - metodo jQuery()
Esempio
Trova tutti gli elementi p che sono figli degli elementi div e impostare le proprietà del bordo:
$("div > p").css("border", "1px solid gray");
Definizione e uso
La funzione jQuery() accetta una stringa che contiene un selettore CSS per abbinare un insieme di elementi.
La funzione jQuery() ha tre sintassi:
Sintassi 1
Accetta una stringa che contiene un selettore CSS per abbinare un insieme di elementi:
jQuery(selector, [context]
Sintassi 2
Creare elementi DOM utilizzando una stringa di HTML originale:
jQuery(html,ownerDocument]
Sintassi 3
Legare una funzione che viene eseguita una volta completato il caricamento del documento DOM:
jQuery( callback )
jQuery( selector, [ context ] )
Questa sintassi ha diversi modi di utilizzo:
Uso 1: Impostare l'ambiente del selettore
Sintassi
jQuery(selector, [context]
Per impostazione predefinita, il selettore cerca nel DOM dalla radice del documento. Tuttavia, possiamo impostare un parametro opzionale di contesto per $().
Ad esempio, se desideriamo cercare un elemento in un callback, possiamo limitare la ricerca come segue:
Esempio
$("div.foo").click(function() {
$("span", this).addClass("bar");
);
Poiché abbiamo limitato il selettore span a questo contesto, solo lo span nell'elemento cliccato riceve l'aggiunta di class.
Internalmente, l'ambiente selettore è implementato tramite il metodo .find(), quindi $("span", this) è equivalente a $(this).find("span").
Tutte le funzionalità di base di jQuery sono implementate attraverso questa funzione. Tutto in jQuery si basa su questa funzione, o si utilizza in qualche modo questa funzione. L'uso più elementare di questa funzione è passare un'espressione a essa (solitamente composta da selettori CSS), quindi trovare tutti gli elementi che corrispondono a questa espressione.
Per impostazione predefinita, se non viene specificato il parametro context, $() cerca gli elementi DOM nel documento HTML corrente; se viene specificato il parametro context, come un insieme di elementi DOM o un oggetto jQuery, allora vengono cercati in questo contesto. A partire da jQuery 1.3.2, l'ordine degli elementi restituiti è equivalente all'ordine di apparizione nel contesto.
Utilizzo 2: Utilizzare elemento DOM
Sintassi
jQuery(elemento)
Questa funzione ci permette di creare un oggetto jQuery utilizzando elementi DOM trovati in altri modi. L'uso comune di questa funzione è chiamare metodi jQuery su elementi che sono stati passati al callback funzione tramite il termine this:
Esempio
$("div.foo".click(function() {
$(this).slideUp();
);
Questo esempio nasconde l'elemento con un'animazione di scorrimento quando l'elemento viene cliccato. Poiché il gestore di eventi accetta l'elemento cliccato nel termine this come elemento DOM puro, è necessario avvolgere l'elemento con un oggetto jQuery prima di chiamare i metodi jQuery su di esso.
Questa funzione può anche accettare documenti XML e oggetti Window (nonostante non siano elementi DOM) come parametri validi.
Quando i dati XML vengono restituiti da una chiamata Ajax, possiamo utilizzare la funzione $() per avvolgere i dati con l'oggetto jQuery. Una volta completato, possiamo utilizzare .find() e altri metodi di esplorazione DOM per recuperare singoli elementi dalla struttura XML.
Utilizzo 3: Clonare l'oggetto jQuery
Sintassi
jQuery(oggetto jQuery)
Quando si passa un oggetto jQuery come parametro alla funzione $(), viene creata una copia dell'oggetto. Come l'oggetto iniziale, il nuovo oggetto jQuery punta allo stesso elemento DOM.
Utilizzo 4: Restituire un insieme vuoto
Sintassi
jQuery()
Per jQuery 1.4, la chiamata al metodo jQuery() senza parametri restituisce un insieme jQuery vuoto. Nei precedenti versioni di jQuery, questo restituisce un insieme che contiene il nodo document.
jQuery( html, [ ownerDocument ] )
Questa sintassi ha diversi modi di utilizzo:
Utilizzo 1: Creare nuovi elementi
Sintassi
jQuery(html,ownerDocument]
Puoi passare una stringa HTML scritta a mano, una stringa creata da un qualche motore di template o plugin, o una stringa caricata tramite AJAX. Ma ci sono limitazioni quando si crea un elemento input, come nell'esempio numero due.
Certo, questa stringa può contenere slash (ad esempio, un indirizzo di immagine) e backslash. Quando si crea un singolo elemento, utilizzare etichette chiuse o formato XHTML. Ad esempio, per creare un span, si può usare $("<span/>") o $("<span></span>"), ma non si raccomanda di usare $("<span>")). Nel jQuery, questa sintassi è equivalente a $(document.createElement("span"))).
Se si passa una stringa come parametro a $(), jQuery verifica se la stringa è HTML (ad esempio, se la stringa contiene etichette in alcune posizioni). Se non lo è, la stringa viene interpretata come espressione di selettore, come spiegato sopra. Tuttavia, se la stringa è un segmento HTML, jQuery tenta di creare l'elemento DOM descritto da quel segmento HTML. Poi crea e restituisce un oggetto jQuery che fa riferimento a questi elementi DOM:
Esempio
$("<p id="test">My <em>new</em> text</p>").appendTo("body");
Se il segmento HTML è più complesso rispetto a un etichetta semplice senza attributi, come nell'esempio sopra, il processo effettivo di creazione dell'elemento è completato dal meccanismo innerHTML del browser. In particolare, jQuery crea un nuovo elemento <div> e poi imposta l'attributo innerHTML dell'elemento per il segmento HTML fornito. Quando il parametro è un'etichetta semplice, come $("<img />") o $("<a></a>"), jQuery crea l'elemento utilizzando la funzione JavaScript createElement() nativa.
Per garantire la compatibilità piattaforma, la struttura del frammento deve essere ben formattata. I tag che possono contenere altri elementi devono apparire in coppia (con tag di chiusura):
$("<a href="http://jquery.com"></a>");
Tuttavia, jQuery permette anche una sintassi simile a XML per i tag:
$("<a/>");
I tag che non contengono altri elementi possono essere chiusi o non chiusi:
$("<img />");
$("<input>");
Uso 2: Impostazione degli attributi e degli eventi
Sintassi
jQuery(html,props)
Per jQuery 1.4, possiamo passare un mappatura degli attributi come secondo parametro. Questo parametro accetta un insieme di attributi che possono essere passati al metodo .attr(). Inoltre, è possibile passare qualsiasi tipo di evento e chiamare i seguenti metodi jQuery: val, css, html, text, data, width, height, or offset.
Attenzione, Internet Explorer non ti permette di creare un elemento input e cambiarne il tipo; devi utilizzare ad esempio "<input type="checkbox" />" per specificare il tipo.
Esempio
Crea un elemento <input>, impostando contemporaneamente l'attributo type, il valore dell'attributo e alcuni eventi.
$("<input>", {
type: "text",
val: "Test",
focusin: function() {
$(this).addClass("active");
},
focusout: function() {
$(this).removeClass("active");
}
}).appendTo("form");
jQuery( callback )
Permette di associare una funzione da eseguire una volta che il documento DOM è stato caricato.
La funzione ha lo stesso effetto di $(document).ready(), ma quando si utilizza questa funzione, è necessario avvolgere tutte le altre operazioni $() che devono essere eseguite quando il DOM è stato caricato nel suo interno. Nonostante tecnicamente sia collegabile, non ci sono molte situazioni in cui viene collegato in questo modo.
Esempio
Esegui le funzioni all'interno quando il DOM è stato caricato:
$(function(){
// Documento pronto
);
