Taulukossa on metodeita joita ei voi sijoittaa oppaassa muiden metodeiden joukkoon.
| Metodi | Metodin selitys |
|---|---|
| data() | Liittää tietoja valittuihin elementteihin tai hakee tietoja niistä |
| each() | Suoritaa funktion kaikille asetuksia vastaaville elementille |
| get() | Valitsee DOM-elementit, jotka vastaavat valitsimeen asetettuja valintoja ? |
| index() | Etsii tiettyä elementtiä vastaavien elementtien joukosta |
| $.noConflict() | Vapauttaa tai tyhjentää jQueryn $-muuttujan |
| $.param() | Luo sarjamuotoisen esityksen taulukosta tai objektista (voidaan käyttää URL-kyselymerkkijonona AJAX-pyynnöille) |
| removeData() | Poistaa aiemmin tallennetun datan, esim poistaa div-elementissä esitetyn tiedon |
| size() | Käytä vaihtoehtoisesti length-metodia. Poistettu JQyery:n 3.0 versioista |
| toArray() | Hakee kaikki jQuery-joukon sisältämät DOM-elementit taulukkona ? |
Metodilla data() voidaan liittää tietoa esitettäväksi tai käytettäväksi koodauksessa.
Esimerkki.
Klikkaa aluksi "Näytä div-elementtiin liitetyt tiedot"-painiketta. Selaimen alert ilmoittaa
ettei tietoa ole olemassa. Kuittaa ilmoitus pois näkyvistä.
Klikkaa seuraavaksi "Liitä tiedot div-elementtiin"-
painiketta ja sen jälkeen "Näytä div-elementtiin liitetyt tiedot"-painiketta. Selaimen alert näyttää liitetyn tiedon (tekstin).
Kuittaa alert ilmoitus pois näkyvistä.
Painikkeen CSS-ohjeet:
.button {
display: inline-block;
padding: 8px 10px;
margin-bottom:10px;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
color: #fff;
background-color: #4CAF50;
border: none;
border-radius: 7px;
box-shadow: 6px 6px 5px #999;
}
.button:hover {background-color: #3e8e41}
.button:active {
background-color: #3e8e41;
box-shadow: 0px 0px 5px #666;
transform: translateY(1px);
}
jQuery-koodaus:
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").data("ilmoitus", "Liitettävä teksti on tässä");
});
$("#btn2").click(function(){
alert($("div").data("ilmoitus"));
});
});
</script>
HTML-koodaukset:
<button class="button" id="btn1"> Liitä tiedot div-elementtiin </button><br>
<button class="button" id="btn2"> Näytä div-elementtiin liitetyt tiedot </button>
<div> </div>
Tulos www-sivulla:
Metodilla each() voidaan tutkia esimerkiksi listan sisältö.
Esimerkki. Klikkaa painiketta ja kuittaa avautuvassa alert:ssa painikkeella:
jQuery-koodaus:
<script>
$(document).ready(function(){
$("button").click(function(){
$("li").each(function(){
alert($(this).text())
});
});
});
</script>
HTML-koodaukset:
<p> Alert näyttää listan juomia </p>
<button class="button"> Näytä listan juomat </button>
<ul>
<li> Pepsi </li>
<li> Fanta </li>
<li> Dr Pepper </li>
</ul>
Tulos www-sivulla:
Metodilla get() voidaan ottaa jonkin tieton elementin sisältö ja käsiteltäväksi.
Esimerkissä otetaan ensimmäisen p-elementin teksti ja näytetään se painikkeen alla div-elementissä:
jQuery-koodaus:
<script>
$(document).ready(function(){
$("button").click(function(){
var x = $("p").get(0);
$("div").text(x.nodeName + ": " + x.innerHTML);
});
});
</script>
HTML-koodaukset:
<p> Tämä on 1. p-elementti </p>
<p> Tässä on toinen p-elementti </p>
<button class="button"> Näytä p DOM elementti </button>
<div id="puna"> </div>
Tulos www-sivulla:
Metodilla index() voidaan ottaa esimerkiksi listan alkion index-numero käsiteltäväksi.
Esimerkissä näytetään listan indeksi-numero klikkaamalla lista tekstejä:
jQuery-koodaus:
<script>
$(document).ready(function(){
$("li").click(function(){
alert($(this).index());
});
});
</script>
HTML-koodaukset:
<p> Klikkaa listan juomien nimiä: </p>
<ul>
<li> Pepsi </li>
<li> Fanta </li>
<li> Dr Pepper </li>
</ul>
Tulos www-sivulla:
Metodilla noConflict() vapauttaa jQueryn $-muuttujan ohjauksen.
Esimerkissä vapautetaan jqeu-niminen muuttuja:
jQuery-koodaus:
<script>
var jqeu = $.noConflict();
jqeu(document).ready(function(){
jqeu("button").click(function(){
jqeu("p").hide();
});
});
</script>
HTML-koodaukset:
<h3> Otsikko </h3>
<p> 1. p-elementti ja teksti. </p>
<p> 2. p-elementti, klikkaa painiketta. </p>
<button class="button"> Piilota </button>
Tulos www-sivulla:
Metodilla param() voidaan luoda sarjamuotoinen esitys taulukosta tai objektista (voidaan käyttää URL-kyselymerkkijonona AJAX-pyynnöille).
Esimerkissä luodaan sarjamuotoinen esitys objektista:
jQuery-koodaus:
<script>
$(document).ready(function(){
henkObjekti = new Object();
henkObjekti.etunimi = "Hannele";
henkObjekti.sukunimi= "Hanhivaara";
henkObjekti.ika = 36;
henkObjekti.pituus = "176";
$("button").click(function(){
$("div").text($.param(henkObjekti));
});
});
</script>
HTML-koodaukset:
<button class="button"> Luo objektista sarjamuotoinen </button>
<div id="puna"> </div>
Tulos www-sivulla:
Metodi removeData() poistaa valitusta elementistä siellä olevan tiedon.
Esimerkissä removeData poistaa div-elementissä olevan tiedon.
jQuery-koodaus:
<script>
$(document).ready(function(){
$("#painike1").click(function(){
$("div").data("viesti", "Tässä tämä viesti on.");
alert("Ilmoitus: " + $("div").data("viesti"));
});
$("#painike2").click(function(){
$("div").removeData("viesti");
alert("Ilmoitus: " + $("div").data("viesti"));
});
});
</script>
HTML-koodaukset:
<button id="painike1"> Liitä tiedot div-elementtiin </button>
<button id="painike2"> Poista div-elementtiin liitetyt tiedot </button>
<div> </div>
Tulos www-sivulla:
Metodi toArray() hakee kaikki jQuery-joukon sisältämät DOM-elementit taulukkona.
Esimerkissä removeData poistaa div-elementissä olevan tiedon.
jQuery-koodaus:
<script>
$(document).ready(function(){
$("#painike1").click(function(){
var i;
var x = $("li").toArray()
for (i = 0; i< x.length; i++) {
alert(x[i].innerHTML);
}
});
});
</script>
HTML-koodaukset:
<button class="button" id="painike1"> Näytä lista alert-ilmoituksessa </button>
<ul>
<li> Suklaa </li>
<li> Toffee </li>
<li> Lakritsi </li>
<li> Salmiakki </li>
</ul>
Tulos www-sivulla: