jQuery - ## Soveltaminen ?

jQuery esittely

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

HTML
CSS
JavaScript

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ä, alla:

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

Tutustu tarkemmin jQuery.com sivustoon tästä.

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

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 lähes mikä tahansa HTML-elementti class- tai id-tunisteinen -elementti. Huomaa kuitenkin HTML-elementillä ei voi olla kahta tai useampaa ID-valitsinta, esimerkiksi CSS-ohjetta ID-tunnisteella liitettynä.

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

Taulukkoon on koottu muutamia valitsimia esimerkki-koodauksineen. Esimerkki aukeaa klikkaamalla vasemman sarakkeen valitsinta.

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>

Esimerkkejä saattaa joutua zoomaamaan jotta Sulje-painike näkyy !

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 www-sivun elementit

<!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>

Sulje

Valittu elementti

  Nämä 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>

Sulje

Osoitettu elementti

  Nämä head-elementtiin:

  </script>
  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("p.teksti").hide();
    });
   });
  </script>
  <style>
    .teksti{color: slateblue;}
  </style>
  
 Nämä 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>

Sulje

Ensimmäinen elementti

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

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

 <button> Poista 1. teksti </button>

Sulje

Listan ensimmäinen

  Nämä head-elementtiin:
  
  <script>
   $(document).ready(function(){
    $("h3").click(function(){
     $("ul li:first").hide();
    });
   });
  </script>
  <style>
    .teksti{color: red;}
  </style>
  
 Nämä 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>

Sulje

Listan ensimmäinen

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

 <button class="teksti">  Poista ensimmäiset  </button>

Sulje

Piilotetaan elementtejä

  Nämä head-elementtiin:
  
  <script>
   $(document).ready(function(){
    $("h4").click(function(){
     $("[href]").hide();
    });
   });
  </script>
  <style> .teksti{color: slateblue;} </style>
  
 Nämä 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>

Sulje

Asetuksen mukaan piilottaminen

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

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

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

Sulje

Asetuksen mukaan piilottaminen

  Nämä head-elementtiin:
  
  <script>
   $(document).ready(function(){
    $("button").click(function(){
     $("a[target!='_blank']").hide();
    });
   });
  </script>
  <style> .teksti{color: slateblue;} </style>
  
 Nämä 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 </p>
 <p><a href="https://www.internet-radio.com/">  Web radiot  </a></p>

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

Sulje

Asetuksen mukaan piilottaminen

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

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

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

Sulje

CSS-väriasetus (keltainen)

  Nämä head-elementtiin:
  
  <script>
   $(document).ready(function(){
    $("tr:even").css("background-color", "yellow");
   });
  </script>
  
 Nämä 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>

Sulje

CSS-väriasetus (turkoosi)

  Nämä head-elementtiin:
  
  <script>
   $(document).ready(function(){
    $("tr:odd").css("background-color", "Turquoise");
   });
  </script>
  
 Nämä 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>

Sulje

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").click(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>

Design and edit player