Cum funcționează jQuery?
Ei bine, pentru început, veți avea nevoie de cadrul propriu-zis, îl puteți descărca de pe pagina de pornire a proiectului și apoi îl inițializați:
Următoarea diagramă vă va ajuta să înțelegeți punctele principale:
Cum obțin un element utilizând jQuery?
Pentru a înțelege cum funcționează selectorul, aveți nevoie de cunoștințele de bază despre CSS, deoarece este din principiile CSS că selectorul jQuery este respins:
* $ ("# Header") - obținerea elementului cu id = "header"
* $ ("H3") - obțineți totul
elementele
* $ ("Div # content .photo") - obțineți toate elementele cu class = "photo" care sunt în elementul div cu id = "content"
* $ ("Ul li") - obțineți totul
- din listă
- accesabile. Mai întâi, vom lega la evenimentul de clic pentru elementul ".pane-list li"; Când utilizatorul face clic pe elementul de listă, funcția noastră va căuta eticheta și va redirecționa către pagina specificată în atributul href.
Ei bine, acum vom combina ușor exemplele anterioare și vom crea o serie de panouri pliabile (cum ar fi cele din Gmail).
* ascunde toate elementele
după primul.
* ascunde toate elementele- după a cincea
* faceți clic pe- Apelează metoda slideToggle pentru elementul următor
* faceți clic pe - apelează metoda slideUp pentru toți
* faceți clic pe - ascunde un element și afișează , De asemenea, metoda slideDown este solicitată pentru toți- după a cincea
* faceți clic pe - ascunde un element și afișează , De asemenea, metoda slideUp este solicitată pentru toți- după a cincea
Imitarea backend-ului Wordpress
* adăugați clasa "alt" fiecărui element uniform
(această clasă modifică culoarea de fundal a elementului)
* faceți clic pe inițiază apariția mesajului (alertă), precum și animația culorii și transparenței de fundal (backgroundColor și opacitate) pentru
* faceți clic pe - provoacă animație în fundal în(culoarea se schimbă în galben și spate) și adaugă clasa "spam"
* faceți clic pe - provoacă animație în fundal în - după a cincea
Să începem cu un exemplu simplu - un panou de diapozitive, se va mișca în sus / jos clic pe link
Implementăm acest lucru în modul următor, făcând clic pe link, vom schimba clasa (între "active" și "btn-slide") și panoul cu id = "panel" va apărea / ascunde. (clasa "activă" modifică poziția imaginii de fundal, consultați fișierul CSS din atașament).
Acest exemplu va arăta cât de frumos și ușor este eliminarea elementelor de dizolvare
Când faceți clic pe o imagine
, elementul părinte este găsit, iar transparența sa se va schimba lent de la opacitate = 1,0 la opacitate = ascunde:
Acum exemplul este mai complicat, dar vă va ajuta să înțelegeți mai bine jQuery. Numai câteva rânduri de cod vor determina mutarea patratului, modificarea mărimii și a transparenței.
Animație asociată
Acum exemplul este mai complicat, dar vă va ajuta să înțelegeți mai bine jQuery. Doar câteva linii de coduri vor determina mutarea patratului, modificarea mărimii și a transparenței.Linia 0: când pagina este reîncărcată (DOM este pregătit pentru manipulări)
Linia 1: Legătura la evenimentul de clic pentru element
Linia 2: manipularea elementului- reduce transparența la 0.1, crește poziția din stânga cu încă 400 de pixeli, cu o viteză de 1200 (milisecunde)
Linia 3: modificați lent următorii parametri: opacity = 0.4, top = 160px, height = 20, width = 20; viteza de animație este indicată de al doilea parametru. "Slow", "normal", "rapid" sau în milisecunde
Linia 4: opacitatea = 1, stânga = 0, înălțimea = 100, lățimea = 100, viteza este "lentă"
Linia 5: apoi top = 0, viteza - "rapid"
Linia 6: apoi slideUp (cu viteza implicită de animație - "normal")
Linia 7: apoi slideDown, viteza - "lent"
Linia 8: return false, astfel încât browserul să nu urmeze linkulUn exemplu de punere în aplicare a "acordeonului".
Acum, să începem analiza zborurilor:
Prima linie adaugă clasa "activă" la primul elementîn
(clasa "activă" este responsabilă pentru poziționarea imaginii de fundal - pictogramele cu o săgeată). În al doilea rând ascundem nu toate primeleelemente din interior
.
Când există un clic pe titlu, pentru următorul element din el
Efectul slideToggle va fi aplicat, apoi pentru toate celelalte elemente
se va aplica efectul slideUp. Următoarea acțiune schimbă clasa antet la "activ", apoi căutați toate celelalte antete
și eliminați de la ei clasa "activă"
Garmoshka # 2
Acest exemplu este similar cu cel precedent, diferă numai prin faptul că specificăm un panou implicit deschis.În CSS, am specificat pentru toate elementele
afișare: niciuna. Acum trebuie să deschidem al treilea panou. Pentru aceasta putem scrie următorul $ (". Accordion2 p"). Eq (2) .show (), unde eq înseamnă egalitate. Rețineți că indexarea începe de la zero:
Animație pentru hover # 1
Acest exemplu vă va ajuta să creați o animație foarte frumoasă pentru evenimentul hover
Când faceți mouse-ul peste elementul din meniu (mouseover), se caută următorul element , iar transparența și locația ei sunt animate:
Animație pentru hover # 2
Acest exemplu este puțin mai complicat decât cel precedent: pentru a genera un indiciu, se utilizează atributul linktitleMai întâi, adăugați o etichetă în fiecare element . Când apare evenimentul mouseover, luăm textul din atributul "thetitle" și îl stocăm în variabila "hoverText", atunci acest text va fi introdus în etichetă :
Acest exemplu demonstrează modul de a face un bloc cu un text pe care să îl poți da clic, și nu doar un link
Creați o listă
- cu clasa de clasă = "panoul-list" și dorim să facem elemente
- accesabile. Mai întâi, vom lega la evenimentul de clic pentru elementul ".pane-list li"; Când utilizatorul face clic pe elementul de listă, funcția noastră va căuta eticheta și va redirecționa către pagina specificată în atributul href.
* $ ("Ul li: first") - obțineți doar primul element
