jQueryn perusteet
jQueryn perusteet
jQueryn perusteet on ilmainen jQuery Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/1. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu jQuery Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Johdanto
Hei,
JQuery-kirjaston käyttämiseksi meidän on ensin lisättävä se HTML-dokumenttiin.
Alla olevassa esimerkissä jQuery-kirjaston osoite on lisätty head-tagien välissä olevan src-attribuutin arvoksi.
JQuery-kirjasto on nyt valmis käytettäväksi projektissamme.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.slim.js"></script>
</head>
<body>
</body>
</html>JQuery-valinta
HTML-elementtien (joita kutsumme tästä lähtien DOM:ksi) käsittelemiseksi meidän on ensin valittava elementti.
jQueryssa valintaan käytetään $()- tai jQuery()-metodia.
Ohjelmistokehittäjät suosivat $()-metodia.
Tälle metodille annettavan parametrin avulla päätämme, minkä elementin haluamme valita.
Xpath
$-metodille välitettävä lauseke on XPath-valitsin, jonka tunnemme myös CSS:stä.
Toisin sanoen valitsemme HTML-elementtejä JQueryssa samalla tavalla kuin CSS:ssä.
XPath-esimerkkejä
Oletetaan, että HTML-koodimme on seuraavanlainen.
<div id="my-box" class="my-box">
<p class="my-p">
<span class="my-text">Hello jQuery</span>
</p>
</div>
Valitaan HTML-elementtejä jQueryn avulla
// Dummy $ to demonstrate jQuery selectors in Node.js
function $(selector) {
console.log("Selector:", selector);
return [];
}
// Selects the element with the id of my-box.
$('#my-box')
// Selects the element with the my-box class.
$('.my-box')
// Selects all p elements that are descendants of the element with my-box id
$('#my-box p')
// Select the element with the .my-p class that is the child of the element with my-box class.
$('.my-box > .my-p')jQuery mahdollisti lyhyemmän koodin kirjoittamisen
Jos haluaisimme tehdä saman Vanilla (Plain) JavaScriptillä, joutuisimme kirjoittamaan enemmän koodirivejä.
jQuery mahdollisti lyhyemmän koodin kirjoittamisen omien metodiensa avulla.
Varoitus
JQuery on vain kirjasto, joka helpottaa web-kehitystä Vanilla JavaScriptiin verrattuna.
Tietoa
Yksi jQueryn eduista on, että kaikki nykyaikaiset selaimet tukevat kirjoittamaamme koodia.
Osa VanillaJS:llä kirjoittamastamme koodista voi aiheuttaa sivuvaikutuksia joissakin selaimissa, mutta jQuery takaa tarjoamansa abstraktion avulla saman toiminnan kaikissa selaimissa.
JQuery vapauttaa meidät selainkohtaisen toiminnan huomioimisesta koodia kirjoitettaessa.
$(document).ready
Ennen kuin siirrymme jQueryn perusteisiin, tutustutaan $(document).ready-metodiin.
Kuten HTML:stä muistamme, Javascript voidaan sijoittaa HTML:ssä head-tagin sisään tai body-tagien väliin.
$(document).ready 2
Oletetaan, että meillä on alla olevan kaltainen HTML-koodi.
Selaimemme tulkitsee koodimme <!DOCTYPE html>-tagista aina sulkevaan </html>-tagiin asti.
<script src = "https://code.jquery.com/jquery-3.5.1.slim.js"> </script>-lauseke aloittaa kirjaston lataamisen osoitteesta code.jquery.com.
Seuraavalla rivillä DOM valitaan jQueryn $-metodilla. Tässä on kuitenkin ongelma. Jos HTML-dokumenttia ei ole ladattu kokonaan sillä hetkellä, kun $ ('# test') -metodia kutsutaan, JS-koodimme epäonnistuu.
Tässä tapauksessa $(document).ready-metodia käytetään varmistamaan, että dokumentti on ladattu kokonaan.
<div id="test">Hello Coddy</div>
<script>
$('#test').text('Hello Coddy')
</script>
$(document).ready 3
Edellä esitetyn määrittelyn jälkeen
Meidän tarvitsee vain käyttää $(document).ready()-metodia. Tämä metodi odottaa kaiken sisällön latautumista ja suoritetaan sen jälkeen.
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<div id="test">Hello Coddy</div>
<script>
$(document).ready(function(){
$('#test').text('Hello Coddy')
})
</script>
</body>
</html>Kysymys
Vastatkaa kysymykseen!
Onnittelut
Onnittelut 🎉
Tässä osiossa aloitimme jQuery-kirjastoon ja sen $(document).ready()-metodiin tutustumisen.
Seuraavassa osiossa tutustumme jQueryn valitsimiin.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”jQueryn perusteet” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa jQuery Academy-oppimispolun 3 oppituntia, myös oppitunnin “jQueryn perusteet”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Mitä opin oppitunnilla ”jQueryn perusteet”?
jQueryn perusteet Harjoittelet jQuery Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni jQuery Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin jQuery Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/1.
Kuinka kauan ”jQueryn perusteet”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä jQuery Academy-oppitunnilla?
Kyllä. Jokainen jQuery Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.