Taulukossa jQuery:n ominaisuuksiin liittyvää:
| Metodi | Metodin selitys |
|---|---|
| context | Vanhentunut ja poistettu JQuery:n 3.0 versiosta |
| jquery | Ominaisuus jolla voidaan selvittää JQuery:n versio |
| gjQuery.fx.interval | Ominaisuutta käytetään muuttamaan esim animaation käynnistymisnopeutta millisekunteina |
| jQuery.fx.off | Ominaisuutta käytetään esim animaatio-tapahtuman poistamiseen/käyttöön ottamiseen |
| jQuery.support | Ominaisuuksia, jotka liittyvät selaimen ominaisuuksiin tai virheisiin |
| length | Pituus-ominaisuus sisältää jQuery-objektin elementtien määrän, esim listan alkioiden määrä |
Koodaus jolla näytetään www-sivuston käyttämä jQuery-versio. Esimerkissä script-linkin lopussa näkyy versio:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").on("click",function(){
var version = $().jquery;
alert("Käytössäsi on versio: " + version);
});
});
</script>
</head>
<body>
<button class="painike"> Tarkista versio </button>
</body>
Tulos www-sivulla:
Kun "Piilota - Näytä" -painiketta painetaan, vaihdetaan div:n piilottamisen ja näyttämisen välillä (oletus on 13 millisekuntia). Joka kerta kun "Suorita animaatio nopeammin" -painiketta painetaan, lisätään ominaisuuteen 500 millisekuntia, mikä saa animaation toimimaan vähemmällä kehysmäärällä (selaimesta riippuen animaatio voi toimia toivottua heikommin).
jQuery käyttää yhtä yleistä aikaväliä, jotta aikaväli-muutokset astuvat voimaan,
animaatioita ei pitäisi olla käynnissä tai kaikki animaatiot on pysäytettävä ensin.
(paina "Piilota - Näytä". Paina sitten "Suorita animaatio nopeammin",
kun animaatio on pysähtynyt, paina "Piilota - Näytä" uudelleen nähdäksesi efektin).
Koodaus jolla voidaan vaihtaa esimerkiksi animaation lataumis-nopeutta:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#toggle").on("click", function(){
$("div").toggle(5000);
});
$("#interval").on("click", function(){
jQuery.fx.interval = 500;
});
});
</script>
</head>
<body>
<button class="painike" id="toggle">Piilota - Näytä</button>
<button class="painike" id="interval">Suorita animaatio nopeammin</button>
<div style="background:#98bf21;height:100px;width:100px;margin:50px;"> </div>
</body>
Tulos www-sivulla:
Koodaus jolla voidaan sallia tai estää animaation näyttäminen:
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
<script>
$(document).ready(function(){
$("#esta").click(function(){
jQuery.fx.off = true;
});
$("#salli").click(function(){
jQuery.fx.off = false;
});
$("#toggle").click(function(){
$("div").toggle("slow");
});
});
</script>
</head>
<body>
<button class="painike" id="esta"> Estä animaatio </button>
<button class="painike" id="salli"> Salli animaatio </button><br><br>
<button class="painike" id="toggle">Käynnistä animaatio</button>
<div style="background:#98bf21;height:100px;width:100px;margin:50px;"> </div>
Tulos www-sivulla:
Koodauksessa testataan voiko selain luoda XMLHttpRequest-objektin:
<script
$(document).ready(function(){
$("p").html("Selain voi luoda XMLHttpRequest-objektin: " + jQuery.support.ajax);
});
</script>
</head>
<body>
< LT/p>
Tulos www-sivulla:
Taulukossa lisää metodin astuksista, ei linkkejä esimerkkeihin
| Metodin asetus | Kuvaus, määrittää testattavan toiminnon |
|---|---|
| ajax | true-arvo jos selain voi luoda XMLHttpRequest-objektin |
| boxModel | true-arvo jos nykyisen (jossa koodaus on) www-sivun muotoilla boxModel CSS-ohjeella |
| changeBubbles | true-arvo jos muutos toimii W3C tapahtuman mukasesti |
| checkClone | true-arvo jos selain klonaa oikein valinta-painikkeiden ja ruutujen valitut tilat |
| checkOn | true-arvo jos valintaruuden arvona "On" kun arvoa ei ole määritetty |
| cors | true-arvo jos selain voi luoda XMLHttpRequest-objektin ja jos kyseisellä XMLHttpRequest-objektilla on withCredentials-ominaisuus |
| cssFloat | true-arvo jos CSS float-arvon sisältävän ominaisuuden nimi on .cssFloat |
| hrefNormalized | true-arvo jos .getAttribute()-menetelmä hakee elementtien href-attribuutin esim sivu1.html tyyppisenä sen sijaan, että se normalisoisi sen täydelliseksi URL-osoitteeksi esim. https://learnjavascript.co.uk/jq/reference/utilities/support.html |
| htmlSerialize | true-arvo jos selain pystyy lisäämään linkkielementtejä elementtien .innerHTML-ominaisuuden avulla |
| leadingWhitespace | true-arvo jos selain lisää sisältöä .innerHTML-koodilla varsinkin, jos etummaiset välilyönnit säilyvät |
| noCloneChecked | true-arvo jos kloonatut DOM-elementit kopioivat .checked expandon tilan |
| noCloneEvent | true-arvo jos kloonattuja DOM-elementtejä luodaan ilman, että lähdeelementin tapahtumakäsittelijöitä kloonataan |
| opacity | true-arvo jos selain pystyy tulkitsemaan opasiteetti-tyyliominaisuuden oikein |
| optDisabled | true-arvo jos pois käytöstä valittujen elementtien vaihtoehtoelementtejä ei merkitä automaattisesti pois käytöstä poistetuiksi. |
| optSelected | true-arvo jos oletusarvoisesti valitulla optioelementillä on toimiva valittu ominaisuus |
| scriptEval() | SELVITETTÄVÄ |
| style | true-arvo jos elementin sisäisiä tyylejä voidaan käyttää tyyli-nimisen DOM-attribuutin kautta DOM-tason 2 määrityksen edellyttämällä tavalla. Jos näin on, .getAttribute('style') voi noutaa tämän arvon |
| submitBubbles | true-arvo jos muutostapahtuma noudattaa DOM-puuta W3C DOM -tapahtumamallin edellyttämällä tavalla |
| tbody | true-arvo jos tyhjä taulukkoelementti voi olla olemassa ilman tbody-elementtiä. HTML-määrityksen mukaan tämä alielementti on valinnainen, joten ominaisuuden tulee olla tosi täysin yhteensopivassa selaimessa |
Koodauksessa selvitetään kuinka monta li-elementtiä sivun koodauksessa on:
<script
$(document).ready(function(){
$("button").click(function(){
alert($("li").length);
});
}););
</script>
</head>
<body>
<button class="painike">Näytä li-elementtien lukumäärä</button>
<ul>
<li> Jaguar </li>
<<li> Aston Martin </li>
<li> Ford </li>
<li> Lotus </li>
<li> Morgan </li>
</ul>
Tulos www-sivulla: