La setmana passada vaig parlar de la importància que té jQuery per a qualsevol desenvolupador web modern i per què és increïble. Aquesta setmana, crec que és hora que ens embrutem les mans amb algun codi i que aprenguem a fer ús de jQuery als nostres projectes.

Ho diré ara: no cal que apreneu Javascript per utilitzar jQuery. Probablement és millor si penseu en jQuery com una evolució de Javascript (una millor manera de fer-ho) que simplement una biblioteca que afegeix funcionalitat. Qualsevol Javascript que necessiteu serà recollit en el camí. Tanmateix, se suposa que, com a desenvolupador web, teniu un bon coneixement d'HTML i CSS (i aquí teniu una guia xHTML gratuïta i útil si no!).

Model d'objectes de documents

jQuery es tracta de la travessia i manipulació del fitxer JUDICI - el D ocument O bject M odel. El DOM és una representació jeràrquica de l'arbre de la pàgina, creada pels navegadors després de llegir tot el codi HTML. A jQuery, utilitzarem terminologia com ara pare , nens , i germans amb molta freqüència, de manera que hauríeu de tenir una idea del que això significa en relació amb el DOM.

Aquest senzill diagrama dew3schoolsexplica bastant bé els conceptes. Hauríeu de poder veure que el pare de l'element és, mentre que el element té un element immediat

jQuery code codes here`

$ ( 'selector').mètode();

Això és tot, al títol allà dalt. Aquesta és l’estructura bàsica d’un sol fragment de codi jQuery per manipular el DOM. Fàcil, oi?

Elselectordiu a jQuery que trobi coses que coincideixin amb aquesta regla, i és el mateix que els selectors CSS (i després alguns més a la part superior). Així, igual que a CSS, estilitzaríeu tots els enllaços

a { }

El mateix es faria a jQuery que

$('a')

Això es pot fer per a qualsevol element HTML (div, h1, span). També podeu utilitzar classes i identificadors CSS per ser més específics.

Per exemple, per trobar tots els enllaços amb la classe 'findme', utilitzeu:

$('a.findme')

No cal que especifiqueu el tipus d’element cada vegada, però si ho feu, simplement fa que la regla sigui més específica. Es podria haver dit

$('.findme')

que coincidiria tot amb la classe Troba'm , fos o no un enllaç.

Per utilitzar un element d'identificació anomenat, utilitzeu el fitxer # signa en el seu lloc. La diferència clau aquí és que un selector d’ID només sempre seleccionarà un objecte, mentre que un selector de classe pot trobar-ne més d’un.

com fer un gif al photoshop cc 2018

$('#something')

Bàsicament, si podeu fer-ho a CSS, jQuery també ho farà. De fet, també podeu introduir pseudoselectors d’estil CSS3 bastant complexos com: primer

$('body p:first')

Que agafaria el paràgraf de la pàgina. També trobareu elements amb certs atributs. Penseu en aquest exemple; volem trobar tots els enllaços de la pàgina que apunten internament makeuseof i ressaltar-los d’alguna manera. A continuació s’explica com podríem trobar-los:

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

No és genial? Bé, crec que sí.

El vostre pròxim port d'escala hauria de ser el Documentació de l'API jQuery per a selectors . És una llista enorme de tots els tipus de selectors disponibles per utilitzar, i ningú esperaria que els apreneu tots.

La següent part de l’equació ésmètode- Què fer amb aquestes coses un cop les heu trobat totes, però ho deixarem per a la propera lliçó. Ara bé, si voleu començar a provar diversos selectors, us proposo que seguiu el següent mètode css. Això necessita dos paràmetres: un CSS Nom de la propietat , i una nova valor per assignar a aquesta propietat. Per tant, per donar a tots els enllaços un color de fons vermell, faria:

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

Prou senzill! Tot i que pot ser que no sigui d’ús pràctic, us permetrà veure fàcilment qualsevol element ubicat amb els vostres selectors. Ara aneu endavant i seleccioneu: el DOM us espera.

Espero que aquest tutorial us hagi estat útil; He intentat que sigui el més senzill i fàcil d’entendre possible. No dubteu a fer qualsevol pregunta que tingueu o a deixar comentaris, però tingueu en compte que segur que no sóc un ninja jQuery d’elit.

Compartir Compartir Tweet Correu electrònic 5 consells per sobrecarregar les vostres màquines VirtualBox Linux

Cansat del baix rendiment que ofereixen les màquines virtuals? Això és el que heu de fer per millorar el rendiment del VirtualBox.

Llegiu a continuació Temes relacionats

Cultura web
Desenvolupament web
JavaScript
Programació
jQuery

Sobre l'autor James Bruce(707 articles publicats)

James té un BSc en Intel·ligència Artificial i està certificat CompTIA A + i Network +. Quan no està ocupat com a editor de ressenyes de maquinari, li agrada LEGO, VR i els jocs de taula. Abans d’incorporar-se a MakeUseOf, era tècnic d’il·luminació, professor d’anglès i enginyer de centres de dades.

Més de James Bruce

Subscriu-te al nostre butlletí

Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.

Feu clic aquí per subscriure-us