Internet

Introducere în jQuery (Partea 2) Metode și funcții

Introducere în jQuery (Partea 2) Metode și funcții / Internet

Aceasta este o parte a unei introduceri incipiente a serverelor de programare web jQuery. Partea 1 a acoperit elementele de bază ale jQuery jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii jQuery Tutorial - Noțiuni de bază: Elementele de bază și selectorii Săptămâna trecută, am vorbit despre cât de important este jQuery pentru orice dezvoltator web modern și de ce este minunat. În această săptămână, cred că este timpul să ne cădem mâinile murdare cu niște coduri și să învățăm cum ... Citește mai multe despre cum să le includeți în proiect și pe selectori. În partea a doua, vom continua cu utilizarea de bază, pe măsură ce analizăm anumite metode pe care le puteți efectua cu privire la elementele DOM, iar câteva elemente fundamentale ale limbajului.

$ (Selector) .method ();

Dacă vă reamintiți din lecția 1, aceasta este structura de bază a unei manipulări DOM în jQuery. Manipularea DOM nu este singurul lucru pe care il poti face cu jQuery desigur, dar este cel mai usor loc pentru a incepe de la si cel mai comun, de aceea am ales-o.

Pentru a recupera rapid, partea selector a acestei instrucțiuni vă permite să utilizați nume de elemente, clase sau ID-uri asemănătoare CSS pentru a localiza părți din DOM. De exemplu, pentru a apuca toate

cu numele de clasă .ascuns, am folosi:

$ ( 'Div.hidden')

A doua parte a acestei ecuații este metoda de a efectua aceste DIV-uri odată ce le-am găsit (dacă ele există deloc sau pot fi doar una “potrivire” articol). Rețineți că jQuery va returna vreodată un element pentru selecțiile de identificare, deoarece ID-urile ar trebui să se refere la elementele unice. Dacă aveți de gând să aveți mai mult de ceva, trebuie să fie definită ca o clasă în CSS.

Pe metode apoi; ce puteți face cu elementele DOM oricum?

În primul rând, te-am prezentat la .css ultima dată pentru a putea să o utilizați pentru testare. Formatul este simplu:

.css ( 'proprietate', 'valoare');

Orice lucru definit de CSS poate fi ajustat prin jQuery - culori, transparență, locație, dimensiune - pentru a numi doar câteva. Schimbarea este imediată.

Dacă doriți să animați modificările CSS, atunci am o veste bună pentru dvs.; există și o metodă numită .anima(). Este ceva mai complex:

.animate ( 'proprietate': 'value', viteză);

Ca exemplu:

.animate ( 'opacitate': '0,25', 'înălțimea': '100px', 'rapid');

În acest moment, s-ar putea să vă întrebați ce sunt bretelele pentru buze; ele sunt numite a “obiect literal”, și sunt de obicei utilizate pentru a crea o listă de Valoarea proprietății perechi, cam ca un matrice indexată dacă veniți din alte limbi. Veți folosi foarte mult în jQuery, așa că voi spune din nou - vă obișnuiți să verificați în mod corespunzător pentru paranteze închise și bretele!

Check out această pagină pentru o mulțime de exemple de lucru ale metodei animate.

Pe lângă manipularea proprietăților CSS ale unui element, puteți ajusta conținutul acestuia cu .(), .html () și .val () (val este pentru conținutul elementelor de formă). Aceste metode acționează ca ambele a stabilitși obțineTERS; dacă nu specificați o valoare, ei vor obține valoarea curentă. Dacă specificați o valoare, acestea vor înlocui valoarea curentă.

Iată câteva exemple rapide:

Obțineți valoarea curentă a câmpului de nume în formularul de comentarii și alocați-o unei variabile comment_name:

var commenter_name = $ (# comentariu-form # nume) .val ();

Setați valoarea la valoarea apucată de la COMMENTER_NAME:

. $ ( 'Span.name') text (COMMENTER_NAME);

Apoi, avem o mare varietate de metode de clonare, deplasare, inserare sau ștergere a părților DOM. Imaginația ta este limita, într-adevăr.

Să presupunem că doriți să inserați dinamic un bloc de imagine publicitar după fiecare al treilea paragraf din coloana de conținut, dar o faceți în Javascript, astfel încât sarcina inițială a paginii să poată fi păstrată curată. Sună destul de complexă, nu? Cu greu… 

$ ('div # conținut p: nth-copil (3n)') după ('„);

Spre deosebire de asta, i-am cerut lui jQuery:

  1. Găsiți div cu un ID de “conţinut”
  2. Găsiți p-urile conținute în div
  3. Filtrează la fiecare 3 p folosind pseudo selectorul nth-child (mai multe despre aici)
  4. Introduceți un img arbitrar după fiecare element de potrivire

Nu pot enumera toate metodele aici și nici nu vrei să citești asta. Ideea este că există o metodă de a face destul de mult ceea ce vă puteți gândi atunci când vine vorba de manipulare, așa că verificați API-ul pentru unul pe care îl puteți folosi.

De asemenea, rețineți că ar putea exista mai multe modalități de a face ceva. Dacă, de exemplu, nu puteți îngusta obiectul corect insertAfter (), poate că te gândești la găsirea Următor → copil în jos și folosind insertBefore () in schimb.

Metoda de înlănțuire

În ultimul timp, să avem un cuvânt rapid despre legarea metodei, practic doar pentru că este minunat. În primul rând, să luăm în considerare următoarele linii de cod:

$ ( '# Meniul nav') fadeIn ( 'rapid').; $ ( '# Meniul nav') addClass ( 'beingShown').; $ ( '# Meniul nav') css ( 'marja de-dreapta', '10px').;

Suna destul de rezonabil, nu? Dar puteți face același lucru într-o singură linie:

$ ( '# Meniul nav') fadeIn ( 'rapid') addClass ( 'beingShown') css ( 'marja de-dreapta', '10px')...;

Asta face exact același lucru și se numește metoda de înlănțuire. Din moment ce aproape toate metodele jQuery returnează un obiect jQuery, fiecare se poate alimenta în următorul. Acest lucru înseamnă mai puțin cod - ceea ce este întotdeauna un lucru bun - dar de fapt, de asemenea, se execută mai repede.

De ce? Ei bine, de fiecare dată când invocă jQuery de bază $ comandă și selector, îi cereți să caute prin arborele DOM în căutarea unui element de potrivire. Când procedezi în lanț, nu mai trebuie să te referi înapoi la DOM, deoarece știe unde sunt acum și poate efectua metoda instantaneu.

Asta e pentru ziua de azi și cred că am acoperit probabil destul de mult. Acum ar trebui să fiți înarmați cu abilitatea de a efectua unele manipulări DOM destul de grele, așa că aveți un du-te, lanțați-vă metodele împreună și faceți o mizerie adevărată a paginii. Deocamdată, veți dori să plasați scripturile în subsol pentru a da restul timpului de încărcare a paginii. Săptămâna viitoare vom aborda problema de a face jQuery să facă lucruri numai atunci când totul se încarcă corect cu evenimente, iar cazul curios al funcțiilor anonime.

Dacă tocmai ați dat peste acest post, probabil că sunteți probabil un dezvoltator de web și ați putea dori să verificați toate articolele WordPress și blogging-ul nostru sau chiar cele mai bune pagini WordPress Plugins.