jQuery, selector

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.

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>   
 

Testi-esimerkki:


 <!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ä, 
    (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