JavaScript vs jQuery: A legfontosabb különbségek, amelyeket tudnia kell

Ebben a JavaScript vs jQuery-ben megtudhatjuk, melyik a jobb, mint a másik. Mindkettő nagy teljesítményű, és ugyanarra a célra használják a webfejlesztésben.

Jó néhány éve ismerjük a JavaScriptet és a JQuery-t. A JavaScript-et korábban találták ki, mint a jQuery. Mindkettő erőteljes, és a webfejlesztésben használják, és ugyanarra a célra használják, azaz a weboldal interaktívvá és dinamikussá tételéhez. Más szavakkal, életet keltenek a weboldalakon. Az emberek elgondolkodhatnak azon, hogy ha ugyanazon célra használják őket, akkor miért éppen ez a két különálló fogalom? Ebben a JavaScript vs jQuery cikkben a következő sorrendben megtudhatjuk, hogy melyik jobb a másiknál:



JavaScript: hatékony nyelv a webfejlesztésben

A JavaScript egy szkriptnyelv, amelyet arra használnak, hogy interaktivitást adjon hozzá weboldalainkhoz. Ez a három alapvető technológia egyike a HTML és CSS mellett, amelyeket weboldalak létrehozására használnak. Míg a HTML és a CSS meghatározza a weboldal struktúráját és a weboldalak kinézetét / stílusát, addig a JavaScript-et használják a weboldal dinamikussá tételére interaktivitás hozzáadásával, ami azt jelenti, hogy a JavaScript segítségével hozzáadhatunk néhány kódot az egérkattintáshoz, az egérrel való egérmutatáshoz és más események a weboldalon és még sok más.



JavaScript- javascript vs jquery - edureka

Az összes webböngésző támogatja a JavaScript-et, és a webböngészők beépített JavaScript-motorral rendelkeznek a JavaScript-kód azonosításához és a vele való együttműködéshez. Így a JavaScript elsősorban ügyféloldali nyelv. Ez egy olyan nyelv, amely eljárási nyelvként, valamint prototípus-alapú objektum-orientált nyelvként is használható. Az elsődleges JavaScript használatakor az eljárási nyelvvel dolgozunk, míg a fejlett JavaScript objektum-orientált fogalmakat használ.



Menjünk tovább a JavaScript vs jQuery szolgáltatásunkkal, és értsük meg a JavaScript-ből kifejlesztett könyvtárat.

jQuery: JavaScript-ből kifejlesztett könyvtár

Az évek során a JavaScript a webfejlesztés hatékony nyelvének bizonyult. Sok olyan könyvtár és keretrendszer jött létre, amelyek a JavaScript tetejére épülnek. Ezeket a könyvtárakat és keretrendszereket úgy fejlesztették ki, hogy bővítsék a JavaScript képességeit, sok mindent végezzenek vele, és megkönnyítsék a fejlesztő munkáját.

tolmács írása java nyelven



A jQuery egy ilyen JavaScript könyvtár, amely abból épül fel. Ez a legnépszerűbb JavaScript könyvtár, amelyet John Resign talált ki, és 2006. januárjában jelent meg a BarCamp NYC-n. A jQuery ingyenes, nyílt forráskódú könyvtár, az MIT licenc alapján licencelt. Ez a böngészők közötti kompatibilitás hatékony tulajdonságával rendelkezik. Könnyen kezelheti a böngészőkön átívelő problémákat, amelyekkel a JavaScript-sel szembesülhetünk. Így sok fejlesztő használja a jQuery-t a böngészők közötti kompatibilitási problémák elkerülése érdekében.

Most lépjünk tovább a JavaScript vs jQuery blogunkra, és nézzük meg, miért jött létre a jQuery.

Miért jön létre a jQuery, és mik a jQuery speciális képességei?

A JavaScript-ben sok kódot kell írnunk az alapvető műveletekhez, míg a jQuery használatával ugyanazok a műveletek elvégezhetők egyetlen kódsorral. Ezért a fejlesztők könnyebben dolgoznak a jQuery-vel, mint a JavaScript-szel.

  • Bár a JavaScript az alapnyelv, amelyből a jQuery fejlődött, a jQuery megkönnyíti az eseménykezelést, a DOM-manipulációt, az Ajax sokkal könnyebben hív, mint a JavaScript. A jQuery lehetővé teszi számunkra, hogy animált effektusokat adjunk hozzá weboldalunkhoz, ami sok fájdalmat és kódsorokat igényel a JavaScript-sel.
  • A jQuery beépített beépülő modulokkal rendelkezik egy weboldalon végzett műveletek végrehajtására. Csak be kell illesztenünk vagy be kell importálnunk a bővítményt a weboldalunkba, hogy használhassuk. Így a beépülő modulok lehetővé teszik az animációk és az interakciók vagy effektek absztrakcióinak létrehozását.
  • A jQuery segítségével elkészíthetjük egyedi bővítményünket is. Ha megköveteljük, hogy egy animációt egy weboldalon bizonyos módon végezzenek, akkor a követelményeknek megfelelően kifejleszthetünk egy beépülő modult, és felhasználhatjuk azt a weboldalunkon.
  • A jQuery rendelkezik egy magas szintű felhasználói felületű widget könyvtárral is. Ebben a widget könyvtárban számos beépülő modul található, amelyeket importálhatunk a weboldalunkra, és felhasználhatunk felhasználóbarát weboldalak létrehozására.

Értsük meg a különbséget.

JavaScript vs jQuery

JellemzőkJavaScriptjQuery
LétezésA JavaScript független nyelv, és létezhet önmagában is.A jQuery egy JavaScript könyvtár. Nem lett volna feltalálva, ha a JavaScript nincs meg. A jQuery továbbra is függ a JavaScript-től, mivel azt a böngészőbe épített JavaScript-motornak át kell alakítania a JavaScript értelmezéséhez és futtatásához.
NyelvEz egy magas szinten értelmezett kliensoldali szkriptnyelv. Ez az ECMA szkript és a DOM (Document Object Model) kombinációjaEz egy könnyű JavaScript könyvtár. Csak a DOM rendelkezik
KódolásA JavaScript több kódsort használ, mivel saját kódot kell írnunkA jQuery kevesebb kódsort használ, mint a JavaScript ugyanahhoz a funkcionalitáshoz, mint ahogy a kód már be van írva a könyvtárába, csak importálnunk kell a könyvtárat, és a könyvtárunkban a könyvtár megfelelő funkcióját / módszerét kell használnunk.
HasználatA JavaScript kódot egy HTML oldal szkript címkéjébe írják
A használat érdekében be kell importálnunk a jQuery-t a CDN-ből, vagy egy olyan helyről, ahova a jQuery könyvtár letölthető. A jQuery kód szintén be van írva a HTML oldal szkript címkéjébe.
AnimációkAnimációkat készíthetünk JavaScript-ben, sok kódsorral. Az animációkat főleg egy Html oldal stílusának manipulálásával készítik el.A jQuery-ben kevesebb kódsorral könnyedén hozzáadhatunk animációs effektusokat.
FelhasználóbarátságA JavaScript nehézkes lehet a fejlesztő számára, mivel számos kódsorra lehet szükség a funkcionalitás eléréséhezA jQuery felhasználóbarátabb, mint a JavaScript, kevés kódsorral
Böngészők közötti kompatibilitásA JavaScript-ben előfordulhat, hogy a böngészők közötti kompatibilitással külön kód vagy egy megoldás megírásával kell megküzdenünk.A jQuery több böngészővel kompatibilis. Nem kell attól tartanunk, hogy bármilyen megoldást vagy extra kódot írunk, hogy kompatibilis legyen a kódunk egy böngészővel.
TeljesítményA tiszta JavaScript gyorsabb lehet a DOM kiválasztásához / kezeléséhez, mint a jQuery, mivel a JavaScriptet közvetlenül a böngésző dolgozza fel.A jQuery-t JavaScript-be kell konvertálni, hogy egy böngészőben fusson.
Eseménykezelés, interaktivitás és Ajax hívásokMindezek elvégezhetők JavaScript-ben, de előfordulhat, hogy sok kódsort kell írnunk.Mindezeket a jQuery segítségével könnyebben meg lehet valósítani kevesebb kódsorral. A jQuery-ben könnyebb interaktivitást, animációkat hozzáadni, és ajax hívásokat is kezdeményezni, mivel a függvények már előre vannak meghatározva a könyvtárban. Csak a szükséges helyeken használjuk ezeket a függvényeket a kódunkban.
BőbeszédűségA JavaScript bőbeszédű, mivel sok kódsort kell írni a funkcionalitáshozA jQuery tömör és kevesebb kódsort használ, néha csak egy kódsort.
Méret és súlyNyelv lévén nehezebb, mint a jQueryKönyvtár lévén könnyű. Kódjának egy aprócska változata van, ami könnyűvé teszi.
Újrafelhasználhatóság és karbantarthatóságA JavaScript kód bőbeszédű lehet, ezért nehéz fenntartani és újrafelhasználni.Kevesebb kódsorral a jQuery jobban karbantartható, mivel csak meg kell hívnunk a jQuery könyvtár előre definiált függvényeit a kódunkban. Ez arra is késztet bennünket, hogy a jQuery függvényeket könnyen újra felhasználhassuk a kód különböző helyein.

Továbblépve a JavaScript és a jQuery közötti különbséggel a Példa segítségével.

JavaScript vs jQuery példákkal

Vizsgáljuk meg a példákat.

JavaScript és jQuery hozzáadása HTML dokumentumunkba

A JavaScript közvetlenül a címke belsejében lévő HTML-dokumentumba kerül, vagy egy külső JavaScript-fájl hozzáadható egy HTML-dokumentumba az src attribútum használatával.
Közvetlenül a szkript címkéjébe írva:

riasztás ('Ezt a riasztási mezőt az onload esemény hívta meg')

A jQuery használatához letöltjük a fájlt a weboldaláról, és a letöltött jQuery fájl elérési útját a SCRIPT tag src attribútumába utaljuk, vagy közvetlenül megszerezhetjük a CDN-től (Content delivery network).

 

A CDN használata :

 

Értsük meg a DOM bejárását és a manipulációt

DOM bejárása és manipulálása

JavaScript-ben:

Kiválaszthatunk egy DOM elemet a JavaScript-ben a document.getElementById () módszerrel vagy a document.querySelector () módszerrel.

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

vagy

document.getElementById (“# div1”)

A jQuery-ben:

Itt csak a $ szimbólumot kell használni a zárójelben lévő választóval.

java hogyan kell használni az iterátort
$ (selector) $ (“# div1”) - A választó azonosítója: “div1” $ (“. div1”) - A választó egy osztály: “div1” $ (“p”) - A választó a bekezdés a HTML oldal

A fenti utasításban a $ egy olyan jel, amelyet a jQuery elérésére használnak, a választó egy HTML elem.

Stílusok hozzáadása a JavaScript-ben:

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

Stílusok hozzáadása a jQuery-ben:

$ ('# myDiv'). css ('háttérszín', '# FFF')

A #myDiv választó a „myDiv” azonosítóra utal

A DOM elem kiválasztása és kezelése sokkal tömörebb a jQuery-ben, mint a JavaScript-ben.

Az eseménykezelés folytatása.

Eseménykezelés

A JavaScript-ben kiválasztunk egy HTML elemet:

document.getElementById ('# button1'). addEventListener ('click', myCallback) függvény myCallback () {konzol („myCallback funkción belül”)}

Itt a getElementById () metódust használjuk az elem azonosító alapján történő kiválasztására, majd az addEventListener () metódussal hozzáadunk egy eseményfigyelőt az eseményhez. Ebben a példában hozzáadjuk a myCallback függvényt hallgatóként a „click” eseményhez.

A fenti példában használhatunk egy névtelen függvényt is:

document.getElementById ('# button1'). addEventListener ('click', function () {console.log ('a függvény belsejében')})

Az eventListener eltávolítható az removeEventListener () módszerrel

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

A jQuery-ben

A jQuery előre definiált eseményeket szinte az összes DOM-művelethez. Használhatjuk az adott jQuery eseményt egy művelethez.

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

További példák:

$ (“# Button1”). Dblclick (function () {// művelet a dupla kattintású eseményhez a html elemen, azonosítója: “button1”}

A JQuery ‘on’ módszerrel egy vagy több esemény hozzáadható egy DOM elemhez.

$ (“# Button1”). On (“click”, function () {// művelet itt})

Hozzáadhatunk több eseményt és több eseménykezelőt a on módszerrel.

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

Két vagy több eseménynek ugyanaz a kezelője lehet, mint az alábbiakban:

$ (“# Button1”). On (“click dblclick”, function () {// művelet itt})

Így azt látjuk, hogy kisebb és tömör kóddal az jQuery-ben az események kezelése könnyebb, mint a JavaScript-ben.

Továbblépés az Ajax hívásokkal.

Ajax hívások

JavaScript-ben

A JavaScript XMLHttpRequest objektummal küldött Ajax-kérést egy szerverre. Az XMLHttpRequest számos módszerrel rendelkezik az Ajax hívás kezdeményezésére. A két általános módszer nyitott (metódus, URL, aszinkron, felhasználó, PSW), send () és send (string).
Először hozzunk létre egy XMLHttpRequest-et:

var xhttp = new XMLHttpRequest () Ezután használja ezt az objektumot az open metódus meghívására: xhttp.open ('GET', 'D: //getinfo.txt', true) xhttp.send ()

Az open módszer lekérési kérelmet küld egy szerverhez / helyre, a true megadja, hogy a kérés aszinkron. Ha az érték hamis, az azt jelenti, hogy a kérés szinkron.

Postai kérelem benyújtása:

var xhttp = new XMLHttpRequest () Ezután használja ezt az objektumot az open metódus meghívására és postai kérelem készítésére: xhttp.open ('POST', 'D: //postinfo.txt', true) xhttp.send ()

Adatok feladásához a kéréssel az xhttp setRequestHeader metódusával definiáljuk a küldendő adatok típusát, és a küldési módszer kulcs / érték párokban küldi az adatokat:

xhttp.setRequestHeader ('Tartalom-típus', 'alkalmazás / x-www-form-urlenkódolt') xhttp.send ('név = Ravi & vezetéknév = Kumar')

A jQuery-ben

A jQuery számos beépített módszerrel rendelkezik az Ajax hívások kezdeményezésére. Ezekkel a módszerekkel hívhatunk bármilyen adatot a szerverről, és frissíthetjük az adatokkal a weboldal egy részét. A jQuery módszerek megkönnyítik az Ajax hívását.
A jQuery load () metódus: Ez a módszer lekéri az adatokat egy URL-ből, és betölti az adatokat egy HTML-választóba.
$ („P”). Betöltés (URL, adatok, visszahívás)
Az URL az a hely, amelyet az adatokhoz meg kell hívni, az opcionális adatparaméter az az adat (kulcs / érték pár), amelyet a hívással együtt el akarunk küldeni, és az opcionális „visszahívás” paraméter az a módszer, amelyet a betöltés után végre akarunk hajtani. kész.

A jQuery $ .get () és $ .post () módszer: Ez a módszer lekéri az adatokat egy URL-ből, és betölti az adatokat egy HTML-választóba.
$ .get (URL, visszahívás)
Az URL az a hely, amelyet az adatokhoz meg kell hívni, és a visszahívás az a módszer, amelyet a betöltés befejezése után végre akarunk hajtani.

$ .post (URL, adatok, visszahívás)
Az URL az a hely, amelyet az adatokhoz meg kell hívni, az adatok az a kulcs / érték pár (ok), amelyet el akarunk küldeni a hívással, és a visszahívás az a módszer, amelyet a betöltés befejezése után végre akarunk hajtani. Itt az adat- és visszahívási paraméterek nem kötelezőek.

A jQuery Ajax hívások tömörebbek, mint a JavaScript. A JavaScript-ben XMLHTTPRequest objektumot használunk, a jQuery-ben nem kell ilyen objektumot használnunk.

Továbblépés az animációval.

magyarázza példával a java mvc architektúráját

Élénkség

JavaScript-ben

A JavaScript nem rendelkezik olyan animációs funkcióval, mint a jQuery animate () függvény. A JavaScript-ben az animációs effektus elsősorban az elem stílusának manipulálásával, vagy CSS transzformáció, fordítás vagy tulajdonságok animálása révén érhető el. A JavaScript a setInterval (), a clearInterval (), a setTimeout () és a clearTimeout () metódusokat is használja az animációs effektusokhoz.

setInterval (myAnimation, 4) függvény myAnimation () {document.getElementById ('# div1'). style.transform = 'translate (100px, 100px)' document.getElementById ('# div1'). style.transform = 'rotate ( 20deg) '}

Az animáció a JavaScript-ben elsősorban a CSS tulajdonságainak manipulálásáról szól.

A jQuery-ben

A jQuery számos beépített módszerrel animációkat vagy effektusokat adhat hozzá a HTML elemekhez. Ellenőrizzünk néhányat közülük.
Az animációs () módszer: Ez a módszer animáció hozzáadására szolgál egy elemhez.

$ ('# button1'). kattintson (function () {$ ('# div1') .anim ({magasság: '300px'})})

A show () metódus: Ezt a módszert arra használják, hogy egy elem rejtett állapotból látható legyen.

$ ('# button1'). kattintson (function () {$ ('# div1'). show ()})

Hide () metódus: Ez a módszer egy elem elrejtésére szolgál egy látható állapotból.

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

A jQuery saját módszerekkel állítja elő az animációkat és az effektusokat egy weboldalon.

Összegezve: a JavaScript a webfejlesztés egyik nyelve, a jQuery egy olyan könyvtár, amely a JavaScript-ből származik. A JavaScript és a jQuery saját jelentőséggel bír a webfejlesztésben.

Most, hogy tud a JavaScript hurokról, nézze meg a írta Edureka. A webfejlesztési tanúsítási képzés segít megtanulni, hogyan hozhat létre lenyűgöző weboldalakat a HTML5, CSS3, Twitter Bootstrap 3, jQuery és Google API-k használatával, és telepítheti az Amazon Simple Storage Service (S3) szolgáltatásba.

Van egy kérdésünk? Kérjük, említse meg a „JavaScript vs jQuery” megjegyzés rovatban, és mi kapcsolatba lépünk Önnel.