jQuery esittely

jQuery-kirjasto voidaan lisätä verkkosivulle yhdellä yksinkertaisella merkinnällä.

jQuery-kirjasto - ominaisuudet

jQuery on JavaScript-funktiokirjasto.

jQuery-kirjasto sisältää seuraavat ominaisuudet:

  • HTML-elementtien valinta
  • HTML-elementtien käsittely
  • CSS-käsitteleminen
  • HTML-tapahtumafunktiot
  • JavaScript-tehosteet ja animaatiot
  • HTML DOM:n selaaminen ja muokkaaminen
  • AJAX
  • Työkalut

Lisää jQuery-kirjasto sivullesi

jQuery-kirjasto sijaitsee yhdessä JavaScript-tiedostossa, jossa on kaikki jQuery-funktiot.

Voit lisätä jQuery:n sivustollesi seuraavilla merkeillä:

<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Huomaa, että <script>-tagi tulisi olla sivun <head>-osassa.

Perus jQuery-esimerkki

Seuraava esimerkki näyttää, kuinka jQuery:n hide()-funktio piilottaa kaikki HTML-dokumentin <p>-elementit.

Esimerkki

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>Tämä on otsikko</h2>
<p>Tämä on kappale.</p>
<p>Tämä on toinen kappale.</p>
<button type="button">Klikkaa minua</button>
</body>
</html>

Kokeile itse

Lataa jQuery

On olemassa kaksi jQuery-versiota, jotka ovat saatavilla ladattavaksi: yksi on tiivistetty, ja toinen ei ole puristettu (tarkoitettu virheenkorjaukseen tai lukemiseen).

Molemmat versiot ovat saatavilla jQuery.com Lataa

Kirjaston korvaaminen

Google ja Microsoft tukevat hyvin jQuery:ää.

Jos et halua tallentaa jQuery-kirjastoa tietokoneellesi, voit ladata CDN-jquery-keskeiset tiedostot Googlesta tai Microsoftista.

Käytä Google CDN:ää

<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs
/jquery/1.4.0/jquery.min.js"></script>
</head>

Käytä Microsoftin CDN:ää

<head>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery
/jquery-1.4.min.js"></script>
</head>