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

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ä
• JQuery: JavaScriptistä kehitetty kirjasto
• Miksi JQuery luodaan ja mitkä ovat JQueryn erityisominaisuudet
• Ero JavaScriptin ja JQueryn välillä esimerkkien avulla
  • JavaScriptin ja JQueryn lisääminen HTML-dokumenttiin
  • DOM: n kulku ja manipulointi
  • Tapahtumien käsittely
  • Ajax-puhelut
  • Animaatio

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.

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

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.