January 20
Esempi di base dell'applicazione jQuery includono quelli per nascondere e animare gli elementi della pagina Web, e anche cambiando il contenuto e l'aspetto di un elemento. Prima di lavorare attraverso questi esempi, imparare a selezionare gli elementi con jQuery. In questo modo assicura i metodi jQuery si esegue lavorerà sugli elementi previsti.
È possibile nascondere gli elementi della pagina Web, come i paragrafi e intestazioni utilizzando Nascondi il metodo di CSS. Ripristinare la visibilità del elemento con il metodo Show. Ad esempio, l'istruzione "(" #someelement "). Nascondere ()" si nasconde l'elemento HTML con il tag "#someelement." Il programma di esempio che segue crea una pagina Web con un pulsante per mostrare come nascondere dinamicamente un paragrafo.
<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function () {
$("#someelement").hide();
});
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Si prega di cliccare qui. </ Button>
<P id = "someelement"> Guarda questo scomparire. </ P>
</ Body>
</ Html>
Con il metodo Animate di jQuery si può fare un punto o un altro elemento HTML cambiano dinamicamente la posizione e le dimensioni, che consente di eseguire semplici animazioni. Specificare l'attributo da animare, insieme al valore con cui si desidera che l'attributo di cambiare, come primo argomento da animare. Circondati questo argomento con bretelle. Specificare la velocità con cui si desidera l'animazione a verificarsi in secondo argomento di Anima. Utilizzare il programma di esempio che segue per imparare a fare una mossa punto sullo schermo.
<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function () {
$("#someelement").animate( {marginLeft:"500px"}, "slow");
});
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Si prega di cliccare qui. </ Button>
<P id = "someelement"> Guardate questa mossa. </ P>
</ Body>
</ Html>
Utilizzare jQuery per modificare il contenuto HTML utilizzando un metodo come HTML, aggiungere, o prima. Ad esempio, se si desidera aggiungere del testo esistente a un particolare punto il cui ID è "myparagraph", scrivere la seguente dichiarazione.
$ ( "# Myparagraph") aggiungere ( "Nuovo testo.");
Ecco un programma di esempio che illustra il metodo Append.
<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function ()
{
$("#myparagraph").append("Hello world");
}
);
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Clicca qui </ button>
<P id = "myparagraph"> Paragrafo 1 </ p>
</ Body>
</ Html>
Utilizzare il metodo CSS di jQuery per cambiare lo stile dei paragrafi, pulsanti, intestazioni e altri elementi HTML. Ad esempio, "CSS (" font-weight "," bold ")" farà il testo di un elemento HTML in grassetto. Identificare l'attributo CSS che si desidera modificare nel primo argomento del metodo CSS. Selezionare il valore per tale attributo con il secondo argomento del metodo di CSS. Ecco un esempio di programma che mette il metodo CSS nel contesto.
<Html>
<Head>
<Script type = "text / javascript" src = "jquery.js"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# MyButton"). Clic (function () {
$("#someelement").css("font-weight","bold");
});
});
</ Script>
</ Head>
<Body>
<Button id = "myButton"> Clicca qui </ button>
<P id = "someelement"> Guarda questo turno grassetto. </ P>
</ Body>
</ Html>