jQuery - Rakenne

Rakenteeseen liittyvät metodit

JQuery-rakenteessa käytetään metodeja valitsemaan HTML-elementtejä HTML-koodauksesta jolloin "löydetään" haluttu elementti sen suhteessa muihin elementteihin. "Aloita yhdellä valinnalla ja siirry sen läpi, kunnes haluamasi haluamasi elementit.

Alla oleva kuva havainnollistaa HTML-sivun koodausta puu-rakenteena (DOM-puu). JQuery "Traversingin", rakenteen, avulla voi helposti siirtyä ylös ("esi-isät" - parent), alas ("jälkeläiset") ja sivuttain ("sisarukset") puussa valitusta (nykyisestä) elementistä alkaen.Tätä liikettä kutsutaan DOM-puun läpi kulkemiseksi tai sen läpi liikkumiseksi.

DOM, Document Object Model eli dokumenttioliomalli, on tapa kuvata rakenteisen dokumentin, kuten HTML:n, XML:n tai XHTML:n, rakenne puuna, jonka eri olioita voi hakea, tutkia ja manipuloida esimerkiksi JavaScriptin avulla. (lähde: Wikipedia)

Girl in a jacket

Kuvan selitykset (vaikeaa eikö vaan):

HTML-elementtien rakenteisiin liittyviä metodeita:

Metodi Metodin selitys
add()
addBack()
andSelf() Vanhentunut versiossa 1.8. Käytä metodia addBack()
children() Lisää HTML-elementin sisällä olevaan esim HTML-elementin tai -elementtien CSS-ohjeen
closest()
contents()
each()
end()
eq() Palauttaa elementin ("valitsee kohteeksi"), jossa on valitun tai valittujen elementtien vastaava indeksinumero
filter() Suodattaa metodissa määritellyä asetuksella elementit ja suorittaa näille asetut toiminnot, esim tietyt class-tunnisteiset muotoillaan uudella CSS-ohjeella
find() Suodattaa valitun elementin sisällä olevat halutut elementit ja esim vaihtaa niiden CSS-ohjeen
first() Palauttaa valittujen elementtien ensimmäisen elementin, esim div-elementeissä ensimmäisenä olevan p-elementin
has()
is()
last() Palauttaa valittujen elementtien viimeisen elementin, esimerkiksi div-elementeissä viimeisenä olevan p-elementin
?? Käy funktiolla läpi joukon elementtejä ja tuottaa uuden jQuery-objektin, joka sisältää palautusarvot ??
next() Palauttaa valitun elementin seuraavan sisar-elementin, esim class-tunnisteisen elementin muden samojen elementtien joukosta
nextAll() Palauttaa kaikki valitun elementin seuraavat sisarus-elementit, esim class-tunnisteista elementtiä seuraavat elementit
nextUntil() Palauttaa kaikki seuraavat sisaruselementit kahden annetun argumentin väliltä, esim kahden eri class-tunnisteen välissä olevat elementit
not() Palauttaa elementit jotka eivät täytä tiettyjä ehtoja, esimerkiksi ne elementit joilla ei ole class-tunnistetta
offsetParent()
parent() Palauttaa valitun elementin suoran pääelementin, esim sen elementin jonka sisällä p-elementti on
parents() Palauttaa kaikki valitun elementin esi-elementit, esim kaikki ne elementit joiden sisällä valittu elementti on
parentsUntil() Palauttaa kaikki esi-elementit kahden annetun argumentin välillä, esim div- elementissä on ul-li elementtejä ja li elementissä span-elementti jolloin ul-li elementit palautetaan
prev()
prevAll()
prevUntil()
siblings() Palauttaa kaikki valitun elementin sisar-elementit, esim class-tunnisteisen li elementin ylä-ja alapuolella olevat li-elementit
slice()

Ylemmän tason elementit (Ancestors-"esivanhemmat")

Jotain selventävää tekstiä tähän yhteyteen...

parent() metodi

Etsitään koodauksen span-elementit ja vaihdetaan niiden elementtien viivan ja tekstin väri minkä sisällä span-elementit sijaitsee:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("span").parent().css({"color": "red","border": "3px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ancestors * { 
   display: block;
   border: 2px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <body class="ancestors"> body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)<span>span-elementti</span></li>
      <li>li (direct parent)<span>span-elementti</span></li>
    </ul>   
  </div>
 </body>

Tulos www-sivulla:


parents() metodi

Esimerkki. Koodaus etsii kaikki HTML-elementit joiden "sisällä" span-elementti on ja vaihtaa näiden elementtien viiva sekä tekstin värin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("span").parents().css({"color": "red","border": "3px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ancestors * { 
   display: block;
   border: 2px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <body class="ancestors"> body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)<span>span-elementti</span></li>
      <li>li (direct parent)<span>span-elementti</span></li>
    </ul>   
  </div>
 </body>

Tulos www-sivulla:


Lisä-esimerkki. Etsitään div-elementistä ul-elementti ja vaihdetaan värit.


parentUntil() metodi

Esimerkki. Koodaus etsii (palauttaa) kaikki "esivanhemmat" elementtien <span> ja <div> väliltä ja asetetaan niille punainen tekstin ja viivan väri:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("span").parentsUntil("div").css({"color": "red","border": "3px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ancestors * { 
   display: block;
   border: 2px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus, huomaa esimerkissä body-elementissä koodausta:
 <body class="ancestors"> body (great-great-grandparent)
  <div style="width:500px;">div (great-grandparent)
    <ul>ul (grandparent)  
      <li>li (direct parent)<span>span-elementti</span></li>
      <li>li (direct parent)<span>span-elementti</span></li>
    </ul>   
  </div>
 </body>

Tulos www-sivulla:


Alemman tason elementit (Descendants - "jälkeläiset")

Kaksi jQuery-metodi DOM-puun läpikulkuun ovat:

children() metodi

Esimerkki. Metodi etsii (palauttaa) kaikki div-elementin alla olevat elementit ja asettaa niihin punaisen tekstin ja viivan värin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("div").children().css({"color": "red","border": "3px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ancestors * { 
   display: block;
   border: 2px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus:
 <div class="descendants" style="width:500px;">div (current element) 
  <p>p (child)
    <span>span (grandchild)</span>   
  <</p>
  <p>p (child)
    <span>span (grandchild)</span>
  </p> 
 </div>

Tulos www-sivulla:


Lisä-esimerkki. Etsitään div-elementistä class-tunnisteinen elementti ja vaihdetaan värit.


find() metodi

Esimerkki etsii ja vaihtaa viivan värin kaikille div-elementin alla oleville span-elementeille:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("div").find("span").css({"color": "red","border": "3px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ancestors * { 
   display: block;
   border: 2px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus:
 <div class="descendants" style="width:500px;">div (current element) 
  <p> (child)
    <span>span (grandchild)</span>   
  </p>
  <p> (child)
    <span>span (grandchild)</span>
  </p> 
 </div>

Tulos www-sivulla:


Lisä-esimerkki. Etsi kaikki elementit määritetyn elementin alta.

"SISAR"-ELEMENTTI

JQuerylla voit liikkua DOM-puussa sivuttain löytäen valitun elementin sisar-elementtejä.

Käytetyimpiä JQuery-metodeita sisar-elementtien käsittelyyn ovat:

siblings() metodi

Esimerkki. Etsitään annetun elementin kaikki sisar-elementit. Annettu elementti on h2, kaikki div-elementin sisällä olevat elementit ovat h2 elementin sisar-elementtejä:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("h2").siblings().css({"color": "red", "border": "2px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ohje * { 
   display: block;
   border: 3px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus:
<body class="ohje">

<div>div (parent)
  <p>p-elementti</p>
  <span>span-elementti</span>
  <h2>h2-elementti</h2>
  <h3>h3-elementti</h3>
  <p>p-elementti</p>
</div>

Tulos www-sivulla:


Lisä-esimerkki. Etsitään h2-elementin sisar-elementit p-elementit. Koodauksessa ainoa muutos edelliseen esimerkkiin on että annetaan argumentiksi etsittävä elementti:

$("h2").siblings("p").css({"color": "red", "border": "2px solid red"});

Tulos www-sivulla:


next() metodi

Esimerkki. Etsitään h2-elementin seuraava sisar-elementti (joka on div-elementin sisällä):


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
  $("h2").next().css({"color": "red", "border": "2px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ohje * { 
   display: block;
   border: 3px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus:
<body class="ohje">

<div>div (parent)
  <p>p-elementti</p>
  <span>span-elementti</span>
  <h2>h2-elementti</h2>
  <h3>h3-elementti</h3>
  <p>p-elementti</p>
</div>

Tulos www-sivulla:


nextAll() metodi

Esimerkki. Etsitään h2-elementin jälkeen tulevia sisar-elementtejä (jotka on div-elementin sisällä):


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("h2").nextAll().css({"color": "red", "border": "2px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ohje * { 
   display: block;
   border: 3px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus:
<body class="ohje">

<div>div (parent)
  <p>p-elementti</p>
  <span>span-elementti</span>
  <h2>h2-elementti</h2>
  <h3>h3-elementti</h3>
  <p>p-elementti</p>
</div>

Tulos www-sivulla:


nextUntil() metodi

Esimerkki. Etsitään h2- ja h6-elementtien välissäolevat sisar-elementit (jotka on div-elementin sisällä):


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("h2").nextUntil("h6").css({"color": "red", "border": "2px solid red"});
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 .ohje * { 
   display: block;
   border: 3px solid grey;
   color: grey;
   padding: 5px;
   margin: 15px;
 }
 
 HTML-koodaus:
<body class="ohje">

<div>div (parent)
  <p>p-elementti</p>
  <span>span-elementti</span>
  <h2>h2-elementti</h2>
  <h3>h3-elementti</h3>
  <h4>h4-elementti</h4>
  <h5>h5-elementti</h5>
  <h6>h6-elementti</h6>
  <p>p-elementti</p>
</div>

Tulos www-sivulla:


SUODATTAMINEN Filtering

Yleisimmät suodatusmenetelmät ovat first(), last() ja eq(), joiden avulla voit valita tietyn elementin sen sijainnin perusteella elementtiryhmässä:

Metodit filter() ja not() sallivat valita elementtejä, jotka vastaavat tai eivät vastaa tiettyjä ehtoja:

first() metodi

Esimerkki. Koodaus etsii ensimmäisen div-elementin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("div").first().css("background-color", "YELLOW");
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 div{ 
  border: 2px solid grey;
  padding: 5px;
 }
 
 HTML-koodaus:
 <h3>Kolme tekstikehystä

 <div>
  <p>Tekstiä sisältävä 1. kehys.</p>
 </div> <br>

 <div>
  <p>Tekstiä sisältävä 2. kehys.</p>
 </div><br>

 <div>
  <p>Tekstiä sisältävä 3. kehys.</p>
 </div>

Tulos www-sivulla:


last() metodi

Esimerkki. Koodaus etsii viimeisen div-elementin:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("div").last().css("background-color", "YELLOW");
 });
 </script>
 
 CSS-ohjeet head-elementtiin:
 div{ 
  border: 2px solid grey;
  padding: 5px;
 }
 
 HTML-koodaus:
 <h3>Kolme tekstikehystä

 <div>
  <p>Tekstiä sisältävä 1. kehys.</p>
 </div> <br>

 <div>
  <p>Tekstiä sisältävä 2. kehys.</p>
 </div><br>

 <div>
  <p>Tekstiä sisältävä 3. kehys.</p>
 </div>

Tulos www-sivulla:


eq() metodi

Esimerkki. Koodaus p-elementin jonka tekstissä on JQuery:ssa atribuuttina annettu numero ja vaihdetaan tekstin väri:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("p").eq(1).css("color", "RED"); 
 });
 </script>
 
 HTML-koodaus:
 <h3>Etsitään tekstistä numero</h3>

<p>Tästä on lähdettävä liikkeelle (numero 0).</p>
<p>Seuraava numero (numero 1).</p>
<p>Kakkonen on ihan hyvä (numero 2).</p>
<p>Tämä oli kiitettävä (numero 3).</p>

Tulos www-sivulla:


filter() metodi

Esimerkki. Koodauksella etsitään elementtejä joissa on class="etsi" muotoilu-ohje. Löydettyjen elementtien tekstinväri vaihdetaan siniseksi:


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("p").filter(".etsi").css("color", "BLUE"); 
 });
 </script>
 
 HTML-koodaus:
 <h3>Etsitään class-"tunnisteita"</h3>

<p>Tässä etsitään "class-ohjeita" joilla,</p>
<p class="etsi">on nimi <i>sini</i>.</p>
<p class="etsi">Myös id-tunnisteiden</p>
<p>avulla voi elementin etsiä.</p>

Tulos www-sivulla:


not() metodi

Esimerkki. Koodauksella etsitään elementtejä joilla ei ole class="etsi" muotoilu-ohjetta. Löydettyjen elementtien tekstinväri vaihdetaan punaiseksi.

Koodauksessa filter-metodin tilalla käytetään not-metodia ja esimerkissä .


 JQuery head-elementtiin:
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
 <script>
 $(document).ready(function(){
   $("p").not(".etsi").css("color", "RED"); 
 });
 </script>
 
 HTML-koodaus:
 <h3>Etsitään elementtejä joilla ei ole class-"tunnisteita"</h3>

<p>Tässä etsitään "class-ohjeita" joilla,</p>
<p class="etsi">on nimi <i>sini</i>.</p>
<p class="etsi">Myös id-tunnisteiden</p>
<p>avulla voi elementin etsiä.</p>

Tulos www-sivulla:


Design and edit player