Jquery kezdőknek, javascript
Hogy van az, hogy működik a jQuery?
Nos kezdetnek szüksége van egy keret is, akkor letölthető a projekt honlapjáról, majd inicializálja:
De a fő pontokat segít megérteni az alábbi ábra:
Hogyan juthat el az elem jQuery?
Annak érdekében, hogy megértsék, hogy a választó Önnek az összes szükséges alapvető ismereteket a CSS, mert nevezetesen az elvek CSS választó kitolja jQuery:
* $ ( "# Fejléc") - így egy elem id = "header"
* $ ( "H3") - hogy minden
elemek
* $ ( "# Div tartalom .photo") - kap minden olyan elem class = "photo", amelyek a div elem id = "content"
* $ ( "Ul li") - hogy minden
- A listából
- kattintani. Kezdeni Snap a click esemény az elem „.pane-lista li”; ha a felhasználó, ha rákattint az elemre a listában, a függvény megkeresi tag és egy átirányítást a megadott oldalra a href attribútum.
És most egy kicsit egyesíti az előző példák és hozzon létre egy több feltörekvő aljzatok (mint például hogyan szervezett postaláda a Gmail).
* Hide minden elem
az első után.
* Hide minden elem- az ötödik
* Kattintson- slideToggle metódushívások a következő elem
* Kattintson - Ez okozza slideUp módszerrel minden
* Kattintson - tárgyak elrejtésére és kijelzők , más néven slideDown eljárás minden- poslepyatogo
* Kattintson - tárgyak elrejtésére és kijelzők , más néven slideUp eljárás minden- az ötödik
Utánzás Backend'a Wordpress'a
* Add az osztály „alt”, hogy minden eleme chotnomu
(Ez az osztály megváltoztatja a háttér színét egy elem)
* Kattintson kiváltja a riasztást (riasztás), hiszen az animáció a háttér színe és az átláthatóság (BackgroundColor és átlátszóságát) számára
* Kattintson - Ez a háttérben animáció(Szín sárgára változott, és vissza), és hozzáteszi, az osztály „spam”
* Kattintson - Ez a háttérben animáció - az ötödik
Kezdjük egy egyszerű példát - csúszda panel, akkor meg kell mozgatni fel / le linkre kattintva
Az általunk forgalmazott ezt így, ha rákattint a linkre, akkor kapcsoljuk be az osztály (az „aktív” és „btn-slide”), és a dugaszoló aljzatot id = „panel” nevezni fogják / elrejtése. (Class „aktív” megváltoztatja a háttérképet helyzetben, lásd. A CSS fájlt a csatolt fájlban).
Ez a példa megmutatja, hogyan lehet szépen és könnyen eltávolítani az oldott elemek
Amikor kattintson a képre
, szülő elem megtalálható, és az átláthatóság változik lassan fényelnyelés = 1,0 fényelnyelés = elrejtés:
Most, egy példa egy kicsit bonyolultabb, de ez segít jobban megérteni a jQuery. Csak néhány sornyi kódot fog okozni a téren, hogy mozogni, átméretezés és az átláthatóság.
kapcsolódó animáció
Most, egy példa egy kicsit bonyolultabb, de ez segít jobban megérteni a jQuery. Csak néhány sornyi kódot fog okozni a téren, hogy mozogni, átméretezés és az átláthatóság.Line 0: ha progruz oldal (DOM készen áll a manipuláció)
1. sor: tapadnak click esemény az elem
2. sor: manipulálni elem- csökkenti az átláthatóság és 0,1, még kiépítése helyzetben a bal 400px, 1200 (ezredmásodperc)
3. sor: majd lassan változtassa a következő paramétereket: opacitás = 0,4, felső = 160px, magasság = 20, szélessége = 20; animáció sebessége jelzi a második paraméter. „Lassú”, „normális”, „gyors”, vagy ezredmásodperc
4. sor: opacitás = 1, akkor, bal = 0, magasság = 100, width = 100, sebesség - "lassú"
5. sor: akkor fel = 0, a sebesség - „gyors”
Line 6: majd slideUp (alapértelmezett animáció sebességét - „normál”)
7. sor: akkor slideDown, sebesség - „lassú”
8. sor: return false úgy, hogy a böngésző nem telt el referenciakéntEgy példa a végrehajtását „bunching”.
Most folytassa a kikérdezés:
Az első sorban hozzá egy osztályt az „aktív”, hogy az első elembelül
(Class „aktív” felelős a helymeghatározás a háttérkép - az ikon egy nyíl). A második sorban is elrejti az összes nem az elsőelemei
.
Amikor egy kattintás a címet, A következő elem benne
slideToggle hatást kell alkalmazni, akkor az összes többi elem
slideUp hatás alkalmazása. Következő fellépés megváltoztatja a osztályú cím az „aktív”, majd keresse meg a többi fejezetek
és távolítsa el őket az osztály „aktív”
Harmonika # 2
Ez a példa hasonló az előzőhöz, csak abban különböznek, hogy mi határozza meg az alapértelmezett nyitott socket.A CSS-ben adtunk meg minden elemére
display: none. Most arra van szükség, hogy nyissa ki a harmadik lap. Ehhez tudjuk írni a következő $ ( "Accordion2 p"). (2) egyenlettel .show (), ahol ekv jelöli egyenlőséget. Tartsuk szem előtt, hogy az indexelés nullával kezdődik:
Animáció események lebeg # 1
Ez a példa segít létrehozni egy nagyon szép animáció egy hover esemény
Amikor az egérrel az egeret a menüpont (egérráhelyezés), van egy keresést a következő elem , és animálni az átláthatóság és helye:
Animáció események lebeg # 2
Ez a példa egy kicsit bonyolultabb, mint az előző példában: tippek használt kialakulását linktitle attribútumAz első lépés az, hogy adjunk egy címke Minden elem . Amikor egy egéráthúzási esemény bekövetkezik, mi lesz a szöveg a tulajdonság „thetitle”, és mentse el a „hoverText” változó, akkor a szöveg kerül beillesztésre a címke :
Ez a példa azt mutatja, hogyan lehet a kattintható szöveg blokk, nem csak egy link
hozzon létre egy listát
- osztályú class = „ablaktábla-lista”, és azt akarjuk, hogy a tételek
- kattintani. Kezdeni Snap a click esemény az elem „.pane-lista li”; ha a felhasználó, ha rákattint az elemre a listában, a függvény megkeresi tag és egy átirányítást a megadott oldalra a href attribútum.
* $ ( "Ul li: az első") - kapnak csak az első eleme
