jQuery -Esittely ja valitsimet

jQuery esittely

jQuery on JavaSript-kirjasto joka luo "helpon" tavan JavaScript-ohjelmien tekemiseen. Ennen jQuery:n käyttämistä olisi hyvä osata seuraavista perusasiat:

Tutustu linkin sisältöön.

Pysy ajan tasalla seuraamalla JQuery-organisaation sivustoa


jQuery-kirjasto liitetään www-sivun koodaukseen head-elementissä script-elementin sisällä kerrotulla tiedosto-polulla.
Esimerkiksi Googlen palvelusta:

 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  ..
  ..
 </head>

Tai kirjasto voidaan liittää JQuery.com yhteisöstä omalle tietokoneelle/www.palvelimelle ladatulla tiedostolla. Sivustolla on ladattavissa (kopioitavissa) kaksi erilaista versiota compressed - pakattu tai uncompessed pakkaamaton. Pakkaamattomasta voi tutkia scriptien toimintaa. Alla esimerkiksi linkitetään script-kirjasto koodaukseen samasta kansiosta jossa www-sivun koodaus sijaitsee:

 <head>
  <script src="jquery-3.5.1.min.js"></script>
  ..
  ..
 </head>

Testi-esimerkki, kaikki p-elementit on poistettavissa näkyvistä klikkaamalla:


 <!DOCTYPE html>
 <html>
  <head>
   <meta charset="UTF-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
   </script>
   <script>
   $(document).ready(function(){
    $("p").click(function(){
     $(this).hide();
    });
   });
   </script> 
  </head>
  <body>

   <p> Nämä tekstit on klikkailtavissa pois. Klikkaa tätä ! </p>
   <p> Klikkaa pois </p>
   <p> Klikkaa tämkin pois </p>

  </body>
 </html>

Tulos www-sivulla:


Esimerkissä. Ohjataan jQuery:n JavaScript-funktioita omalla script-osalla: 

 <script>
   $(document).ready(function(){
    $("p").click(function(){
     $(this).hide();
    });
   });
 </script>
 
 Selitykset:
 
 $("p").click(function()
  - klikattaessa p-elementtejä voidaan kaikki p-elementit poistaa näkyvistä 
    (lainnausmerkkien välissä on html-elementin valitsin eli selector)
  $(this).hide();
   - sulkee eli "piilottaa" hide() funktiolla klikatun p-elementin

Selectorit eli valitsimet

Valitsin tarkoittaa yleisesti HTML-elementtiä johon script-toiminto kohdistetaan

Esimerkkejä valitsimista, valitsin on sinisellä alkuosassa:

$(this).hide() - piilottaa nykyisen elementin
$("p").hide() - piilottaa p -elementin
$(".teksti").hide() - piilottaa class="teksti" tunnisteisen elementin
$("#otsikko").hide() - piilottaa id="otsikko" tunnisteisen elementin


Valitsimena voi toimia HTML-elementti tai elementti jolla on class- tai id-tunniste.
Huomaa!
JQuery:ä käyttäessä HTML-elementillä ei voi olla kahta tai useampaa ID-valitsinta. CSS-ohjeen ja JQuery:n voi liittää samalla id- tai class-tunnisteella HTML-elementiin.

Jos samalla www-sivulla on useita jQuery:llä toteutettuja toimintoja, muista nimetä ID-tunnisteet eri nimisiksi sekä jokaisen toiminto saattaa tarvita oman jQuery-koodauksensa

Taulukkoon on koottu muutamia. Klikkaamalla vasemman sarakkeen valitsinta sivulla siirrytään esimerkin kohdalle.

HUOM !
Kaikissa taulukon esimerkeissä on lisättävä head-elementtiin jQuery- linkki: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>

Valitsin Merkitys www-sivulla
$("*") Valitsee kaikki elementit
$(this) Valitsee nykyisen HTML-elementin
$("p.teksti") Valitsee p-elementin jonka tunniste on class="teksti", yleensä CSS-muotoiltu
$("p:first") Valitsee ensimmäisen p-elementin
$("ul li:first") Valitsee ensimmäisen listan eli ul-elementin ja tämän listan ensimmäisen alkion eli li-elementin
$("ul li:first-child") Valitsee www-sivun kaikista listoista (ul) ensimmäisen li-elementin
$("[href]") Valitsee kaikki elementit joissa on href-määrite ("linkki jonnekin")
$("a[target='_blank']") Valitsee kaikki linkki-elementit joissa avausmäärite selaimeen ON target='_blank'
$("a[target!='_blank']") Valitsee kaikki linkki-elementit joiden avausmäärite EI OLE target='_blank'
$(":button") Valitsee kaikki button-määritteiset painikkeet
$("tr:even") Valitsee taulukosta ensimmäisestä rivistä aloittaen joka toisen (even) rivin (tr)
$("tr:odd") Valitsee taulukosta toisesta rivistä aloittaen joka toisen (even) rivin (tr)

Kaikki valitsin, *

Painikkeen klikkaus poistaa kaikki HTML-elementit. Esimerkissä HTML-elementeihin on liitetty CSS-ohjeet.

Esimerkki koodauksessa ei ole Button-elementtillä CSS-ohjetta (painikkeen tekstiväri). 

<!DOCTYPE html>
<html>
 <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("*").hide();
    });
   });
  </script>
 </head>
 <body>

 <h2>Kaikki www-sivun elementit</h2>

 <p>Tässä on p-elementillä tekstiä.</p>
 <p>Klikkaapa tuota painiketta nyt.</p>

 <button> Klikkaa mua </button>

 </body>
</html>

Nykyinen HTML-elementti valitsin, this

Painikkeen klikkaus poistaa painikkeen eli buttom-elementin.

Esimerkissä piilotetaan painike. Painikkeen tekstillä on class-tunnisteella asetettu CSS-ohje.

  head-elementtiin:
  
  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $(this).hide();
    });
   });
  </script>
  <style>
   .vari1{color: red;}
  </style>

 
 Nämä body-elementtiin:
 
 <h3> Painike piiloon </h3>

 <p> Painikkeeseen liitetään this-asetuksella piilotus.</p>

 <button class="vari1"> Piilota painike </button>

class valitsin, .tunniste

Painikkeen klikkaus poistaa p-elementit joiden tunniste on class="teksti".

Esimerkin koodauksessa "teksti"-tunniste on h3 ja ensimmäillä p elementillä. 

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("p.teksti").hide();
    });
   });
  </script>
  <style>
    .teksti{color: slateblue;}
  </style>
  
 body-elementtiin:
 
 <h3 class="teksti">Otsikko ei ole p-elementti</h3>

 <p class="teksti">Teksti piiloon, koska on p-elementissä.</p>
 <p>Tämä jää näkyviin, koska ei ole teksti-tunnistetta.</p>

 <button> Poista teksti </button>

Ensimmäinen valitsin, first

Esimerkissä painikkeen klikkaus poistaa sivulta ensimmäisen p-elementin. Poistettava elementti voi olla joku muu HTML-elementti tai esimerkiksi joku div-elementti tai class- tai id-tunnisteella ilmoitettu elementti.

Esimerkissä painikkeella poistetaan koodauksessa ensimmäisenä oleva p-elementti. 

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("p.first").hide();
    });
   });
  </script>
  <style>
    .teksti{color: red;}
  </style>
  
 body-elementtiin:
 
 <h3> Poistaa p-elementin </h3>

 <p class="teksti"> 1. teksti-elementti. </p>
 <p> 2. teksti-elementti.</p>

 <button> Poista 1. teksti </button>

Ensimmäinen listalta valitsin, li:first

Klikkaa alhaalla näkyvää Poista appelsiini-tekstiä.

Esimerkin koodauksessa h3-elementin klikkaaminen poistaa listan ensimmäisen tekstin. Huomaa, aina ei tarvitse käyttää painiketta vaan toiminta voidaan toteuttaa muillakin HTML-elementeillä, id- tai class-tunnisteella nimetyllä elementillä. 

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("h3").click(function(){
     $("ul li:first").hide();
    });
   });
  </script>
  <style>
    .teksti{color: red;}
  </style>
  
 body-elementtiin:
 
 <p> Hedelmät: </p>
 <ul>
  <li class="teksti"> Appelsiini </li>
  <li> Mandariini </li>
  <li> Omena </li>
 </ul>

 <h3 class="teksti"> Poista appelsiini </h3>

Kaikkien listojen ensimmäinen, li:first-child

Klikkaa painikkeella kaikki listoilta ensimmäiset pois.

Esimerkin koodauksessa poistetaan painikkeella molemmista listoista ensimmäinen li-elementti näkyvistä www-sivulla. 

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("button").click(function(){
        $("ul li:first-child").hide();
    });
   });
  </script>
  <style>
    .teksti{color: red;}
  </style>
  
 body-elementtiin:
 
 <p> Hedelmät: </p>
 <ul>
  <li class="teksti"> Appelsiini </li>
  <li> Mandariini </li>
 </ul>
 <p> Marjat: </p>
 <ul>
  <li class="teksti"> Mansikka </li>
  <li> Mustikka </li>
 </ul>
 <button class="teksti">  Poista ensimmäiset  </button>

Kaikki valitut elementit, [href]

Hakasulkeissa kerrotaan minkälaiset elementit on valittu scriptin kohteeksi

Klikkaa Piilota linkit -tekstistä kaikki linkit pois.

Esimerkin koodauksessa h4-elementillä toteututtu Piilota linkit teksti toimii klikkauksen kohteena ja piilottaa näkyvistä kaikki href-elementin www-sivulta. 

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("h4").click(function(){
     $("[href]").hide();
    });
   });
  </script>
  <style> .teksti{color: slateblue;} </style>
  
 body-elementtiin:
 
 <h4> Piilotetaan linkkejä </h4>

 <p>Alla muutama linkki.</p>
 <p><a href="https://soundcloud.com/"> Soundcloud </a></p>
 <p><a href="https://www.internet-radio.com/"> Web radiot </a></p>

 <h4 class="teksti"> Piilota linkit </h4>

HTML-elementin valinta jolla on asetuksena, a[target='_blank']

Hakasulkeissa kerrotaan scriptin kohde HTML-elementti sekä asetus.

Klikkaa Piilota linkit -tekstistä, linkki jolla on asetus katoaa.

Esimerkin koodauksessa painikkeella piilotetaan linkki eli a-elementti jossa on target="_blank" asetus.

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("a[target='_blank']").hide();
    });
   });
  </script>
  <style> .teksti{color: slateblue;} </style>
  
 body-elementtiin:
 
 <h4> Asetuksen perusteella piilottaminen </h4>

 <p> Linkki piiloon jos linkissä on asetus target_blank. </p>
 <p><a href="https://soundcloud.com/" target="_blank"> Soundcloud </a></p>
 <p><a href="https://www.internet-radio.com/">  Web radiot  </a></p>

 <button class="teksti"> Piilota </button>

HTML-elementin valinta jolla ei ole asetuksena, a[target!='_blank']

Hakasulkeissa kerrotaan scriptin kohde HTML-elementti sekä asetus jota ei ole.
HUOMAA! Edellisessä esimerkissä käytettiin = merkkiä ("yhtä kuin") ja tässä != merkkejä ("eri kuin").

Klikkaa Piilota linkit -tekstistä , linkki jolla ei ole asetusta katoaa.

Esimerkin koodauksessa painikkeella piilotetaan linkki eli a-elementti jossa ei ole target="_blank" asetusta.

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("a[target!='_blank']").hide();
    });
   });
  </script>
  <style> .teksti{color: slateblue;} </style>
  
 body-elementtiin:
 
 <h4> Asetuksen perusteella piilottaminen </h4>

 <p> Linkki piilon jos target asetus EI OLE _blank. </p>
 <p><a href="https://soundcloud.com/" target="_blank"> Soundcloud </a></p>
 <p><a href="https://www.internet-radio.com/">  Web radiot  </a></p>

 <button class="teksti"> Piilota </button>

Piilota painike painikkeella, :button

HTML-elementti, id- tai class-tunnisteinen elementti voidaan piilottaa sitä klikatessa.

Klikkaa Lähetä -painiketta, jollon painike katoaa. Esimerkkiä voidaan soveltaa esimerkiksi lomake-tietojen lähettämisessä.

Esimerkin koodauksessa painikkeen klikkaus piilottaa painikkeen jota klikattiin.

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("button").click(function(){
      $(":button").hide();
    });
   });
  </script>
  <style> .teksti{color: slateblue;} </style>
  
 body-elementtiin:
 
 <h4> Painikkeen piilottaminen </h4>

 <p> Painike voidaan piilottaa sitä painettaessa. </p>

 <button class="teksti"> Lähetä </button>

CSS-asetus taulukon 1. rivistä alkaen, tr:even

Sriptillä voidaa toteuttaa CSS-ohje tai sovelmalla vaihtaa CSS-ohje.

Esimerkissä liitetään yksinkertaiseen taulukkoon CSS-ohje joka toiselle riville aloittaen ensimmäisestä rivistä.

Esimerkin koodauksessa aloitetaan CSS-ohjeen liittäminen ensimmäisestä tr-elementistä.

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("tr:even").css("background-color", "yellow");
   });
  </script>
  
 body-elementtiin:
 
 <h4>CSS-asetuksen kohdistaminen</h4>

 <table border="1">
  <tr><th>Merkki</th> <th>Malli</th> </tr>
  <tr><td> Audi  </td> <td> S8    </td></tr>
  <tr><td> MB    </td> <td> S63   </td></tr>
  <tr><td> Opel  </td> <td> Meriva</td></tr>
  <tr><td> Honda </td> <td> Civic </td></tr>
 </table>

CSS-asetus taulukon 2. rivistä alkaen, tr:odd

Sriptillä voidaa toteuttaa CSS-ohje tai sovelmalla vaihtaa CSS-ohje.

Esimerkissä liitetään yksinkertaiseen taulukkoon CSS-ohje joka toiselle riville aloittaen toisesta rivistä.

Esimerkissä aloitetaan CSS-ohjeen liittäminen ensimmäisestä tr-elementistä.

  head-elementtiin:

  <script>
   $(document).ready(function(){
    $("tr:odd").css("background-color", "Turquoise");
   });
  </script>
  
 body-elementtiin:
 
 <h4>CSS-asetuksen kohdistaminen</h4>

 <table border="1">
  <tr><th>Merkki</th> <th>Malli</th> </tr>
  <tr><td> Audi  </td> <td> S8    </td></tr>
  <tr><td> MB    </td> <td> S63   </td></tr>
  <tr><td> Opel  </td> <td> Meriva</td></tr>
  <tr><td> Honda </td> <td> Civic </td></tr>
 </table>

Tapahtuma eli event

Tapahtuma eli event aiheuttaa jonkin muutoksen www-sivulla, esimerkissä tapahtuma sinisellä:

$("p").click();

Esimerkissä, p-elementin klikkaaminen, jossa click-on tapahtuma.

Tapahtumia voidaan tuottaa seuraavilla:

Hiiri Näppäimistö Lomake Dokumentti / ikkuna
click - klikkaus keypress - painallus submit - lähetä load - lataa
dblclick - tupla klikkaus keydown - näppäin alhaalla change - vaihda resize - muuta kokoa
mouseenter - elementin sisään keyup - näppäin ylös focus - kohdistettu scroll - vieritä
mouseleave - elementistä ulos blur - "sumenna" unload - pura

Esimerkki, click sekä dblclick eli html-elementin hiirellä klikkaus sekä tupla klikkaus:

KLIKKAA TÄTÄ TEKSTIÄ

TUPLA KLIKKAA TÄTÄ TEKSTIÄ

(päivitä lopuksi internet-selain)

Esimerkin JQuery sekä liittäminen html-elementteihin:


 Sivun koodauksen head-osaan:
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script>
  $(document).ready(function(){
   $("#yksi").click(function(){
    $(this).hide();
   });
   $("#kaksi").dblclick(function(){
    $(this).hide();
   });
  });
 </script>
 
 HTML-koodauksessa liittäminen (class-tunnisteella CSS-ohje):
 
 <h4 class="marooni" id="yksi"> KLIKKAA TÄTÄ TEKSTIÄ </h4>
 <h4 class="marooni" id="kaksi"> TUPLA KLIKKAA TÄTÄ TEKSTIÄ </h4>

Lisää tapahtumia, klikkaa tästä

Design and edit player