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 murdărim mâinile cu un anumit cod și să învățăm cum să folosim efectiv jQuery în proiectele noastre.

Voi spune asta acum - nu trebuie să înveți Javascript pentru a utiliza jQuery. Este probabil cel mai bine dacă vă gândiți la jQuery ca la o evoluție a Javascript - o modalitate mai bună de a face acest lucru - decât o simplă bibliotecă care adaugă funcționalitate. Orice Javascript de care aveți nevoie va fi preluat pe drum. Cu toate acestea, se presupune că, în calitate de dezvoltator web, aveți cunoștințe destul de bune despre HTML și CSS (și iată ghidul xHTML gratuit, dacă nu!).

Model de obiect document

jQuery se referă la traversare și manipulare a HOTĂRÂRE - D ocument SAU bject M odel. DOM este o reprezentare ierarhică a arborelui paginii, construită de browsere după ce a citit tot codul HTML. În jQuery, vom folosi terminologie cum ar fi mamă , copii , și fratii destul de des, deci ar trebui să aveți o idee despre ce înseamnă acest lucru în legătură cu DOM.

Această diagramă simplă dinw3schoolsexplică destul de bine conceptele. Ar trebui să puteți vedea că părintele elementului este, în timp ce element are un imediat

jQuery code codes here`

$ ('selector').metodă();

Gata, în titlu acolo sus. Aceasta este structura de bază a unei singure bucăți de cod jQuery pentru a manipula DOM. Ușor, nu?

Theselectorîi spune jQuery să găsească lucruri care corespund acestei reguli, și este la fel ca selectoarele CSS (și apoi câteva altele deasupra). Așa că, la fel ca în CSS, ați stiliza toate linkurile

a { }

La fel s-ar face în jQuery ca

$('a')

Acest lucru se poate face pentru orice element HTML - div, h1, span - orice. De asemenea, puteți utiliza clase și ID-uri CSS pentru a fi mai specific.

De exemplu, pentru a găsi toate legăturile cu clasa „findme”, ați folosi:

$('a.findme')

Nu trebuie să specificați de fiecare dată tipul de element - dar dacă faceți acest lucru, simplifică regula. Tocmai ai fi putut spune

$('.findme')

care ar potrivi totul cu clasa gaseste-ma , indiferent dacă a fost sau nu un link.

Pentru a utiliza un element de identificare numit, utilizați # semnează în schimb. Diferența cheie aici este că un selector ID va selecta vreodată un singur obiect, în timp ce un selector de clasă poate găsi mai multe.

cum să redimensionați straturile în Photoshop

$('#something')

Practic, dacă puteți face în CSS, atunci jQuery o va face și el. De fapt, puteți, de asemenea, niște pseudo-selectori de stil CSS3 destul de complexi, cum ar fi: primul

$('body p:first')

Ceea ce ar prinde paragraful paginii. Găsiți și elemente cu anumite atribute. Luați în considerare acest exemplu; vrem să găsim toate linkurile de pe pagină care să indice intern a te folosi de și evidențiați-le într-un fel. Iată cum le-am putea găsi:

$('a[href*='makeuseof']')

Nu-i așa mișto? Ei bine, cred că este.

Următorul port de apel ar trebui să fie Documentația API jQuery pentru selectoare . Este o listă uriașă cu toate tipurile diferite de selectoare disponibile pentru a fi utilizate și nimeni nu s-ar aștepta să le învățați pe toate.

Următoarea parte a ecuației estemetodă- ce să faci cu aceste lucruri după ce le-ai găsit pe toate - dar vom lăsa asta pentru lecția următoare. Totuși, dacă doriți să începeți să încercați diferiți selectori acum, vă sugerez să respectați următoarea metodă CSS. Aceasta necesită doi parametri - un CSS numele proprietatii , și un nou valoare pentru a atribui acelei proprietăți. Deci, pentru a oferi tuturor linkurilor o culoare de fundal roșie, veți face:

$('a').css('background-color','red');

Destul de simplu! Deși s-ar putea să nu fie de niciun folos practic, vă va permite să vedeți cu ușurință orice elemente localizate folosind selectoarele dvs. Acum mergeți mai departe și selectați - DOM vă așteaptă.

Sper că acest tutorial ți-a fost util; Am încercat să o fac cât mai simplă și mai ușor de înțeles. Simțiți-vă liber să puneți orice întrebare aveți sau să lăsați feedback, dar fiți conștienți că cu siguranță nu sunt ninja de elită jQuery.

Acțiune Acțiune Tweet E-mail 5 sfaturi pentru a vă supraîncărca mașinile VirtualBox Linux

V-ați săturat de slaba performanță oferită de mașinile virtuale? Iată ce ar trebui să faceți pentru a vă spori performanța VirtualBox.

Citiți în continuare Subiecte asemănătoare

Cultura web
Dezvoltare web
JavaScript
Programare
jQuery

Despre autor James Bruce(707 articole publicate)

James are o licență în inteligență artificială și este certificat CompTIA A + și Network +. Când nu este ocupat ca editor de recenzii hardware, îi place LEGO, VR și jocurile de societate. Înainte de a se alătura MakeUseOf, a fost tehnician de iluminat, profesor de engleză și inginer de date.

Mai multe de la James Bruce

Aboneaza-te la newsletter-ul nostru

Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

Faceți clic aici pentru a vă abona