Bevezetés
HTML, CSS, JavaScript a három alapvető nyelv a web. Weboldalainkat HTML-vel építjük fel, CSS-sel formázzuk, valamint JavaScript segítségével interaktív funkciókat adunk hozzá. Valójában, a legtöbb animációk, valamint minden olyan művelet, ami történik eredményeként a felhasználó kattintással, lebeg, vagy görgetés vannak kialakítva JavaScript.
jQuery a” Write Less, Do More ” JavaScript könyvtár. Ez nem egy programozási nyelv, hanem egy olyan eszköz, amelyet a közös JavaScript feladatok tömörebbé tételére használnak., a jQuery előnye, hogy kompatibilis a böngészővel, ami azt jelenti, hogy biztos lehet benne, hogy a kód kimenete minden modern böngészőben rendeltetésszerűen jelenik meg.
összehasonlításával egy egyszerű ” Hello, világ!”program mind a JavaScriptben, mind a jQuery-ben láthatjuk a különbséget abban, hogy mindkettő meg van írva.
document.getElementById("demo").innerHTML = "Hello, World!";$("#demo").html("Hello, World!");Ez a rövid példa azt mutatja, hogy a jQuery hogyan érheti el ugyanazt a végeredményt, mint a sima JavaScript tömör módon.,
célok
Ez az útmutató nem feltételezi a jQuery előzetes ismereteit, és a következő témákra terjed ki:
- hogyan kell telepíteni a jQuery-t egy webes projektbe.
- olyan fontos webfejlesztési fogalmak definíciói, mint az API, a DOM és a CDN.
- közös jQuery szelektorok, események és hatások.
- példák a cikk során megtanult fogalmak tesztelésére.
előfeltételek
az útmutató megkezdése előtt a következőkre lesz szüksége:
- a HTML és a CSS alapvető ismerete., Már tudnia kell, hogyan kell létrehozni egy egyszerű weboldalt, és meg kell értenie a CSS kiválasztókat, például azonosítókat, osztályokat, pszeudo elemeket.
- a programozás alapjainak megértése. Bár lehet kezdeni írásban jQuery nélkül fejlett ismerete JavaScript, ismerete a fogalmak változók és adattípusok, valamint a matematika és a logika segít jelentősen.
A jQuery beállítása
a jQuery egy JavaScript fájl, amelyre hivatkozni fog a HTML-ben. Kétféle módon lehet A jQuery-t bevonni egy projektbe:
- töltse le a helyi példányt.,
- Link egy fájlhoz a Content Delivery Network (CDN) segítségével.
Megjegyzés: A Content Delivery Network (CDN) egy olyan rendszer, több szerver szállít webes tartalmat a felhasználó földrajzi elhelyezkedés alapján. Ha egy tárolt jQuery fájlhoz kapcsolódik CDN-n keresztül, akkor az gyorsabban és hatékonyabban érkezik a felhasználóhoz, mintha a saját szerverén tárolná.
a CDN-t használjuk a jQuery hivatkozására példáinkban. A jQuery legújabb verzióját a Google hosztolt könyvtáraiban találja meg., Ha ehelyett szeretné letölteni, akkor kap egy másolatot a jQuery a hivatalos honlapon.
ezt a gyakorlatot egy kis webes projekt létrehozásával kezdjük. style.css a css/ könyvtárban, scripts.js a js/ könyvtárban, valamint a fő index.html a projekt gyökerében.
project/├── css/| └── style.css├── js/| └── scripts.js└── index.html a kezdéshez készítsen HTML-csontvázat és mentse el index.html.
<!doctype html><html lang="en"><head> <title>jQuery Demo</title> <link rel="stylesheet" href="css/style.css"></head><body></body></html>Link a jQuery CDN közvetlenül a zárás előtt </body>címke, majd a saját egyéni JavaScript fájl, scripts.js.
a JavaScript fájlt (scripts.js) a jQuery könyvtár alatt kell feltüntetni a dokumentumban, vagy nem fog működni.
Megjegyzés: Ha letöltötte a jQuery helyi példányát, mentse el a js/ mappába, majd hivatkozzon rá a js/jquery.min.js.,
Ezen a ponton a jQuery könyvtár betöltődik a webhelyére, és teljes hozzáféréssel rendelkezik a jQuery API-hoz.
megjegyzés: az alkalmazásprogramozási felület (API) olyan felület, amely lehetővé teszi a szoftverprogramok kölcsönhatását egymással. Ebben az esetben a jQuery API tartalmazza a jQuery eléréséhez szükséges összes információt és dokumentációt.
A jQuery
használatával a jQuery a Dom-on keresztül kapcsolódik a böngésző HTML elemeihez.,
a Dokumentumobjektum-modell (Dom) az a módszer, amellyel a JavaScript (és a jQuery) kölcsönhatásba lép a HTML-vel egy böngészőben. Ha pontosan meg szeretné tekinteni, mi a DOM, a böngészőjében kattintson a jobb gombbal az aktuális weboldalra válassza az ellenőrzés lehetőséget. Ez megnyitja a fejlesztői eszközöket. Az itt látható HTML kód A DOM.
minden HTML elem csomópontnak tekinthető a DOM-ban-egy objektum, amelyet a JavaScript megérinthet. Ezek az objektumok faszerkezetben vannak elrendezve, a<html> közelebb vannak a gyökérhez, és minden beágyazott elem egy ág a fa mentén., A JavaScript ezen elemek bármelyikét hozzáadhatja, eltávolíthatja és megváltoztathatja.
ha ismét jobb egérgombbal kattint a webhelyre, majd kattintson az Oldalforrás megtekintése elemre, akkor megjelenik a webhely nyers HTML kimenete. Először könnyű összekeverni a DOM-ot a HTML forrással, de különbözőek – az oldal forrása pontosan az, ami a HTML fájlban van írva. Ez statikus, és nem fog változni, és nem befolyásolja a JavaScript. A DOM dinamikus, és változhat.
a DOM legkülső rétege, a teljes <html> csomópontot lezáró réteg a dokumentumobjektum., Az oldal jQuery-vel történő manipulálásának megkezdéséhez először meg kell győződnünk arról, hogy a dokumentum “készen áll”.
hozza létre ascripts.js fájlt ajs/ könyvtárában, majd írja be a következő kódot:
$(document).ready(function() { // all custom jQuery will go here});az összes jQuery kód, amelyet írsz, a fenti kódba kerül. a jQuery felismeri ezt a készenléti állapotot, így a funkcióban szereplő kód csak akkor fog futni, ha a Dom készen áll a JavaScript kód végrehajtására., Még akkor is, ha bizonyos esetekben a JavaScript nem töltődik be az elemek megjelenítéséig, beleértve ezt a blokkot is a legjobb gyakorlatnak.
a cikk bevezetésében egy egyszerű ” Hello, világ!”forgatókönyv. Ahhoz, hogy ezt a szkriptet elindítsuk, majd a jQuery segítségével szöveget nyomtassunk a böngészőbe, először egy üres blokkszintű bekezdéselemet hozunk létre a demo azonosítóval.
...<body><p></p>...jQuery-t a dollárjel jelöli ($)., A DOM-ot jQuery-vel érjük el többnyire CSS szintaxis használatával, majd egy műveletet alkalmazunk egy módszerrel. Egy alapvető jQuery példa követi ezt a formátumot.
$("selector").method();mivel az azonosítót hash szimbólum képviseli (#) A CSS-ben a demo azonosítót a #demo választóval érjük el. html() egy olyan módszer, amely megváltoztatja a HTML-t egy elemen belül.
most fogunk tenni a szokás “Hello, világ!”program inside the jQuery ready() wrapper., Adja hozzá ezt a sort ascripts.js fájlhoz a meglévő funkción belül:
$(document).ready(function() { $("#demo").html("Hello, World!");});a fájl mentése után megnyithatja a index.html fájlt a böngészőjében. Ha minden megfelelően működött, akkor megjelenik a Hello, World!kimenet.
Selectors
Selectors are how we tell jQuery which elements we want to work on. A legtöbb jQuery kiválasztó ugyanaz, mint amit ismeri a CSS-ben, néhány jQuery-specifikus kiegészítéssel., A jQuery kiválasztók teljes listáját megtekintheti a hivatalos dokumentációs oldalakon.
a választó eléréséhez használja a $ jQuery szimbólumot, majd zárójelben ().
$("selector")a kettős idézésű karakterláncokat a jQuery style guide részesíti előnyben, bár az egyszavas karakterláncokat is gyakran használják.
Az alábbiakban röviden áttekintjük a leggyakrabban használt kiválasztókat.,
általában az osztályok és azonosítók azok, amelyekkel a legtöbb osztály találkozik, ha több elemet szeretne kiválasztani,az azonosítók pedig csak egyet.
jQuery események
a ” Hello, világ!”például a kód futott, amint az oldal betöltődött, és a dokumentum kész volt, ezért nem volt szükség felhasználói interakcióra. Ebben az esetben a szöveget közvetlenül a HTML-be írhattuk volna anélkül, hogy zavarnánk a jQuery-t. A jQuery-t azonban ki kell használnunk, ha egy gombnyomással szeretnénk szöveget megjeleníteni az oldalon.,
vissza aindex.html fájlhoz, majd adjon hozzá egy<button> elemet. Ezt a gombot fogjuk használni a kattintási esemény meghallgatásához.
...<body><button>Click me</button><p></p> a click() módszert használjuk a ” Hello, World!”kód.
$(document).ready(function() { $("#trigger").click();});function() { $("#demo").html("Hello, World!");}itt a végleges kód.
$(document).ready(function() { $("#trigger").click(function() { $("#demo").html("Hello, World!"); });});mentse el a scripts.js fájlt, és frissítse a index.html fájlt a böngészőben., Most, amikor rákattint a gombra ,a ” Hello, világ!”megjelenik a szöveg.
egy esemény bármikor a felhasználó kölcsönhatásba lép a böngészővel. Általában ez az egérrel vagy a billentyűzettel történik. Az imént létrehozott példa egy kattintási eseményt használt. A hivatalos jQuery dokumentációból megtekintheti a jQuery eseménymódszerek teljes listáját. Az alábbiakban röviden áttekintjük a leggyakrabban használt eseménymódszereket.
ahhoz, hogy a képek animálódjanak vagy elhalványuljanak, amikor a felhasználó lefelé gördül a képernyőn, használja a scroll() módszert., A ESC gomb használatával történő kilépéshez használja a keydown() módszert. A legördülő harmonika menü létrehozásához használja a click() módszert.
az események megértése elengedhetetlen a dinamikus weboldal tartalom létrehozásához a jQuery segítségével.
jQuery Effects
jQuery effects kéz a kézben működik az eseményekkel, lehetővé téve animációk hozzáadását és más módon manipulálni az elemeket az oldalon.
példát mutatunk, ahol megnyitunk és bezárunk egy felugró átfedést., Míg két azonosítót használhatunk-az egyik az átfedés megnyitásához, a másik pedig a bezárásához -, ehelyett egy osztályt használunk az átfedés megnyitásához és bezárásához ugyanazzal a funkcióval.
törölje az aktuális<button>és<p> címkéket aindex.html fájl testéből, és adja hozzá a következőket a HTML dokumentumhoz:
...<body><button class="trigger">Open</button><section class="overlay"> <button class="trigger">Close</button></section>...a style.css fájlunkban minimális mennyiségű CSS-t használunk a overlay display: none elrejtéséhez, majd a képernyőn központosítjuk.,
.overlay { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 200px; width: 200px; background: gray;}vissza a scripts.js fájlba, a toggle() módszert fogjuk használni, amely a CSS display tulajdonság között none és block, kattintáskor elrejtve és megjelenítve az átfedést.
$(document).ready(function() { $(".trigger").click(function() { $(".overlay").toggle(); });});Refresh index.html. Most már a gombokra kattintva válthat a modális láthatóságra., Meg lehet változtatni toggle()fadeToggle()vagy slideToggle() hogy néhány más beépített jQuery hatások.
Az alábbiakban röviden áttekintjük a leggyakrabban használt hatásmódszereket.
-
toggle()– Toggle: átkapcsolja egy elem vagy elemek láthatóságát.show()éshide()a kapcsolódó egyirányú hatások. -
fadeToggle()– Fade Toggle: átkapcsolja a láthatóságot és animálja egy elem vagy elemek átlátszatlanságát.,fadeIn()ésfadeOut()a kapcsolódó egyirányú hatások. -
slideToggle()– A Csúszóhatású elem vagy elemek láthatóságát átkapcsolja.slideDown()ésslideUp()a kapcsolódó egyirányú hatások. -
animate()– az Animate egyedi animációs effektusokat hajt végre egy elem CSS tulajdonságán.,
a jQuery események segítségével hallgatunk egy felhasználói interakciót, például egy gombnyomást, a jQuery effektusokat pedig az elemek további manipulálására használjuk, ha a művelet megtörténik.
következtetés
ebben az útmutatóban megtanultuk, hogyan kell kiválasztani és manipulálni az elemeket a jQuery segítségével, valamint hogyan működnek együtt az események és hatások, hogy interaktív webes élményt nyújtsanak a felhasználó számára.
innentől kezdve mélyebben meg kell értened a jQuery képességeit, és a saját kódod megírásához kell vezetned.