JavaScripti vs jQuery: peamised erinevused, mida peate teadma



Selles JavaScripti vs jQuery's saame teada, mis on teistest parem. Mõlemad on võimsad ja neid kasutatakse veebiarenduses samal eesmärgil.

Oleme JavaScripti ja JQueryga tuttavad juba mitu aastat. JavaScripti leiutati varem kui jQuery. Mõlemad on võimsad ja neid kasutatakse veebiarenduses ning neid kasutatakse samal eesmärgil, st selleks, et muuta veebileht interaktiivseks ja dünaamiliseks. Teisisõnu, need toovad veebilehtedele elu sisse. Inimesed võivad imestada, et kui neid kasutatakse samal eesmärgil, siis miks need kaks mõistet eraldi on? Selles JavaScripti vs jQuery artiklis saame teada, mis on teistest parem järgmises järjestuses:

JavaScript: võimas keel veebiarenduses

JavaScript on skriptikeel, mida kasutatakse interaktiivsuse lisamiseks meie veebilehtedele. See on HTML-i ja CSS-i kõrval üks kolmest põhitehnoloogiast, mida kasutatakse veebilehtede loomiseks. Kui HTML ja CSS määratlevad veebilehe struktuuri ja veebilehtede ilme / stiili, siis JavaScripti abil muudetakse veebileht dünaamiliseks, lisades sellele interaktiivsuse, mis tähendab, et JavaScripti abil saame lisada hiireklõpsuks, hiirega liikumiseks ja muudeks koodideks sündmused veebisaidil ja palju muud.





JavaScript- javascript vs jquery - edureka

JavaScripti toetavad kõik veebibrauserid ja veebibrauseritel on sisseehitatud JavaScripti mootor JavaScripti koodi tuvastamiseks ja sellega töötamiseks. Seega on JavaScript peamiselt kliendipoolne keel. See on üks keel, mida saab kasutada nii protseduurikeelena kui ka prototüübipõhise objektikesksena. Esmase JavaScripti kasutamisel töötame protseduurikeelega, samal ajal kui täiustatud JavaScript kasutab objektorienteeritud mõisteid.



Läheme edasi oma JavaScripti vs jQuery abil ja mõistame JavaScripti abil välja töötatud teeki.

piirangud sql näites

jQuery: JavaScriptist välja töötatud teek

Aastate jooksul on JavaScript osutunud võimsaks keeleks veebiarenduses. On loodud palju raamatukogusid ja raamistikke, mis on ehitatud JavaScripti peale. Need teegid ja raamistikud on välja töötatud selleks, et laiendada JavaScripti võimekust, teha sellega palju asju ja hõlbustada ka arendaja tööd.



jQuery on üks sellistest JavaScripti raamatukogudest, mis on sellest üles ehitatud. See on kõige populaarsem JavaScripti teek, mille leiutas John Resign ja mis ilmus 2006. aasta jaanuaris BarCamp NYC-s. jQuery on tasuta avatud lähtekoodiga teek, mis on litsentsitud MIT-i litsentsi alusel. Sellel on võimas brauserite ühilduvuse funktsioon. See saab hõlpsasti lahendada brauseriteüleseid probleeme, millega võime JavaScripti abil silmitsi seista. Seega kasutavad paljud arendajad brauserite vaheliste ühilduvusprobleemide vältimiseks jQuery-d.

Nüüd jätkame oma JavaScripti vs jQuery ajaveebiga ja vaatame, miks jQuery loodi.

Miks jQuery luuakse ja millised on jQuery erilised võimalused?

JavaScriptis peame põhitoimingute jaoks kirjutama palju koodi, samas kui jQuery abil saab samu toiminguid teha ühe koodireaga. Seetõttu on arendajatel jQueryga lihtsam töötada kui JavaScripti abil.

  • Ehkki JavaScripti keel on põhikeel, millest jQuery on arenenud, muudab jQuery sündmuste haldamise, DOM-i manipuleerimise, kutsub Ajax kõne palju lihtsamaks kui JavaScript. jQuery võimaldab meil lisada oma veebilehele ka animeeritud efekte, mis nõuavad JavaScripti abil palju valu ja koodiridu.
  • jQueryl on veebisaidil toimingu tegemiseks sisseehitatud pistikprogrammid. Selle kasutamiseks peame pistikprogrammi lihtsalt oma veebisaidile lisama või importima. Seega võimaldavad pistikprogrammid luua animatsioonide ja interaktsioonide või efektide abstraktsioone.
  • JQuery abil saame teha ka oma kohandatud pistikprogrammi. Kui nõuame, et animatsioon tehakse veebisaidil teatud viisil, saame vastavalt nõudele välja töötada pistikprogrammi ja kasutada seda oma veebisaidil.
  • jQueryl on ka kõrgetasemeline kasutajaliidese vidinate kogu. Selles vidinakogus on terve hulk pistikprogramme, mida saame oma veebisaidile importida ja kasutada kasutajasõbralike veebilehtede loomiseks.

Saame aru erinevusest.

JavaScripti vs jQuery

FunktsioonidJavaScriptijQuery
OlemasoluJavaScript on iseseisev keel ja võib eksisteerida iseseisvalt.jQuery on JavaScripti teek. Seda poleks leiutatud, kui JavaScripti poleks olnud. jQuery sõltub endiselt JavaScriptist, kuna see tuleb brauseri sisseehitatud JavaScripti mootoriks teisendada JavaScripti tõlgendamiseks ja käitamiseks.
KeelSee on kõrgel tasemel tõlgendatud kliendipoolne skriptikeel. See on ECMA skripti ja DOM-i (dokumendi objektimudel) kombinatsioonSee on kerge JavaScripti teek. Sellel on ainult DOM
KodeerimineJavaScript kasutab rohkem koodiridu, kuna peame ise oma koodi kirjutamajQuery kasutab sama funktsionaalsuse jaoks vähem koodiridu kui JavaScripti, kuna kood on selle teegis juba kirjutatud, peame lihtsalt teegi importima ja oma koodis kasutama teegi vastavat funktsiooni / meetodit.
KasutamineJavaScripti kood on kirjutatud HTML-i lehe skripti märgendi sisse
Selle kasutamiseks peame jQuery importima CDN-ist või kohast, kuhu jQuery teek alla laaditakse. jQuery kood on kirjutatud ka HTML-i lehe skriptimärgendi sisse.
AnimatsioonidSaame teha JavaScripti animatsioone paljude koodiridadega. Animatsioone tehakse peamiselt HTML-lehe stiiliga manipuleerides.Programmis jQuery saame animatsiooniefekte hõlpsalt lisada, kasutades vähem koodiridu.
KasutajasõbralikkusJavaScript võib arendaja jaoks olla tülikas, kuna selle funktsionaalsuse saavutamiseks võib kuluda mitu koodiridajQuery on mõne koodireaga kasutajasõbralikum kui JavaScript
Brauseriteülene ühilduvusJavaScripti puhul peame võib-olla tegelema brauseriteülese ühilduvusega, kirjutades lisakoodi või lahendus.jQuery ühildub brauseritega. Me ei pea muretsema lahenduse või lisakoodi kirjutamise pärast, et muuta kood brauseriga ühilduvaks.
PerformancePuht JavaScripti saab DOM-i valimiseks / manipuleerimiseks olla kiirem kui jQuery, kuna JavaScripti töötleb otse brauser.jQuery tuleb brauseris töötamiseks muuta JavaScriptiks.
Sündmuste käitlemine, interaktiivsus ja Ajaxi kõnedKõiki neid saab teha JavaScripti abil, kuid võib-olla peame kirjutama palju koodiridu.Kõiki neid saab hõlpsasti teha vähem koodiridu sisaldava jQuery abil. JQuery's on lihtsam lisada interaktiivsust, animatsioone ja ka ajax-kõnesid, kuna funktsioonid on juba teegis eelnevalt määratletud. Me lihtsalt kasutame neid funktsioone oma koodis vajalikes kohtades.
PaljusõnalisusJavaScript on mitmekülgne, kuna funktsionaalsuse jaoks tuleb kirjutada palju koodiridujQuery on ülevaatlik ja kasutab vähem koodiridu, mõnikord ainult ühte koodirida.
Suurus ja kaalOlles keel, on see raskem kui jQueryOlles raamatukogu, on see kerge. Selle koodil on minimeeritud versioon, mis muudab selle kergeks.
Korduvkasutus ja hooldatavusJavaScripti kood võib olla mitmekülgne ja seetõttu võib seda olla keeruline hooldada ja uuesti kasutada.Kui koodiridu on vähem, on jQuery hooldatavam, kuna peame oma koodis lihtsalt kutsuma jQuery teegi etteantud funktsioonid. See paneb meid ka jQuery funktsioone hõlpsasti koodi erinevates kohtades uuesti kasutama.

Jätkates JavaScripti ja jQuery erinevust näite abil.

JavaScripti vs jQuery koos näidetega

Vaatame näiteid.

JavaScripti ja jQuery lisamine meie HTML-dokumenti

JavaScripti lisatakse otse HTML-i dokumendis märgendi sisse või välise JavaScripti faili saab HTML-dokumenti lisada src atribuudi abil.
Kirjutatud otse skripti sildi sisse:

alert ('Sellesse hoiatuskasti kutsuti laadimissündmusega')

JQuery kasutamiseks laadime faili alla selle veebisaidilt ja suuname allalaaditud jQuery faili tee SCRIPT-märgendi src atribuudi juurde, vastasel juhul saame selle otse CDN-ist (sisuvõrk).

 

CDN-i kasutamine :

 

Saame aru DOM-i läbimisest ja manipuleerimisest

DOM-i läbimine ja manipuleerimine

JavaScriptis:

DOM-elemendi saame JavaScripti valida meetodi document.getElementById () abil või meetodi document.querySelector () abil.

var mydiv = document.querySelector ('# div1')

või

document.getElementById ('# div1')

JQuery's:

Siin peame kasutama sümbolit $ ainult koos sulgudes oleva valijaga.

$ (selector) $ (“# div1”) - Valija on id 'div1' $ („. div1') - Valija on klass 'div1' $ ('p') - Valija on lõik HTML-leht

Ülaltoodud avalduses on $ märk, mida kasutatakse jQueryle juurdepääsuks, valija on HTML-element.

Stiilide lisamine JavaScripti:

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

Stiilide lisamine jQuery'sse:

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

Valija #myDiv viitab identifikaatorile myDiv

DOM-i elementide valik ja manipuleerimine on jQuery's palju napisõnalisem kui JavaScriptis.

Sündmuste käitlemisega edasi liikumine.

Ürituste käitlemine

JavaScriptis valime HTML-i elemendi:

document.getElementById ('# button1'). addEventListener ('click', myCallback) funktsioon myCallback () {konsool (funktsiooni myCallback sees)}

Siin kasutatakse meetodit getElementById () elemendi valimiseks selle ID järgi, seejärel kasutame sündmuse kuulaja lisamiseks meetodit addEventListener (). Selles näites lisame funktsiooni myCallback kuulajana sündmuse „klõpsamine“ juurde.

Ülalolevas näites võime kasutada ka anonüümset funktsiooni:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('funktsiooni sees')})

EventListeneri saab eemaldada meetodi RemoveEventListener () abil

document.getElementById ('# button1'). removeEventListener ('click', myCallback)

JQuery's

jQuery on peaaegu kõigi DOM-i toimingute jaoks eelnevalt kindlaks määranud sündmused. Saame konkreetse jQuery sündmuse toimingu jaoks kasutada.

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

Muud näited on:

$ (“# Button1”). Dblclick (function () {// toiming topeltklõpsu sündmuse jaoks html elemendis ID-ga 'button1'}

JQuery ‘on’ meetodit kasutatakse DOM-i elemendi ühe või mitme sündmuse lisamiseks.

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

Me võime lisada mitu sündmust ja mitut sündmuste käitlejat meetodiga.

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

Kahel või enamal üritusel võib olla sama käitleja nagu allpool:

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

Seega näeme, et väiksema ja sisutiheda koodiga on sündmuste haldamine jQuery's lihtsam kui JavaScripti puhul.

Ajaxi kõnedega edasi liikumine.

Ajax kutsub

JavaScripti

Ajaxi päringu serverile saatmiseks kasutas JavaScript objekti XMLHttpRequest. XMLHttpRequestil on Ajaxi kõne tegemiseks mitu meetodit. Kaks levinumat meetodit on avatud (meetod, URL, asünkroon, kasutaja, PSW), saatmine () ja saatmine (string).
Kõigepealt loome XMLHttpRequest:

var xhttp = new XMLHttpRequest () Seejärel kasutage seda objekti avatud meetodi kutsumiseks: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Avatud meetod teeb serverile / asukohale päringu, tõene täpsustab, et taotlus on asünkroonne. Kui väärtus on vale, tähendab see, et taotlus on sünkroonne.

Postitustaotluse esitamine:

var xhttp = new XMLHttpRequest () Seejärel kasutage seda objekti avatud meetodi kutsumiseks ja postitustaotluse tegemiseks: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Taotlusega andmete postitamiseks kasutame saadetavate andmete tüübi määratlemiseks xhttp meetodit setRequestHeader ja saatmismeetod saadab andmed võtme / väärtuse paaridena:

xhttp.setRequestHeader ('Sisutüüp', 'application / x-www-form-urlencoded') xhttp.send ('nimi = Ravi ja perekonnanimi = Kumar')

JQuery's

erinevus java ja klassi vahel

jQueryl on Ajaxi kõnede tegemiseks mitu sisseehitatud meetodit. Nende meetodite abil saame helistada mis tahes serverist pärinevatele andmetele ja värskendada veebilõigu osa andmetega. jQuery meetodid muudavad Ajaxi helistamise lihtsaks.
JQuery load () meetod: see meetod tõmbab andmeid URL-ist ja laadib andmed HTML-valijasse.
$ (“P”). Laadige (URL, andmed, tagasihelistamine)
URL on asukoht, mida andmete jaoks kutsutakse, valikuline andmeparameeter on andmed (võtme / väärtuse paarid), mida soovime koos kõnega saata, ja valikuline parameeter 'tagasihelistamine' on meetod, mida soovime pärast laadimist käivitada on valmis.

Meetodid jQuery $ .get () ja $ .post (): see meetod tõmbab andmeid URL-ist ja laadib andmed HTML-valijasse.
$ .get (URL, tagasihelistamine)
URL on asukoht, mida andmete jaoks kutsutakse, ja tagasihelistamine on meetod, mida soovime pärast laadimise lõppu käivitada.

$ .post (URL, andmed, tagasihelistamine)
URL on asukoht, mida andmete jaoks kutsutakse, andmed on võti / väärtuspaar (id), mille soovime kõnega saata, ja tagasihelistamine on meetod, mida soovime pärast laadimise lõpetamist käivitada. Siin on andmete ja tagasihelistamise parameetrid valikulised.

jQuery Ajaxi kõned on lühemad kui JavaScripti. JavaScriptis kasutame objekti XMLHTTPRequest, jQuery's ei pea me sellist objekti kasutama.

Animatsiooniga edasi liikumine.

Animatsioon

JavaScripti

JavaScriptil pole spetsiifilist animatsioonifunktsiooni nagu funktsioon jQuery animate (). JavaScripti animatsiooniefekt saavutatakse peamiselt elemendi stiiliga manipuleerimisega või CSS-i teisendamise, tõlkimise või animeerimise omadustega. JavaScript kasutab animatsiooniefektide jaoks ka meetodeid setInterval (), clearInterval (), setTimeout () ja clearTimeout ().

setInterval (myAnimation, 4) funktsioon myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'pöörata ( 20deg) '}

JavaScripti animatsioon on peamiselt CSS-i omadustega manipuleerimine.

JQuery's

jQueryl on HTML-elementidele animatsioonide või efektide lisamiseks palju sisseehitatud meetodeid. Kontrollime mõnda neist.
Animate () meetod: seda meetodit kasutatakse animatsiooni lisamiseks elemendile.

$ ('# button1'). klõpsake (function () {$ ('# div1') .animaalne ({height: '300px'})})

Show () meetod: seda meetodit kasutatakse elemendi varjatud olekust nähtavaks muutmiseks.

$ ('# button1'). klõpsake (function () {$ ('# div1'). show ()})

Peida () meetod: seda meetodit kasutatakse elemendi peitmiseks nähtava oleku eest.

$ ('# button1'). klõpsake (function () {$ ('# div1'). hide ()})

jQueryl on oma meetodid animatsiooni ja efektide loomiseks veebilehel.

Kokkuvõtteks võib öelda, et JavaScript on veebiarenduse keel, jQuery on teek, mis pärineb JavaScripti juurest. JavaScripti ja jQuery jaoks on veebiarenduses oma tähtsus.

Nüüd, kui olete JavaScripti aasade kohta teadlik, vaadake autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida muljetavaldavaid veebisaite looma HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil ning juurutada see Amazon Simple Storage Service'i (S3).

Kas teil on meile küsimus? Palun mainige seda „JavaScript vs jQuery“ kommentaaride jaotises ja me võtame teiega ühendust.