jQuery, events

Tapahtumat - events

Tapahtumalla tarkoitetaan jotain www-sivulla tehtyä toimenpidettä josta seuraa jokin toiminto. Esimerkiksi:


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

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

Taulukossa mahdollisia tapahtumia (DOM events)

Hiiri Näppäimistö LomakkeetDokumentti/Näyttö
click Esim. Hiiren painiketta klikattu
keypress Esim. Näppäimistöltä painettujen numeroiden lukumäärä
submit Esim. Lomakkeen tietojen lähettäminen
load Esim. dokumentti-tiedosto on latautunut
dblclick Esim. Hiiren painiketta tupla-klikattu
keydown Esim. Painike painettu alas
change Esim. Jonkin muuttuminen tai vaihtaminen
resize Esim. dokumentin koko on muuttunut tai muuttuu
mouseenter Esim. Hiiren osoitin HTML-elementin alueella
keyup Esim. Painiketta klikattu
focus Esim. Lomake-kentään klikattu hiirellä ja siitä seuraa toiminto
scroll Esim. dokumenttia liikutetaan "scrollataan"
mouseleeve Esim. Hiiren osoitin siirtynyt pois HTML-elementin alueelta
blur Esim. Lomake-kenttään kirjoitettu
unload Esim. dokumentti ei ole latautunut

Tapahtumien koodauksen periaate, esimerkissä p-elementtiä klikattaisiin:

 $("p").click(function(){
  /* Tähän kohtaan klikkauksen
     seurauksena suoritettavat 
     "tehtävät" */  
 });

click -tapahtuma

Kun www-sivulle tarvitaan hiirellä klikkaus tai kosketusnäytöltä sormella suoritettava toiminto, sopiva toiminto on click-tapahtuma.
HUOMAA TÄMÄ.
Kun käytetään HTML-elementtiä tapahtuman tunnisteessa, tapahtuma koskee kaikkia samantyyppisiä HTML-elementtejä www-sivulla. Käytä mielummin ID-tunnistetta.

Esimerkki. Kuvan klikkaaminen piilottaa klikatun kuvan:


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

   <h3 class="vari2"> Klikkaa kuvaa </h3>

   <img src="query1.jpg" width="15%">

  </body>
 </html>

Tulos www-sivulla:


Esimerkissä painikkeella avataan ja suljetaan div-elementti, alla koodukset ja esimerkki. 


 Head-elementtissä:
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
 </script>
 <script>
   $(document).ready(function() {
      $("#pois").hide();
      $(".infot").hide();

      $("#esiin").click(function () {
        $(".infot").show("slow");
        $("#esiin").hide();
        $("#pois").show();
      }); 
      $("#pois").click(function () {
        $(".infot").hide("slow");
        $("#pois").hide();
        $("#esiin").show();
      });
   });
 </script>
 
 CSS-ohjeet style-elementtiin:
 
 .infot {
   background-color: #D6FF99;
   width: 50%;
   border: 1px solid green;
   padding: 10px;
   margin: 0px;
   text-align: justify;
 }
 .painike {
   width: 40px;
   background-color: #3D6600;
   border: 1px solid #99FF00;
   color: white;
   padding: 10px 20px;
   text-align: center;
   font-size: 16px;
   margin: 4px 2px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.6), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
 }
 .painike:hover {
   color: yellow;
   border: 1px solid yellow;
 }
 .painike:active {
   padding: 10px 20px;
   box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.6), 0 4px 20px 0 rgba(0, 0, 0, 0.25);
 }
 .keskelle{text-align:center;letter-spacing: 2px;}

 HTML-koodaus sivun sisältö osaan:
 
 <div class="painike" id="pois"> Piilota </div> 
 <div class="painike" id="esiin"> Näytä </div> 
 <div class="infot">
  Voit tässä näyttää html-elementeillä ja CSS-ohjeilla muotoiltua sisältöä.
  Esimerkiksi kuvan, taulukon, videon, lomakkeen jne.<br>
  <p class="keskelle">JQuery-organisaation www-sivut: https://learn.jquery.com/ </p>
  Löydät organisaation sivustolta oppaan lisäksi ajankohtaista tietoa JQuerystä.
 </div>

Kokeile yllä olevaa esimerkkiä, klikkaa alla olevaa painiketta.




KESKEN TÄSSÄ

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ä, 
    (lainnausmerkkien välissä on valitsin eli selector)
  $(this).hide();
   - sulkee eli "piilottaa" hide() funktiolla klikatun p-elementin

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


Selectorit eli valitsimet

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>

Valitsin Merkitys www-sivulla
Valitsee kaikki elementit
Valitsee nykyisen HTML-elementin
Valitsee p-elementin jonka tunniste on class="teksti", yleensä CSS-muotoiltu
Valitsee ensimmäisen p-elementin
Valitsee ensimmäisen listan eli ul-elementin ja tämän listan ensimmäisen alkion eli li-elementin
Valitsee www-sivun kaikista listoista (ul) ensimmäisen li-elementin
Valitsee kaikki elementit joissa on href-määrite ("linkki jonnekin")
Valitsee kaikki linkki-elementit joissa avausmäärite selaimeen ON target='_blank'
Valitsee kaikki linkki-elementit joiden avausmäärite EI OLE target='_blank'
Valitsee kaikki button-määritteiset painikkeet
Valitsee taulukosta ensimmäisestä rivistä aloittaen joka toisen (even) rivin (tr)
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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

TÄSSÄ KESKEN!



Design and edit player