Hvordan erstatte HTML i Div Bruke jQuery

En gratis open-source Javascript-bibliotek, er jQuery brukes av et stort antall nettsteder å legge bruker interaktivitet og forbedre den besøkendes opplevelse. jQuery gjør det enkelt å script komplekse AJAX interaksjoner, animasjoner og komponenter med en minimal mengde med kode. Du kan referere til elementer på siden ved hjelp av HTML-id, slik at du kan referere til element og endre kilden HTML eller egenskaper. Bruk hendelser for å svare på brukerens handlinger, for eksempel en knapp klikk, og kjøre forhåndsdefinert kode for å gi et svar på det, for eksempel erstatte HTML i en div.

Bruksanvisning

1 Åpne en web-utvikling applikasjon eller et tekstredigeringsprogram, og opprette en ny HTML-side.

2 Tilsett jQuery biblioteket til side ved å legge den aktuelle koden mellom HTML "<head>" "</ head>" koder. For eksempel:

<Script type = "text / javascript" attributt for å matche plasseringen og versjonen av jQuery biblioteket ned fra jQuery nettstedet.

3 Skriv inn koden under for å legge til en HTML div til siden med noen eksempel tekst. Dette bør legges mellom HTML "<body>" "</ body>" tags.

<Div id = "test">

&lt;p>This is an example&lt;/p>

</ Div>

4 Legg en HTML-knappen til siden ved hjelp koden nedenfor, som bør legges under eksempel div. Knappen har ingen handling definert i dag, så vil du legge til et klikk behandleren gjennom jQuery.

<Input type = "button" name = "MyButton" id = "MyButton" value = "Click Me" />

5 Legg til følgende kode mellom HTML "<head>" "</ head>" koder under den "<script>" tag brukes til å inkludere jQuery biblioteket.

<Script type = "text / javascript">

$ (Document) .ready (function () {

$("#myButton").click(function() {

$ ( '# Test') html ( "& lt; p> Dette er nytt innhold fra JQuery & lt; / p>.");

});

});

</ Script>

Denne koden oppretter en funksjon som vil kjøre automatisk når siden er lastet. Deretter definerer et klikk behandleren for knapp med HTML-id "MyButton", som kjører en funksjon når den blir klikket. Funksjonen erstatter HTML finnes i div med id "test".

6 Last siden til din server, og deretter åpne siden i en nettleser. Klikk på knappen og du vil se innholdet i div endringen umiddelbart som et klikk behandleren går.