JavaScript vs jQuery: tärkeimmät erot, jotka sinun on tiedettävä

Tässä JavaScript vs jQuery -ohjelmassa selvitetään, mikä on parempi kuin toinen. Molemmat ovat tehokkaita ja niitä käytetään verkkokehityksessä samaan tarkoitukseen.

Olemme tunteneet JavaScriptin ja JQueryn jo muutaman vuoden ajan. JavaScript keksittiin aikaisemmin kuin jQuery. Molemmat ovat tehokkaita ja niitä käytetään verkkokehityksessä, ja niitä käytetään samaan tarkoitukseen eli tekemään verkkosivusta interaktiivinen ja dynaaminen. Toisin sanoen ne tuovat elämää verkkosivuille. Ihmiset saattavat miettiä, miksi näitä kahta erillistä käsitettä käytetään samaan tarkoitukseen? Tässä JavaScript vs jQuery -artikkelissa selvitetään, mikä on parempi kuin toinen seuraavassa järjestyksessä:

JavaScript: Tehokas kieli web-kehityksessä

JavaScript on komentosarjakieli, jota käytetään lisäämään interaktiivisuutta verkkosivuillemme. Se on yksi kolmesta ydinteknologiasta HTML: n ja CSS: n rinnalla, joita käytetään verkkosivujen luomiseen. Vaikka HTML ja CSS määrittelevät verkkosivun rakenteen ja verkkosivujen ulkoasun / tyylin, JavaScriptiä käytetään tekemään verkkosivusta dynaaminen lisäämällä siihen vuorovaikutteisuutta, mikä tarkoittaa, että JavaScriptillä voimme lisätä koodia hiiren napsautukseen, hiiren päälle ja muihin tapahtumia verkkosivulla ja paljon muuta.





JavaScript- javascript vs jquery - edureka

Kaikki verkkoselaimet tukevat JavaScriptiä, ja verkkoselaimissa on sisäänrakennettu JavaScript-moottori JavaScript-koodin tunnistamiseksi ja sen kanssa työskentelemiseksi. Siksi JavaScript on pääosin asiakaspuolen kieli. Sitä on yksi kieli, jota voidaan käyttää sekä menettelykielenä että prototyyppipohjaisena olio-kielenä. Kun käytämme ensisijaista JavaScriptiä, työskentelemme menettelykielen kanssa, kun taas edistynyt JavaScript käyttää olio-käsitteitä.



Siirrytään eteenpäin JavaScript vs jQuery -sovelluksellamme ja ymmärretään JavaScriptistä kehitetty kirjasto.

jQuery: JavaScriptistä kehitetty kirjasto

Vuosien mittaan JavaScript on osoittautunut tehokkaaksi kieleksi web-kehitykseen. On tullut monia kirjastoja ja kehyksiä, jotka on rakennettu JavaScriptin päälle. Nämä kirjastot ja kehykset on kehitetty laajentamaan JavaScriptiä, tekemään paljon asioita sen kanssa ja helpottamaan kehittäjän työtä.



jQuery on yksi tällainen JavaScript-kirjasto, joka on rakennettu siitä. Se on John Resignin keksimä suosituin JavaScript-kirjasto, joka julkaistiin tammikuussa 2006 BarCamp NYC: ssä. jQuery on ilmainen avoimen lähdekoodin kirjasto, joka on lisensoitu MIT-lisenssillä. Tällä on tehokas ominaisuus selainten välisessä yhteensopivuudessa. Se voi helposti käsitellä selainten välisiä ongelmia, joita voimme kohdata JavaScriptillä. Siksi monet kehittäjät käyttävät jQueryä välttääkseen selainten välisiä yhteensopivuusongelmia.

Siirrytään nyt JavaScript vs jQuery -blogillemme ja katsotaan miksi jQuery luotiin.

Miksi jQuery luodaan ja mitkä ovat jQueryn erityisominaisuudet?

JavaScriptissä meidän on kirjoitettava paljon koodia perustoiminnoille, kun taas jQueryn kanssa samat toiminnot voidaan tehdä yhdellä koodirivillä. Siksi kehittäjien on helpompaa työskennellä jQueryn kuin JavaScriptin kanssa.

  • Vaikka JavaScript on peruskieli, josta jQuery on kehittynyt, jQuery tekee tapahtumien käsittelystä, DOM-manipuloinnista, Ajax-puhelut ovat paljon helpompia kuin JavaScript. jQuery antaa meille myös mahdollisuuden lisätä animoituja tehosteita verkkosivustollemme, joka vie paljon tuskaa ja koodirivejä JavaScriptillä.
  • jQuerylla on sisäänrakennetut laajennukset, jotka suorittavat toiminnon verkkosivulla. Meidän on vain sisällytettävä tai tuotava laajennus verkkosivustollemme sen käyttöä varten. Laajennusten avulla voimme siis luoda animaatioita ja vuorovaikutuksia tai tehosteita.
  • Voimme tehdä myös mukautetun laajennuksemme jQueryllä. Jos vaadimme animaation tekemistä verkkosivulle tietyllä tavalla, voimme kehittää vaatimuksen mukaisen laajennuksen ja käyttää sitä verkkosivullamme.
  • jQueryllä on myös korkean tason käyttöliittymäkirjasto. Tässä widget-kirjastossa on laaja valikoima laajennuksia, jotka voimme tuoda verkkosivustollemme ja käyttää sitä käyttäjäystävällisten verkkosivujen luomiseen.

Ymmärretään ero.

JavaScript vs. jQuery

ominaisuudetJavaScriptjQuery
OlemassaoloJavaScript on itsenäinen kieli, ja se voi olla olemassa yksin.jQuery on JavaScript-kirjasto. Sitä ei olisi keksitty, jos JavaScriptiä ei olisi. jQuery on edelleen riippuvainen Javascriptista, koska se on muunnettava JavaScriptiksi, jotta selaimen sisäänrakennettu JavaScript-moottori tulkitsee ja ajaa sen.
KieliSe on korkean tason tulkittu asiakaspuolen komentosarjakieli. Tämä on yhdistelmä ECMA-komentosarjaa ja DOM (Document Object Model)Se on kevyt JavaScript-kirjasto. Sillä on vain DOM
KoodausJavaScript käyttää enemmän koodirivejä, koska meidän on kirjoitettava oma koodijQuery käyttää vähemmän koodiriviä kuin JavaScript samaa toimintoa varten kuin koodi on jo kirjoitettu sen kirjastoon, meidän on vain tuotava kirjasto ja käytettävä kirjastossa olevaa vastaavaa toimintoa / menetelmää koodissamme.
KäyttöJavaScript-koodi kirjoitetaan HTML-sivun komentotagin sisään
Meidän on tuotava jQuery CDN: stä tai paikasta, johon jQuery-kirjasto ladataan, jotta voimme käyttää sitä. jQuery-koodi kirjoitetaan myös HTML-sivun komentotagin sisään.
AnimaatiotVoimme tehdä animaatioita JavaScriptiä monilla koodiriveillä. Animaatiot tehdään pääasiassa manipuloimalla HTML-sivun tyyliä.JQueryssä voimme lisätä animaatioefektejä helposti pienemmällä koodirivillä.
KäyttäjäystävällisyysJavaScript voi olla hankala kehittäjälle, koska se voi viedä useita koodirivejä toiminnon saavuttamiseksijQuery on käyttäjäystävällisempi kuin JavaScript, ja siinä on muutama koodirivi
Selainten välinen yhteensopivuusJavaScriptissä joudumme ehkä käsittelemään selainten yhteensopivuutta kirjoittamalla ylimääräisen koodin tai kiertotavan.jQuery on yhteensopiva selainten kanssa. Meidän ei tarvitse huolehtia kiertotavan tai ylimääräisen koodin kirjoittamisesta, jotta koodimme olisi yhteensopiva selaimen kanssa.
EsitysPuhdas JavaScripti voi olla nopeampi DOM-valinnassa / käsittelyssä kuin jQuery, koska selain käsittelee JavaScriptin suoraan.jQuery on muunnettava JavaScriptiksi, jotta se toimii selaimessa.
Tapahtumien käsittely, vuorovaikutteisuus ja Ajax-puhelutKaikki nämä voidaan tehdä JavaScriptiä, mutta joudumme ehkä kirjoittamaan useita koodirivejä.Kaikki nämä voidaan tehdä helposti jQueryllä, jossa on vähemmän koodirivejä. JQueryssä on helpompaa lisätä vuorovaikutteisuutta, animaatioita ja myös ajax-puheluita, koska toiminnot on jo määritelty kirjastossa. Käytämme vain näitä toimintoja koodissamme vaadituissa paikoissa.
SanallisuusJavaScript on monipuolinen, koska toiminnallisuutta varten on kirjoitettava useita koodirivejäjQuery on ytimekäs ja käyttää vähemmän koodiriviä, joskus vain yhtä koodiriviä.
Koko ja painoKielenä se on painavampi kuin jQueryKoska se on kirjasto, se on kevyt. Siinä on pienennetty versio koodistaan, mikä tekee siitä kevyen.
Uudelleenkäytettävyys ja ylläpidettävyysJavaScript-koodi voi olla monipuolinen, ja siksi sitä voi olla vaikea ylläpitää ja käyttää uudelleen.Kun koodirivejä on vähemmän, jQuery on ylläpidettävämpi, koska meidän on vain kutsuttava koodissamme olevat ennalta määritetyt toiminnot jQuery-kirjastossa. Tämä saa meidät myös käyttämään jQuery-toimintoja helposti uudelleen koodin eri paikoissa.

Jatketaan JavaScriptin ja jQueryn erolla esimerkin avulla.

JavaScript vs jQuery esimerkkien avulla

Tarkastellaan esimerkkejä.

JavaScriptin ja jQueryn lisääminen HTML-dokumenttiin

JavaScript lisätään suoraan HTML-dokumenttiin tunnisteen sisään tai ulkoinen JavaScript-tiedosto voidaan lisätä HTML-asiakirjaan käyttämällä src-määritettä.
Kirjoitettu suoraan komentotunnisteen sisään:

hälytys ('Tämä hälytysruutu kutsuttiin lataustapahtuman kanssa')

JQueryn käyttöä varten lataamme tiedoston sen verkkosivustolta ja viittaamme ladatun jQuery-tiedoston polkuun SCRIPT-tagin src-määritteeseen, tai voimme saada sen suoraan CDN: ltä (Content Delivery Network).

 

CDN: n käyttö :

 

Ymmärretään DOM: n liikkuminen ja manipulointi

mikä on kokki devopsissa

DOM: n kulku ja manipulointi

JavaScript:

Voimme valita DOM-elementin JavaScriptista käyttämällä document.getElementById () -menetelmää tai käyttämällä document.querySelector () -menetelmää.

var mydiv = document.querySelector (“# div1”)

tai

document.getElementById (“# div1”)

JQueryssä:

Tässä meidän on käytettävä vain symbolia $ suljettimessa olevan valitsimen kanssa.

$ (selector) $ (“# div1”) - Valitsin on id ”div1” $ (“. div1”) - Valitsin on luokka 'div1' $ (“p”) - Valitsin on HTML-sivu

Edellä olevassa lausekkeessa $ on merkki, jota käytetään jQueryn käyttämiseen, valitsin on HTML-elementti.

Tyylien lisääminen JavaScriptiin:

document.getElementById ('myDiv'). style.backgroundColor = '# FFF'

Tyylien lisääminen jQuery:

$ ('# myDiv'). css ('taustaväri', '# FFF')

#MyDiv-valitsin viittaa myDiv-tunnisteeseen

DOM-elementtien valinta ja käsittely on paljon suppeampaa jQueryssä kuin JavaScriptissä.

Siirtyminen tapahtumien käsittelyyn.

Tapahtumien käsittely

JavaScriptissä valitsemme HTML-elementin:

document.getElementById ('# button1'). addEventListener ('click', myCallback) -toiminto myCallback () {konsoli ('myCallback-toiminnon sisällä')}

Täällä getElementById () -menetelmää käytetään elementin valitsemiseen sen tunnuksen perusteella, minkä jälkeen lisätään tapahtumakuuntelija tapahtumaan addEventListener () -menetelmällä. Tässä esimerkissä myCallback-toiminto lisätään kuuntelijaksi napsautustapahtumaan.

Voimme käyttää myös anonyymia toimintoa yllä olevassa esimerkissä:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('funktion sisällä')})

EventListener voidaan poistaa käyttämällä removeEventListener () -menetelmää

document.getElementById (“# button1”). removeEventListener (“click”, myCallback)

JQueryssä

ero pidennyksen ja työkoneen välillä

jQuery on määrittänyt ennalta tapahtumia melkein kaikille DOM-toiminnoille. Voimme käyttää tiettyä jQuery-tapahtumaa toimintaan.

$ (“P”). Napsauta (function () {// click action})

Muita esimerkkejä ovat:

$ (“# Button1”). Dblclick (function () {// kaksoisnapsautustapahtuma html-elementissä, jonka tunnus on ”button1”}

JQuery ‘on’ -menetelmää käytetään lisäämään yksi tai useampi tapahtuma DOM-elementtiin.

$ (“# Button1”). Päällä (“click”, function () {// action here})

Voimme lisätä useita tapahtumia ja useita tapahtumankäsittelijöitä on-menetelmällä.

$ (“Button1”). Päällä ({click: function () {// action here}, dblclick: function () {// action here}})

Kahdella tai useammalla tapahtumalla voi olla sama käsittelijä kuin alla:

$ (“# Button1”). On (”click dblclick”, function () {// action here})

Siksi näemme, että pienemmällä ja ytimekkäällä koodilla tapahtumien käsittely on helpompaa jQueryssä kuin JavaScriptissä.

Ajax-puheluiden kanssa jatkaminen.

Ajax-puhelut

JavaScript-muodossa

JavaScript käytti XMLHttpRequest-objektia Ajax-pyynnön lähettämiseen palvelimelle. XMLHttpRequestillä on useita tapoja tehdä Ajax-puhelu. Kaksi yleistä menetelmää ovat avoimia (method, URL, async, user, PSW), send () ja send (string).
Luodaan ensin XMLHttpRequest:

var xhttp = new XMLHttpRequest () Soita tämän objektin avulla sitten avoimeen menetelmään: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Avoin menetelmä tekee hakupyynnön palvelimelle / sijainnille, true määrittää, että pyyntö on asynkroninen. Jos arvo on väärä, se tarkoittaa, että pyyntö on synkroninen.

Lähetyspyynnön tekeminen:

var xhttp = new XMLHttpRequest () Soita tämän objektin avulla avoimeen menetelmään ja kirjoita lähetyspyyntö: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Jos haluat lähettää tietoja pyynnön kanssa, käytämme xhttp: n setRequestHeader-menetelmää määrittääkseen lähetettävän datan tyypin ja lähetystapa lähettää tiedot avain / arvo-pareittain:

xhttp.setRequestHeader ('Sisältötyyppi', 'application / x-www-form-urlencoded') xhttp.send ('nimi = Ravi & sukunimi = Kumar')

JQueryssä

jQueryllä on useita sisäänrakennettuja menetelmiä Ajax-puhelujen soittamiseksi. Näillä menetelmillä voimme soittaa mitä tahansa palvelimelta tulevaa dataa ja päivittää osan verkkosivusta tiedoilla. jQuery-menetelmät tekevät Ajax-puhelusta helppoa.
JQuery load () -menetelmä: Tämä menetelmä hakee tietoja URL-osoitteesta ja lataa tiedot HTML-valitsimeen.
$ (“P”). Lataa (URL, data, takaisinsoitto)
URL on datalle kutsuttu paikka, valinnainen data-parametri on tiedot (avain / arvo-parit), jotka haluamme lähettää puhelun mukana, ja valinnainen parametri 'callback' on menetelmä, jonka haluamme suorittaa latauksen jälkeen on suoritettu.

JQuery $ .get () ja $ .post () -menetelmät: Tämä menetelmä hakee tietoja URL-osoitteesta ja lataa tiedot HTML-valitsimeen.
$ .get (URL, takaisinsoitto)
URL on data, jota kutsutaan tiedoksi, ja takaisinsoitto on menetelmä, jonka haluamme suorittaa lataamisen jälkeen.

$ .post (URL, data, takaisinsoitto)
URL on paikka, jota kutsutaan tiedoille, data on avain / arvo-pari / s, jotka haluamme lähettää puhelun kanssa, ja takaisinsoitto on menetelmä, jonka haluamme suorittaa kuormituksen päätyttyä. Tässä data- ja takaisinsoittoparametrit ovat valinnaisia.

jQuery Ajax -puhelut ovat ytimekkäämpää kuin JavaScript. JavaScriptissä käytämme XMLHTTPRequest-objektia, jQueryssä meidän ei tarvitse käyttää tällaista objektia.

Animaatio jatkuu.

Animaatio

JavaScript-muodossa

JavaScriptillä ei ole erityistä animaatiotoimintoa, kuten jQuery animate () -toiminto. JavaScript-animaatio saavutetaan pääasiassa manipuloimalla elementin tyyliä tai käyttämällä CSS-muunnos-, käännös- tai animointitoimintoja. JavaScript käyttää animaatioefekteihin myös setInterval (), clearInterval (), setTimeout () ja clearTimeout () -menetelmiä.

setInterval (myAnimation, 4) -toiminto myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20 astetta) '}

Animaatio JavaScriptissä on pääasiassa CSS-ominaisuuksien manipulointia.

JQueryssä

jQueryllä on monia sisäänrakennettuja menetelmiä animaatioiden tai tehosteiden lisäämiseksi HTML-elementteihin. Tarkistetaan muutama niistä.
Animoi () -menetelmä: Tätä menetelmää käytetään animaation lisäämiseen elementtiin.

$ ('# button1'). napsauta (function () {$ ('# div1'). elävä ({height: '300px'})})

Show () -menetelmä: Tätä menetelmää käytetään tekemään elementti näkyväksi piilotetusta tilasta.

tyyppi casting java esimerkillä
$ ('# button1'). napsauta (function () {$ ('# div1'). show ()})

Piilota () -menetelmä: Tätä menetelmää käytetään piilottamaan elementti näkyvältä tilalta.

$ ('# button1'). napsauta (function () {$ ('# div1'). hide ()})

jQueryllä on omat menetelmänsä animaatioiden ja tehosteiden tuottamiseksi verkkosivulla.

Yhteenvetona voidaan todeta, että JavaScript on verkkokehityksen kieli, jQuery on kirjasto, joka on peräisin JavaScriptistä. JavaScriptillä ja jQueryllä on oma merkityksensä verkkokehityksessä.

Nyt kun tiedät JavaScript-silmukoista, tutustu kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.

Onko sinulla kysymys meille? Mainitse se 'JavaScript vs jQuery' -kommenttiosassa ja palaamme sinuun.