How To Use jQuery In Angular

Joskus meidän on käytettävä sitä

Bhargav Bachina

Follow

Maaliskuu 2, 2020 – 3 min read

Kuvan on ottanut: Greg Rakozy on Unsplash

Angular on Javascript-kehys, jonka avulla voimme rakentaa yritys-tason front end -sovelluksia helposti ja kantaaottavasti. Toisaalta jQuery on pieni mutta ominaisuuksiltaan tehokas javascript-kirjasto, joka auttaa käsittelemään HTML DOM:ia vähemmällä javascript-koodilla. Nyt sinulla on kysymys, että miksi helvetissä meidän pitäisi käyttää jQuerya Angularin kanssa ja mihin sitä tarvitaan?

On joitakin tilanteita, joihin törmää Angular-sovelluksia rakentaessa, jolloin on ehdottoman välttämätöntä käyttää jQueryn kaltaista kirjastoa saadakseen jotain aikaan. Yksi esimerkki, joka tulee mieleen, on lomakkeen lähettäminen ulkoiselle sivustolle Angular-sovelluksestasi.

Kuvittele tilanne, jossa olet Angularilla rakennetulla sivustolla ja ostat jotain. Sinulla on linkki, joka vie sinut toiselle verkkosivustolle tilauksen loppuunsaattamiseksi kaikilla tällä verkkosivustolla syötetyillä tiedoilla. On olemassa tapoja toteuttaa tämä ilman jQuerya, mutta luon vain hypoteettisen skenaarion, jossa saatat käyttää jQuerya. Tässä postauksessa näemme, miten jQuerya käytetään Angularin kanssa.

  • Mikä on jQuery
  • Esimerkkiprojekti
  • jQuery Angularin kanssa
  • Yhteenveto
  • Yhteenveto
  • Loppupäätelmä

jQuery on yksinkertainen, pieni, mutta silti ominaisuuksiltaan runsas Javascript-kirjastokirjasto, joka auttaa manipuloimaan HTML:n DOM:ia vähemmällä Javascriptillä. Tässä on jQueryn virallinen verkkosivusto, jonka voit käydä läpi.

Tehdään yksi yksinkertainen projekti jQueryn ymmärtämiseksi paremmin niille, jotka eivät ole sitä vielä käyttäneet. Tässä on yksinkertainen lomake, joka ottaa etunimen ja sukunimen. Kun klikkaamme lähetä-painiketta, nimen pitäisi näkyä lomakkeen alareunassa.

Esimerkki jQuery-projektista

Tässä on koodi edellä mainittua varten. Koko logiikka on laitettu script-tagin sisälle. Voimme kysyä ja asettaa DOM-elementtejä jQueryn avulla id:n, CSS-valitsimien jne. perusteella. Voimme esimerkiksi kysyä etunimeä $("#fname").val:llä ja asettaa sen tällä $("#fn").val(firstName).

jQuery.html

.